In the last step, you created a UWP project. In this step, you will add a C1RadialMenu control.

1. Place the cursor between the <Grid> and </Grid> tags in MainPage.xaml, and click once.
2. Add markup for a C1ContextMenuService.ContextMenu attached property:

Markup	Copy Code
<Xaml:C1ContextMenuService.ContextMenu> </Xaml:C1ContextMenuService.ContextMenu>

The C1ContextMenuService enables C1RadialMenu to act as the context menu for any control. It will automatically appear when you right-click or right-tap on the parent control. In this case, the parent control is a Grid. Next, You’ll add the C1RadialMenu within this control.

Note: If you prefer to show the C1RadialMenu control programmatically, you can skip C1ContextMenuService and simply call the C1RadialMenu.Show method in code.

3. Add the following markup within the <Xaml:C1ContextMenuService.ContextMenu > tags:

Markup	Copy Code
<Xaml:C1RadialMenu x:Name="contextMenu" Offset="-130,0" ItemClick="contextMenu_ItemClick" ItemOpened="contextMenu_ItemOpened" > </Xaml:C1RadialMenu>

This adds a C1RadialMenu control.

4. Add the following markup within the <Xaml:C1RadialMenu> </Xaml:C1RadialMenu> tags:

Markup

Copy Code

<Xaml:C1RadialMenuItem Header="UndoRedo" SelectedIndex="0" ShowSelectedItem="True" Command="{Binding UndoCommand, ElementName=page}"> <Xaml:C1RadialMenuItem Header="Undo" > <Xaml:C1RadialMenuItem.Icon> <TextBlock Text="&#xE10E;" Style="{StaticResource TextIconStyle}" /> </Xaml:C1RadialMenuItem.Icon> </Xaml:C1RadialMenuItem> <Xaml:C1RadialMenuItem Header="Redo" > <Xaml:C1RadialMenuItem.Icon> <TextBlock Text="&#xE10D;" Style="{StaticResource TextIconStyle}" /> </Xaml:C1RadialMenuItem.Icon> </Xaml:C1RadialMenuItem> <Xaml:C1RadialMenuItem ToolTip="Clear Text Formatting" DisplayIndex="7"> <Xaml:C1RadialMenuItem.Header> <TextBlock TextWrapping="Wrap" MaxWidth="50" TextAlignment="Center">Clear Format</TextBlock> </Xaml:C1RadialMenuItem.Header> </Xaml:C1RadialMenuItem> </Xaml:C1RadialMenuItem> <Xaml:C1RadialMenuItem AutoSelect="True" ShowSelectedItem="True" Header="Clipboard" SectorCount="8"> <Xaml:C1RadialMenuItem Header="Cut"> <Xaml:C1RadialMenuItem.Icon> <TextBlock Text="&#xE16B;" Style="{StaticResource TextIconStyle}" /> </Xaml:C1RadialMenuItem.Icon> </Xaml:C1RadialMenuItem> <Xaml:C1RadialMenuItem Header="Copy"> <Xaml:C1RadialMenuItem.Icon> <TextBlock Text="&#xE16F;" Style="{StaticResource TextIconStyle}" /> </Xaml:C1RadialMenuItem.Icon> </Xaml:C1RadialMenuItem> <Xaml:C1RadialMenuItem Header="Paste"> <Xaml:C1RadialMenuItem.Icon> <TextBlock Text="&#xE16D;" Style="{StaticResource TextIconStyle}" /> </Xaml:C1RadialMenuItem.Icon> </Xaml:C1RadialMenuItem> </Xaml:C1RadialMenuItem> <Xaml:C1RadialMenuItem Header="Add" SectorCount="6"> <Xaml:C1RadialMenuItem.Icon> <TextBlock Text="&#xE109;" Style="{StaticResource TextIconStyle}" /> </Xaml:C1RadialMenuItem.Icon> <Xaml:C1RadialMenuItem Header="New" ToolTip="New Item"> <Xaml:C1RadialMenuItem.Icon> <TextBlock Text="&#xE1DA;" Style="{StaticResource TextIconStyle}" /> </Xaml:C1RadialMenuItem.Icon> </Xaml:C1RadialMenuItem> <Xaml:C1RadialMenuItem Header="Existing" ToolTip="Existing Item"> <Xaml:C1RadialMenuItem.Icon> <TextBlock Text="&#xE132;" Style="{StaticResource TextIconStyle}" /> </Xaml:C1RadialMenuItem.Icon> </Xaml:C1RadialMenuItem> <Xaml:C1RadialMenuItem Header="Folder"> <Xaml:C1RadialMenuItem.Icon> <TextBlock Text="&#xE188;" Style="{StaticResource TextIconStyle}" /> </Xaml:C1RadialMenuItem.Icon> </Xaml:C1RadialMenuItem> <Xaml:C1RadialMenuItem Header="Class"> <Xaml:C1RadialMenuItem.Icon> <TextBlock Text="&#xE1D3;" Style="{StaticResource TextIconStyle}" /> </Xaml:C1RadialMenuItem.Icon> </Xaml:C1RadialMenuItem> </Xaml:C1RadialMenuItem> <Xaml:C1RadialMenuItem Header="Exclude" ToolTip="Exclude From Project" > <Xaml:C1RadialMenuItem.Icon> <TextBlock Text="&#xE10A;" Style="{StaticResource TextIconStyle}" /> </Xaml:C1RadialMenuItem.Icon> </Xaml:C1RadialMenuItem> <Xaml:C1RadialMenuItem Header="Delete"> <Xaml:C1RadialMenuItem.Icon> <TextBlock Text="&#xE107;" Style="{StaticResource TextIconStyle}" /> </Xaml:C1RadialMenuItem.Icon> </Xaml:C1RadialMenuItem> <Xaml:C1RadialMenuItem Header="Rename"> <Xaml:C1RadialMenuItem.Icon> <TextBlock Text="&#xE13E;" Style="{StaticResource TextIconStyle}" /> </Xaml:C1RadialMenuItem.Icon> </Xaml:C1RadialMenuItem> <Xaml:C1RadialMenuItem Header="Properties"> <Xaml:C1RadialMenuItem.Icon> <TextBlock Text="&#xE115;" Style="{StaticResource TextIconStyle}" /> </Xaml:C1RadialMenuItem.Icon> </Xaml:C1RadialMenuItem>

The above markup adds menu items to the RadialMenu.

5. Add the following markup directly below the </Xaml:C1ContextMenuService.ContextMenu> tags:

Markup	Copy Code
<TextBlock x:Name="_txt" Text="Right-click over this text." Foreground="Sienna" FontSize="16" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border > <TextBlock x:Name="txt" Foreground="Black" Text="" FontSize="16" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="10" />

This will add two general TextBlock controls to the application, one before the </Border> tag, and one after it. The first TextBlock will contain the directions for how to display the C1RadialMenu. The second TextBlock will display the C1RadialMenuItem you have tapped or clicked, or opened.

6. Open the MainPage.xaml.cs page and add the following Click event handlers to the project:

C#	Copy Code
private void contextMenu_ItemClick(object sender, C1.Xaml.SourcedEventArgs e) { txt.Text = "Item Clicked: " + ((C1.Xaml.C1RadialMenuItem)e.Source).Header.ToString(); } private void contextMenu_ItemOpened(object sender, C1.Xaml.SourcedEventArgs e) { txt.Text = "Item Opened: " + ((C1.Xaml.C1RadialMenuItem)e.Source).Header.ToString(); }

In this step, you added a C1RadialMenu control. In the next step, you will run the project and see the result of the RadialMenu for UWP quick start.