Step 1 of 4: Creating a Universal Windows Application

In This Topic

In this step, you'll create a Universal Windows application using the C1Menu and C1ContextMenu controls.

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 the MainPage.xaml.cs (or MainPage.xaml.vb) code file and add the following reference to the top of the page:

Visual Basic
Copy Code
Imports C1.Xaml

Visual Basic	Copy Code
Imports C1.Xaml

C#
Copy Code
using C1.Xaml;

C#	Copy Code
using C1.Xaml;

Open MainPage.xaml and add the following markup within the <Page> tag:

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

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

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

Markup	Copy Code
<Page.Resources> <Style TargetType="Image" x:Key="MenuIcon"> <Setter Property="Width" Value="16"/> <Setter Property="Height" Value="16"/> <Setter Property="Margin" Value="5 0 0 0"/> </Style> <Style TargetType="TextBlock" x:Key="TextIconStyle"> <Setter Property="FontSize" Value="20" /> <Setter Property="FontFamily" Value="Segoe UI Symbol" /> <Setter Property="FontWeight" Value="Normal" /> <Setter Property="Foreground" Value="{StaticResource AppBarItemForegroundThemeBrush}" /> <Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="Margin" Value="5,-1,0,0"/> </Style> <Style TargetType="C1:C1MenuItem"> <Setter Property="ItemContainerTransitions"> <Setter.Value> <TransitionCollection> <RepositionThemeTransition/> <EntranceThemeTransition/> </TransitionCollection> </Setter.Value> </Setter> <Setter Property="ItemContainerTransitions"> <Setter.Value> <TransitionCollection> <RepositionThemeTransition/> <EntranceThemeTransition/> </TransitionCollection> </Setter.Value> </Setter> </Style> </Page.Resources>

Markup

Copy Code

<Page.Resources>
        <Style TargetType="Image" x:Key="MenuIcon">
            <Setter Property="Width" Value="16"/>
            <Setter Property="Height" Value="16"/>
            <Setter Property="Margin" Value="5 0 0 0"/>
        </Style>
        <Style TargetType="TextBlock" x:Key="TextIconStyle">
            <Setter Property="FontSize" Value="20" />
            <Setter Property="FontFamily" Value="Segoe UI Symbol" />
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="Foreground" Value="{StaticResource AppBarItemForegroundThemeBrush}" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Margin" Value="5,-1,0,0"/>
        </Style>
        <Style TargetType="C1:C1MenuItem">
            <Setter Property="ItemContainerTransitions">
                <Setter.Value>
                    <TransitionCollection>
                        <RepositionThemeTransition/>
                        <EntranceThemeTransition/>
                    </TransitionCollection>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemContainerTransitions">
                <Setter.Value>
                    <TransitionCollection>
                        <RepositionThemeTransition/>
                        <EntranceThemeTransition/>
                    </TransitionCollection>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

This markup adds style resources.

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

Markup	Copy Code
<Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition /> </Grid.RowDefinitions>

This markup adds row definitions to the grid.

You have completed the first step of the Menu for UWP quick start. In this step, you created a Universal Windows project. In the next step, you will add tabs and tab pages to the control.