Menu for WPF | ComponentOne
Menu Overview / Radial Menu / Positioning Items
In This Topic
    Positioning Items
    In This Topic

    By default, RadialMenuItems are positioned to equally fill the 360 degree menu, each within a separate menu sector.

    If a RadialMenu has three items, they would be positioned so that each item takes up a third of the RadialMenu:

    But if you have a RadialMenu with 8 items, each item will take up an eighth of the radial menu:

    There are two different ways to accomplish creating a RadialMenu with customized item positioning. You can either use the SectorCount and DisplayIndex properties, or you can insert an empty RadialMenuItem between menu items.

    Using the SectorCount and DisplayIndex Properties

    You can customize the number of sectors with the SectorCount property.  This property can be set for both the main RadialMenu and for any RadialMenuItem that contains child items.

    The SectorCount property, if used with the DisplayIndex property, allows you to fully customize RadialMenuItem positioning.

    The RadialMenuItem.DisplayIndexProperty property uses zero-based indexing to define how the RadialMenuItems are displayed.

    In a RadialMenu with the SectorCount set to "8", the display indices begin at the center left side of the RadialMenu and continue around the menu in a clockwise direction:


    The following markup uses the SectorCount property and the DisplayIndex property to display items at four different positions:

    Copy Code
    <c1:C1RadialMenu SectorCount="8">
        <c1:C1RadialMenuItem Header="Insert Left"/>
        <c1:C1RadialMenuItem Header="Insert Above" DisplayIndex="2" />
        <c1:C1RadialMenuItem Header="Insert Right" DisplayIndex="4" />
        <c1:C1RadialMenuItem Header="Insert Below" DisplayIndex="6" />

    The markup above will create a RadialMenu control like the one in the following image:

    Using Empty RadialMenuItems

    You can also customize the position of RadialMenuItems by inserting an empty RadialMenuItem in between the other menu items.

    Use the following XAML markup to position the RadialMenuItems:

    Copy Code
       <c1:C1RadialMenuItemHeader="Item 1"/>
       <c1: C1RadialMenuItem/>
       <c1:C1RadialMenuItemHeader="Item 2" />
       <c1: C1RadialMenuItem/>
       <c1:C1RadialMenuItemHeader="Item 3" />