Step 1 of 3: Creating a C1RadialMenu Application

In This Topic

In this step, you'll create a Universal Windows application using the C1RadialMenu control.

Complete the following steps:

In Visual Studio select File | New | Project.
In the New Project dialog box, select Templates | Visual C# | Windows | Universal. From the templates list, select Blank App (Universal Windows). Enter a Name and click OK to create your project.
Right-click the project name in the Solution Explorer and select Add Reference.
In the Reference Manager dialog box, expand Universal Windows and select Extensions; you should see the UWP assemblies in the center pane. Select C1.UWP and click OK.
Open MainPage.xaml if it isn't already open, and add the following markup within the <Page> tag:

Markup
Copy Code
xmlns:Xaml="using:C1.Xaml"

Markup	Copy Code
xmlns:Xaml="using:C1.Xaml"

This adds the required references in the project.

Add the following markup within the <Page> and </Page> tags:

Markup	Copy Code
<Page.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> </Page.Resources>

Markup

Copy Code

<Page.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> 
  </Page.Resources>

This markup adds style resources that define the layout of our menu items content. We will add the menu items to C1RadialMenu in the next step. Each of our menu items will contain an Image and a TextBlock label

Add the following markup within the <Grid> and </Grid> tags:

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

This markup adds border definition to the application.

You have completed the first step of the RadialMenu for UWP quick start. In this step, you created a Universal Windows project. In the next step, you will add a RadialMenu control and menu items.