Styling RadRadialMenu Parts

The following article will demonstrate how to style different parts of the RadRadialMenu control.

You can access the RadRadialMenu control parts through alias pointing to the Telerik.UI.Xaml.Controls.Navigation.Menu namespaces: xmlns:menu="using:Telerik.UI.Xaml.Controls.Navigation.Menu"

Styling the ContentMenu

To style the content menu you can use the ContentMenuBackgroundStyle property of the RadRadialMenu. You have to set a Style that targets the Rectangle type.

When the ContentSectorBackground property of the RadialMenuItem is set, the menu item will overlay the background of the content menu.

Example 1: Change ContentMenuBackground

<navigation:RadRadialMenu.ContentMenuBackgroundStyle> 
    <Style TargetType="Rectangle"> 
        <Setter Property="Fill" Value="#CDDC39"/> 
    </Style> 
</navigation:RadRadialMenu.ContentMenuBackgroundStyle> 

The result is:

Styling the NavigationMenu

To style the NavigationMenu you can use the NavigationMenuBackgroundStyle property of the RadRadialMenu. You have to set a Style that targets the Rectangle type.

When the menu items have child elements, the NavigationItemButton will overlay the background of the navigation menu.

Example 2: Change NavigationMenuBackground

<navigation:RadRadialMenu.NavigationMenuBackgroundStyle> 
    <Style TargetType="Rectangle"> 
        <Setter Property="Fill" Value="#CDDC39"/> 
    </Style> 
</navigation:RadRadialMenu.NavigationMenuBackgroundStyle> 

The result is:

Styling the NavigationItemButton

To change the appearance of the NavigationItemButton, you have to define an implicit style in the Resources of the RadRadialMenu that targets the NavigationItemButton type defined in the Telerik.UI.Xaml.Controls.Primitives.Menu namespace.

Example 2: Style NavigationItemButton

<navigation:RadRadialMenu.Resources> 
    <Style TargetType="menu:NavigationItemButton"> 
        <Setter Property="Foreground" Value="#009688"/> 
        <Setter Property="Background" Value="#FFC107"/> 
    </Style> 
</navigation:RadRadialMenu.Resources> 

Styling the RadialMenuItem

The RadialMenuItem can be styled via its ContentSectorBackground property.

Example 3: Change ContentSectorBackground

<navigation:RadialMenuItem Header="Item 1" ContentSectorBackground="#4CAF50"/> 

You can use the InnerRadiusFactor and the InnerNavigationRadiusFactor properties to control the size of the RadialMenuItem.

Styling the DecorationItemButton

To change the appearance of the DecorationItemButton, you have to define an implicit style in the Resources of the RadRadialMenu that targets the DecorationItemButton type defined in the Telerik.UI.Xaml.Controls.Primitives.Menu namespace.

Example 4: Style DecorationItemButton

<navigation:RadRadialMenu.Resources> 
    <Style TargetType="menu:DecorationItemButton"> 
        <Setter Property="ThicknessFactor" Value="0.2"/> 
        <Setter Property="ArrowThicknessFactor" Value="0.6"/> 
        <Setter Property="PointerOverBackgroundBrush" Value="Yellow"/> 
        <Setter Property="SelectedBackgroundBrush" Value="#4CAF50"/> 
        <Setter Property="SelectedPointerOverBackgroundBrush" Value="Orange"/> 
    </Style> 
</navigation:RadRadialMenu.Resources> 

The result is:

Styling the RadialMenuButton

To change the appearance of the RadialMenuButton, you have to define an implicit style in the Resources of the RadRadialMenu that targets the RadialMenuButton type defined in the Telerik.UI.Xaml.Controls.Primitives.Menu namespace.

Example 5: Style RadialMenuButton

<navigation:RadRadialMenu.Resources> 
    <Style TargetType="menu:RadialMenuButton"> 
        <Setter Property="Content" Value="options"/> 
        <Setter Property="FontSize" Value="15"/> 
        <Setter Property="Width" Value="60"/> 
        <Setter Property="Foreground" Value="LightSeaGreen"/> 
        <Setter Property="Background" Value="LightPink"></Setter> 
        <Setter Property="FontFamily" Value="Segoe UI"/> 
    </Style> 
</navigation:RadRadialMenu.Resources> 

To place a text inside the Content part of the RadialMenuButton, the FontFamily property needs to be set. For example, it could be set to "Segoe UI".

The result is: