Basic Library for WPF and Silverlight | ComponentOne
WPF and Silverlight Edition Basic Library / RadialMenu / RadialMenu Elements / Creating Radial Menus
In This Topic
    Creating Radial Menus
    In This Topic

    Using the C1RadialMenu control, you can create both top-level menus and submenus. Creating either type of menu is easy with C1RadialMenu:

    Complete the following steps to create a top-level menu:

    1. Place the following XAML between the <Grid> and </Grid> tags:
    XAML
    Copy Code 
    <Xaml:C1ContextMenuService.ContextMenu>
     <Xaml:C1RadialMenu >                      
    </Xaml:C1RadialMenu>
</Xaml:C1ContextMenuService.ContextMenu>

    The C1RadialMenu control is within a ContextMenuService. When you run your application, the menu will appear when you right-click or right-tap.

    1. Place the following XAML between the <Xaml:C1RadialMenu> and </Xaml:C1RadialMenu> tags. This will create three top-level menu items:
    XAML
    Copy Code 
    <Xaml:C1RadialMenuItem Header="RadialMenuItem1" />
<Xaml:C1RadialMenuItem Header="RadialMenuItem2" />
<Xaml:C1RadialMenuItem Header="RadialMenuItem3" />
    1. Run the program and observe the following:
      • Right tap or right-click the page. In this case, this is the element to which the C1RadialMenu is attached. Observe that the Navigation Button appears.
      • Tap or click the Navigation Button to open the radial menu. Observe that the C1RadialMenu contains three C1RadialMenuItems.

    Your top-level menu should resemble the following image:

    Complete the following steps to create a submenu that's attached to one of a C1RadialMenu's items:

    1. Create a C1RadialMenu:
    XAML
    Copy Code 
    <Xaml:C1ContextMenuService.ContextMenu>
     <Xaml:C1RadialMenu > 
                         
    </Xaml:C1RadialMenu>
</Xaml:C1ContextMenuService.ContextMenu>
    1. Place the following XAML between the <Xaml: C1RadialMenu> and </Xaml:C1RadialMenu> tags:
    XAML
    Copy Code 
    <Xaml:C1RadialMenuItem Header="Tap Here" >
  <Xaml:C1RadialMenuItem Header="Item 1" />
  <Xaml:C1RadialMenuItem Header="Item 2" />
  <Xaml:C1RadialMenuItem Header="Item 3" />
</Xaml:C1RadialMenuItem>
    1. Run the program.
      • Right tap or right-click the page to display the Navigation Button. Tap or click the Navigation Button to display the main C1RadialMenu.
      • Tap or click the Tap Here item and observe that the submenu you created appears.

    This is the C1RadialMenu control after you tap or click the Tap Here item: