WPF and Silverlight Edition Basic Library

Step 2: Adding RadialMenuItems to the Control

In the previous step, you created a WPF application and added the C1RadialMenu control to it. In this step, you start by setting some properties of the C1RadialMenu control that you added in the previous step, and adding a few C1RadialMenuItem controls as submenus to the main radial menu. Each menu item that you add in the markup contains an image and a TextBlock label.

Add the following C1ContextMenuService markup between <Grid></Grid> and <Border></Border> tags in MainWindow.xaml.

<c1:C1ContextMenuService.ContextMenu>
    <c1:C1RadialMenu x:Name="contextMenu" Offset="-133,0" Opened="contextMenu_Opened" AccentBrush="ForestGreen"
                     ItemClick="contextMenu_ItemClick" ItemOpened="contextMenu_ItemOpened" BorderBrush="#FFC6DEC4">
        <c1:C1RadialMenuItem Header="UndoRedo" SelectedIndex="0" ShowSelectedItem="True"
                             Command="{Binding UndoCommand, ElementName=page}">
            <c1:C1RadialMenuItem.Icon>
                <Image Source="Menu/e10e-Undo.48.png" />
            </c1:C1RadialMenuItem.Icon>
        </c1:C1RadialMenuItem>
        <c1:C1RadialMenuItem Header="Add" SectorCount="6">
            <c1:C1RadialMenuItem.Icon>
                <Image Source="Menu/e109-Add.48.png"/>
            </c1:C1RadialMenuItem.Icon>
            <c1:C1RadialMenuItem Header="New" ToolTip="New Item">
                <c1:C1RadialMenuItem.Icon>
                    <Image Source="Menu/e1da-Folder.48.png"/>
                </c1:C1RadialMenuItem.Icon>
            </c1:C1RadialMenuItem>
            <c1:C1RadialMenuItem Header="Existing" ToolTip="Existing Item">
                <c1:C1RadialMenuItem.Icon>
                    <Image Source="Menu/e132-File.48.png"/>
                </c1:C1RadialMenuItem.Icon>
            </c1:C1RadialMenuItem>
            <c1:C1RadialMenuItem Header="Folder">
                <c1:C1RadialMenuItem.Icon>
                    <Image Source="Menu/e188-Folder.48.png"/>
                </c1:C1RadialMenuItem.Icon>
            </c1:C1RadialMenuItem>
            <c1:C1RadialMenuItem Header="Class">
                <c1:C1RadialMenuItem.Icon>
                    <Image Source="Menu/1f4c4-Document.48.png"/>
                </c1:C1RadialMenuItem.Icon>
            </c1:C1RadialMenuItem>
        </c1:C1RadialMenuItem>
        <c1:C1RadialMenuItem Header="File" SectorCount="6">
            <c1:C1RadialMenuItem Header="Exclude" ToolTip="Exclude From Project" DisplayIndex="2">
                <c1:C1RadialMenuItem.Icon>
                    <Image Source="Menu/e10a-Cancel.48.png"/>
                </c1:C1RadialMenuItem.Icon>
            </c1:C1RadialMenuItem>
            <c1:C1RadialMenuItem Header="Delete">
                <c1:C1RadialMenuItem.Icon>
                    <Image Source="Menu/e107-Delete.48.png"/>
                </c1:C1RadialMenuItem.Icon>
            </c1:C1RadialMenuItem>
            <c1:C1RadialMenuItem Header="Rename">
                <c1:C1RadialMenuItem.Icon>
                    <Image Source="Menu/e104-Edit.48.png"/>
                </c1:C1RadialMenuItem.Icon>
            </c1:C1RadialMenuItem>
        </c1:C1RadialMenuItem>
        <c1:C1RadialMenuItem Header="Properties">
            <c1:C1RadialMenuItem.Icon>
                <Image Source="Menu/e115-Settings.48.png"/>
            </c1:C1RadialMenuItem.Icon>
        </c1:C1RadialMenuItem>
    </c1:C1RadialMenu>
</c1:C1ContextMenuService.ContextMenu>

The C1ContextMenuService enables the C1RadialMenu control to act as a context menu for any control. This context menu appears when the user right-click or right-tap on the parent control (which is Grid in this example). The markup illustrated above also adds items to the RadialMenu. If you prefer to show the C1RadialMenu control programmatically, you can skip C1ContextMenuService and simply call the Show method in code.

The icons added in the markup above are .png image files added to the Menu folder of the Visual Studio project. These images are available at the following path:
Documents\ComponentOne Sample\WPF\C1.WPF\CS\BasicControls\Resources

Add the following markup directly below the </C1ContextMenuService.ContextMenu> tag to add a general TextBox control to the application. This TextBlock is added to display a general instruction for the users to open the RadialMenu control on the form.

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Top"  Height="75" >
 <TextBlock Foreground="Sienna" TextAlignment="Center" FontSize="14" x:Name="text" Text="Touch: hold down for a few seconds until the indicator displays.&#10;Mouse: right-click over this page." TextWrapping="Wrap" />
</Grid>

Add the following markup after the </Border> tag to display the C1RadialMenuItem that the user taps or clicks to open.

<TextBlock x:Name="txt" Foreground="Red" Text="" FontSize="16" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="10" />

Switch to the code view, that is MainWindow.xaml.cs, and add the following event handlers in the interaction logic of XAML below the MainWindow() constructor.

Private Sub contextMenu_ItemClick(sender As Object, e As SourcedEventArgs)
    txt.Text = "Item Clicked: " + DirectCast(e.Source, C1RadialMenuItem).Header.ToString()
    Dim str As String = "Item Clicked: " + DirectCast(e.Source, C1RadialMenuItem).Header.ToString()
End Sub
Private Sub contextMenu_ItemOpened(sender As Object, e As SourcedEventArgs)
    Dim item As C1RadialMenuItem = TryCast(e.Source, C1RadialMenuItem)
    txt.Text = "Item Opened: " + (If(item.Header, item.Name)).ToString()
    Dim str As String = "Item Opened: " + (If(item.Header, item.Name)).ToString()
End Sub
Private Sub contextMenu_Opened(sender As Object, e As EventArgs)
    contextMenu.Expand()
End Sub

private void contextMenu_ItemClick(object sender, SourcedEventArgs e)
{
    txt.Text = "Item Clicked: " + ((C1RadialMenuItem)e.Source).Header.ToString();
    string str = "Item Clicked: " + ((C1RadialMenuItem)e.Source).Header.ToString();
}
private void contextMenu_ItemOpened(object sender, SourcedEventArgs e)
{
    C1RadialMenuItem item = e.Source as C1RadialMenuItem;
    txt.Text = "Item Opened: " + (item.Header ?? item.Name).ToString();
    string str = "Item Opened: " + (item.Header ?? item.Name).ToString();
}
private void contextMenu_Opened(object sender, EventArgs e)
{
    contextMenu.Expand();
}

With this you have successfully configured some properties of the RadialMenu control, and added sub-menus to it.