Step 1 of 4: Creating a Windows Store Application

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

Complete the following steps:

In Visual Studio select File | New | Project.

In the New Project dialog box, expand a language in the left pane, under the language select Windows Store, and in the templates list select Blank App (XAML). 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, select WinRT Edition and click OK to close the dialog box and add the reference.

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"

This adds references to the C1.Xaml assembly to the project.

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 WinRT quick start. In this step, you created a Windows Store project. In the next step, you will add tabs and tab pages to the control.