In this step, you begin by creating a WPF application in Visual Studio and then adding a RadialMenu control to your application.

Setup the Application and Add RadialMenu

1. Create a new WPF application in Visual Studio.
2. Navigate to the Toolbox and locate C1RadialMenu control icon.
3. Double-click the C1RadialMenu icon to add the control to the MainWindow.
4. Open MainWindow.xaml if it is not already open and add the following markup within the <Window></Window> tags. The following markup adds style resources to define the layout of menu items content.

   XAML

   Copy Code

   <Window.Resources> <Style TargetType="TextBlock" x:Key="TextIconStyle"> <Setter Property="Margin" Value="-10" /> <Setter Property="FontSize" Value="20" /> <Setter Property="FontFamily" Value="Segoe UI Symbol" /> <Setter Property="FontWeight" Value="Normal" /> <Setter Property="Foreground" Value="#333333" /> <Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="VerticalAlignment" Value="Center" /> </Style> <Style TargetType="Image" > <Setter Property="Width" Value="25"/> <Setter Property="Height" Value="25"/> <Setter Property="Margin" Value="0"/> </Style> </Window.Resources>

5. Add the following markup within the <Grid></Grid> tags to add border definition to the application.

   XAML	Copy Code
   <Border Background="LemonChiffon" MinHeight="40" BorderBrush="#969696" BorderThickness="1" Padding="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Border>

Back to Top

Add RadialMenuItems to the RadialMenu

In this step, you start by setting some properties of the RadialMenu 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.

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

   XAML

   Copy Code

   <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\Menu\MenuExplorer\Resources

2. 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.

   XAML	Copy Code
   <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>

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

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

4. 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.

   C#

   Copy Code

   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(); }

Back to Top

Build and Run the application

1. Press F5 to run the application and observe that window similar to the image below appears.
   
2. Right-click or tap on the Window and observe that the RadialMenu control appears. The radial menu displays four menus namely Add, File, Properties and Undo/Redo.
   
3. Click the Add menu to see its child or submenu. To traverse back to the main radial menu, click the arrow appearing in the center of the C1RadialMenu control.
   
4. Click the File menu to view its child or submenu items. To traverse back to the main radial menu, click the arrow appearing in the center of the RadialMenu control.
   

Back to Top