In the last step, you created a Windows Store application. In this step, you will add a C1Menu control.

1. Place the cursor between the <Grid> and </Grid> tags in MainPage.xaml, and click once.

2. Add markup for a C1DockPanel control:

Markup	Copy Code
<C1:C1DockPanel Grid.Row="1" LastChildFill="False"></C1:C1DockPanel>

You’ll add the C1Menu within this control.

3. Add markup for a TextBlock just after the </C1:C1DockPanel> tag:

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

The name of any menu item you select will be displayed in the TextBlock at run time.

4. Add the following markup within the <C1:C1DockPanel> tags:

<C1:C1Menu x:Name="VisualStudioMenu" C1:C1DockPanel.Dock="Top" DetectBoundaries="True" MinWidth="200" ItemClick="Menu_ItemClick">
    <C1:C1Menu.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </C1:C1Menu.ItemContainerTransitions>
</C1:C1Menu>

This adds a C1Menu control.

5. Add the following markup just before the </c1:C1Menu> tag:

Markup

Copy Code

<C1:C1MenuItem Header="File"> <C1:C1MenuItem Header="New"> <C1:C1MenuItem Header="Project..." IsCheckable="True" IsChecked="True" > <C1:C1MenuItem.Icon> <TextBlock Text="&#xE188;" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1MenuItem Header="Web Site..." > <C1:C1MenuItem.Icon> <TextBlock Text="&#xE12B;" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1MenuItem Header="Team Project..." > <C1:C1MenuItem.Icon> <TextBlock Text="&#xE125;" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1MenuItem Header="File..." > <C1:C1MenuItem.Icon> <TextBlock Text="&#xE132;" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> </C1:C1MenuItem> <C1:C1MenuItem Header="Open"> <C1:C1MenuItem Header="Project..." > <C1:C1MenuItem.Icon> <TextBlock Text="&#xE19C;" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1MenuItem Header="Web Site..." > <C1:C1MenuItem.Icon> <TextBlock Text="&#xE12B;" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1MenuItem Header="File..." > <C1:C1MenuItem.Icon> <TextBlock Text="&#xE19C;" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> </C1:C1MenuItem> <C1:C1Separator /> <C1:C1MenuItem Header="Close" /> <C1:C1MenuItem Header="Close Solution"> <C1:C1MenuItem.Icon> <TextBlock Text="&#xE10A;" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1Separator /> <C1:C1MenuItem Header="Save" > <C1:C1MenuItem.Icon> <TextBlock Text="&#xE105;" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1MenuItem Header="Save All" /> <C1:C1Separator /> <C1:C1MenuItem Header="Page Setup"> <C1:C1MenuItem.Icon> <TextBlock Text="&#xE160;" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1MenuItem Header="Print"> <C1:C1MenuItem.Icon> <TextBlock Text="&#x2399;" Style="{StaticResource TextIconStyle}" FontWeight="ExtraBold" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1Separator /> <C1:C1MenuItem Header="Exit"/> </C1:C1MenuItem> <C1:C1MenuItem Header="Edit"> <C1:C1MenuItem Header="Undo"> <C1:C1MenuItem.Icon> <TextBlock Text="&#xE10E;" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1MenuItem Header="Redo"> <C1:C1MenuItem.Icon> <TextBlock Text="&#xE10D;" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1Separator /> <C1:C1MenuItem Header="Cut"> <C1:C1MenuItem.Icon> <TextBlock Text="&#xE16B;" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1MenuItem Header="Copy"> <C1:C1MenuItem.Icon> <TextBlock Text="&#xE16F;" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1MenuItem Header="Paste"> <C1:C1MenuItem.Icon> <TextBlock Text="&#xE16D;" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> <C1:C1MenuItem Header="Delete" Width="100"> <C1:C1MenuItem.Icon> <TextBlock Text="&#xE106;" Style="{StaticResource TextIconStyle}" /> </C1:C1MenuItem.Icon> </C1:C1MenuItem> </C1:C1MenuItem> <C1:C1MenuItem Header="Window"> <C1:C1MenuItem Header="Document 1" IsCheckable="True" IsChecked="True" /> <C1:C1MenuItem Header="Document 2" IsCheckable="True" IsChecked="True" /> <C1:C1MenuItem Header="Document 3" IsCheckable="True" /> <C1:C1MenuItem Header="Document 4" IsCheckable="True" /> <C1:C1Separator /> <C1:C1MenuItem Header="Exclusive 1" GroupName="Exclusives" IsCheckable="True" IsChecked="True" /> <C1:C1MenuItem Header="Exclusive 2" GroupName="Exclusives" IsCheckable="True" IsChecked="True" /> <C1:C1MenuItem Header="Exclusive 3" GroupName="Exclusives" IsCheckable="True" /> </C1:C1MenuItem> <C1:C1MenuItem Header="Deep"> <C1:C1MenuItem Header="Deep1"> <C1:C1MenuItem Header="Deep2"> <C1:C1MenuItem Header="Deep3"> <C1:C1MenuItem Header="Deep4"> <C1:C1MenuItem Header="Deep5"> </C1:C1MenuItem> </C1:C1MenuItem> </C1:C1MenuItem> </C1:C1MenuItem> </C1:C1MenuItem> </C1:C1MenuItem>

The above markup adds markup for menu structure.

6. Open the MainPage.xaml.cs (or MainPage.xaml.vb) page and add the following Click event handler to the project:

Visual Basic	Copy Code
Private Sub Menu_ItemClick(sender As Object, e As C1.Xaml.SourcedEventArgs) txt.Text = "Item Clicked: " & DirectCast(e.Source, C1.Xaml.C1MenuItem).Header.ToString() End Sub

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

In this step, you added a C1Menu control. In the next step, you will add a C1ContextMenu control to the application.

Copyright (c) GrapeCity, inc. All rights reserved.