Appearance and Styling

Radius

RadiusX and RadiusY properties in the Radial Menu can be used to define the X and Y axis radius to render the control.

  • xaml
  • <navigation:SfRadialMenu RadiusX="150" RadiusY="150" />

    CenterRimRadiusFactor

    CenterRimRadiusFactor property can be used to define the radius of the center rim (inner circle).

  • xaml
  • <navigation:SfRadialMenu   CenterRimRadiusFactor="0.3" IsOpen="True" />

    Appearance-and-Styling_img1

    RimBackground

    RimBackground property used to fill the outer rim (outer circle).

  • xaml
  • <navigation:SfRadialMenu IsOpen="True" RimBackground="Green" />

    Appearance-and-Styling_img2

    RadialMenu outer ring filled with color

    RimActiveBrush

    RimActiveBrush property used to fill the expander rim and this expander rim only visible when the items have sub items.

  • xaml
  • <navigation:SfRadialMenu RimActiveBrush="Red" RimBackground="Green" IsOpen="True" />

    Appearance-and-Styling_img3

    ##RimInactiveBrush

    RimInactiveBrush property used to fill the expander rim item background when the corresponding menu item doesn’t have sub items.

  • xaml
  • <syncfusion:SfRadialMenu >
                <syncfusion:SfRadialMenuItem Header="Item 1" RimActiveBrush="SlateBlue" RimInactiveBrush="Red"/>
                <syncfusion:SfRadialMenuItem Header="Item 2" RimActiveBrush="Green">
                    <syncfusion:SfRadialMenuItem Header="Item 21" />
                </syncfusion:SfRadialMenuItem>
                <syncfusion:SfRadialMenuItem Header="Item 3" RimActiveBrush="Yellow">
                    <syncfusion:SfRadialMenuItem Header="Item 31"/>
                </syncfusion:SfRadialMenuItem>
                <syncfusion:SfRadialMenuItem Header="Item 4" RimActiveBrush="Orange">
                    <syncfusion:SfRadialMenuItem Header="Item 41"/>
                </syncfusion:SfRadialMenuItem >
                <syncfusion:SfRadialMenuItem   Header="Item 5" IsExpanderVisible="False" RimActiveBrush="Black" RimInactiveBrush="GreenYellow" />
            </syncfusion:SfRadialMenu>

    Appearance-and-Styling_img7

    RimHoverBrush

    The RimHoverBrush property can be used to fill the expander rim while the pointer is hovering over it.

  • xaml
  • <navigation:SfRadialMenu RimActiveBrush="Red" RimBackground="Green"   RimHoverBrush="Blue" IsOpen="True" />

    Appearance-and-Styling_img4

    IsExpanderVisible

    Expander arrow in the OuterRim of SfRadialMenu visibility can be changed by IsExpanderVisible property of SfRadialMenuItem. By default, IsExpanderVisible value is True.

  • xaml
  • <syncfusion:SfRadialMenu >
            <syncfusion:SfRadialMenuItem Header="Item 1" RimActiveBrush="SlateBlue">      
              <syncfusion:SfRadialMenuItem Header="Item 21"/>
                </syncfusion:SfRadialMenuItem>
                <syncfusion:SfRadialMenuItem Header="Item 2" RimActiveBrush="Green"  >
                    <syncfusion:SfRadialMenuItem Header="Item 21" />
                </syncfusion:SfRadialMenuItem>
                <syncfusion:SfRadialMenuItem Header="Item 3" RimActiveBrush="Yellow">
                    <syncfusion:SfRadialMenuItem Header="Item 31"/>
                </syncfusion:SfRadialMenuItem>
                <syncfusion:SfRadialMenuItem Header="Item 4" RimActiveBrush="Orange">
                    <syncfusion:SfRadialMenuItem Header="Item 41"/>
                </syncfusion:SfRadialMenuItem >
                <syncfusion:SfRadialMenuItem   Header="Item 5" IsExpanderVisible="False" RimActiveBrush="Black" >
                    <syncfusion:SfRadialMenuItem Header="Item 41"/>
                </syncfusion:SfRadialMenuItem>
            </syncfusion:SfRadialMenu>

    Appearance-and-Styling_img8

    RimRadiusFactor

    RimRadiusFactor property of Radial Menu can be used to set the radius of the items panel. Lowest values to this factor increases the thickness of the outer rim. Highest values to this factor decreases the thickness of the outer rim.

  • xaml
  • <navigation:SfRadialMenu RimActiveBrush="Red" RimRadiusFactor="0.7" RimBackground="Green"   RimHoverBrush="Blue" IsOpen="True" />

    Appearance-and-Styling_img5

    The navigation button displayed in the center of radial menu can be styled using NavigationButtonStyle property.

  • xaml
  • <syncfusion:SfRadialMenu NavigationButtonStyle="{StaticResource NavigationButtonStyle}"
    
    IsOpen="True" />

    Each SfRadialMenuItem can be set a different background color using MenuBackgroundColor property.

    <navigation:SfRadialMenu IsOpen="True">
    
    <navigation:SfRadialMenuItem Header="Bold" MenuBackgroundColor="Pink">
    
    <navigation:SfRadialMenuItem/>
    
    </navigation:SfRadialMenuItem>
    
    <navigation:SfRadialMenuItem Header="Copy" MenuBackgroundColor="PaleTurquoise">
    
    <navigation:SfRadialMenuItem/>
    
    </navigation:SfRadialMenuItem>
    
    <navigation:SfRadialMenuItem Header="Undo" MenuBackgroundColor="Pink">
    
    <navigation:SfRadialMenuItem/>
    
    </navigation:SfRadialMenuItem>
    
    <navigation:SfRadialMenuItem Header="Font Size" MenuBackgroundColor="PaleTurquoise">
    
    <navigation:SfRadialMenuItem/>
    
    </navigation:SfRadialMenuItem>
    
    <navigation:SfRadialMenuItem Header="Color" MenuBackgroundColor="Lavender">
    
    <navigation:SfRadialMenuItem/>
    
    </navigation:SfRadialMenuItem>
    
    </navigation:SfRadialMenu>

    menubackground

    Each SfRadialMenuItem can be set with a different background color on mouse over by using the MenuMouseOverBackgroundColor property. Before that, the ShowMouseOverStyle property should be set to true.

  • xaml
  • <navigation:SfRadialMenu IsOpen="True">
      <navigation:SfRadialMenuItem Header="Bold" MenuMouseOverBackgroundColor="Pink" ShowMouseOverStyle="true">
        <navigation:SfRadialMenuItem/>
      </navigation:SfRadialMenuItem>
      <navigation:SfRadialMenuItem Header="Copy" MenuMouseOverBackgroundColor="PaleTurquoise" ShowMouseOverStyle="true">
        <navigation:SfRadialMenuItem/>
      </navigation:SfRadialMenuItem>
      <navigation:SfRadialMenuItem Header="Undo" MenuMouseOverBackgroundColor="Pink" ShowMouseOverStyle="true">
        <navigation:SfRadialMenuItem/>
      </navigation:SfRadialMenuItem>
      <navigation:SfRadialMenuItem Header="Font Size" MenuMouseOverBackgroundColor="PaleTurquoise" ShowMouseOverStyle="true">
        <navigation:SfRadialMenuItem/>
      </navigation:SfRadialMenuItem>
     <navigation:SfRadialMenuItem Header="Color" MenuMouseOverBackgroundColor="Lavender" ShowMouseOverStyle="true">
        <navigation:SfRadialMenuItem/>
      </navigation:SfRadialMenuItem>
    </navigation:SfRadialMenu> 

    Appearance-and-Styling_img6