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

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:

<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" />
</c1:C1RadialMenu>

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:

<c1:C1RadialMenuSectorCount="8">
   <c1:C1RadialMenuItemHeader="Item 1"/>
   <c1: C1RadialMenuItem/>
   <c1:C1RadialMenuItemHeader="Item 2" />
   <c1: C1RadialMenuItem/>
   <c1:C1RadialMenuItemHeader="Item 3" />
</c1:C1RadialMenu>