How to Create a Context Menu in Windows Store App

Introduction

In this section we will learn how to create a context menu in Windows 8 and how to replace the default context menu for text. Here, we will present an example explaining the working procedure. In this example we have two points; first we create a context menu to show for a file and second replacing the default commands in the context menu that is shown for text. In this example we will use the oncontextmenu event.

So, we will use the following steps to make this application as below.

Step 1 : First of all you will create a new Metro Style Application. Let us see the description with images of how you will create it.

• Open Visual Studio 2011
• File -> New -> Project
• Choose Template -> Visual C# -> Windows Metro Style -> Application
• Rename this Application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; MainPage.xaml and MainPage.xaml.cs files. In the images folder add any image to the application but in this application we don't have to add an image.

Step 3 : The MainPage.xaml file is as in the following code.

Code : Let us see the code which is given below:

<Grid x:Name="LayoutRoot" Background="PaleGoldenrod">

    <!--App Orientation States-->

    <VisualStateManager.VisualStateGroups>

      <VisualStateGroup x:Name="OrientationStates">

        <VisualState x:Name="Full"/>

        <VisualState x:Name="Fill">

          <Storyboard>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

              <DiscreteObjectKeyFrame KeyTime="0">

                <DiscreteObjectKeyFrame.Value>

                  <Thickness>40,20,40,20</Thickness>

                </DiscreteObjectKeyFrame.Value>

              </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">

              <DiscreteObjectKeyFrame KeyTime="0">

                <DiscreteObjectKeyFrame.Value>

                  <Orientation>Horizontal</Orientation>

                </DiscreteObjectKeyFrame.Value>

              </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">

                <DiscreteObjectKeyFrame KeyTime="0" Value="700">

                </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

          </Storyboard>

        </VisualState>

        <VisualState x:Name="Portrait">

            <Storyboard>

                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

                    <DiscreteObjectKeyFrame KeyTime="0">

                        <DiscreteObjectKeyFrame.Value>

                            <Thickness>40,20,40,20</Thickness>

                        </DiscreteObjectKeyFrame.Value>

                    </DiscreteObjectKeyFrame>

                </ObjectAnimationUsingKeyFrames>

                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="700">

                    </DiscreteObjectKeyFrame>

                </ObjectAnimationUsingKeyFrames>

                    </Storyboard>

        </VisualState>

        <VisualState x:Name="Snapped">

          <Storyboard>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

              <DiscreteObjectKeyFrame KeyTime="0">

                <DiscreteObjectKeyFrame.Value>

                  <Thickness>20,20,20,20</Thickness>

                </DiscreteObjectKeyFrame.Value>

              </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">

              <DiscreteObjectKeyFrame KeyTime="0">

                <DiscreteObjectKeyFrame.Value>

                  <Orientation>Vertical</Orientation>

                </DiscreteObjectKeyFrame.Value>

              </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">

                <DiscreteObjectKeyFrame KeyTime="0" Value="250">

                </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="LegalPanel">

                <DiscreteObjectKeyFrame KeyTime="0">

                    <DiscreteObjectKeyFrame.Value>

                        <Thickness>0,0,10,0</Thickness>

                    </DiscreteObjectKeyFrame.Value>

                </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

            </Storyboard>

        </VisualState>

      </VisualStateGroup>

    </VisualStateManager.VisualStateGroups>

 

    <Grid x:Name="ContentRoot" Background="LightPink" Margin="100,20,100,20">

      <Grid.RowDefinitions>

        <RowDefinition Height="Auto"/>

        <RowDefinition Height="*"/>

        <RowDefinition Height="Auto"/>

      </Grid.RowDefinitions>

 

      <!-- Header -->

      <StackPanel x:Name="Header" Grid.Row="0">

        <StackPanel Orientation="Horizontal">

          </StackPanel>

        <TextBlock x:Name="FeatureName" Text="Context Menu " Style="{StaticResource H1Style}" TextWrapping="Wrap" Foreground="Blue"/>

      </StackPanel>

 

      <!-- Content -->

      <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Row="1" ZoomMode="Disabled">

        <StackPanel x:Name="ContentPanel">

          <StackPanel x:Name="InputPanel" Orientation="Horizontal" HorizontalAlignment="Left">

            <StackPanel>

              <TextBlock Text="Options" Style="{StaticResource H2Style}"/>

              <TextBlock Text="Select Items" Style="{StaticResource H3Style}"/>

              <ListBox x:Name="SectionList" Margin="0,0,20,0" HorizontalAlignment="Left">

                <ListBox.ItemTemplate>

                  <DataTemplate>

                    <TextBlock Text="{Binding Name}"/>

                  </DataTemplate>

                </ListBox.ItemTemplate>

                <ListBoxItem x:Name="Section1">

                  <TextBlock Text="1) Show a context menu" Style="{StaticResource ListBoxTextStyle}"/>

                </ListBoxItem>

                <ListBoxItem x:Name="Section2">

                  <TextBlock Text="2) Replace a default context menu" Style="{StaticResource ListBoxTextStyle}"/>

                </ListBoxItem>

              </ListBox>

            </StackPanel>

            <StackPanel Margin="0,31,0,0" >

              <TextBlock Text="Description:" Style="{StaticResource H3Style}"/>

              <StackPanel x:Name="Description" MaxWidth="900">

                 

                <!-- Section 1 -->

                <StackPanel x:Name="Section1Input">

     <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Text="Tap on the show context menu button to show a simple context menu. Right-click or press and hold on the attachment to show an example context menu." />

                  <StackPanel Orientation="Horizontal" Margin="0,10,0,0">

                    <Image x:Name="Section1Image" HorizontalAlignment="Right" Source="images/attachment.png" />

                  </StackPanel>

                </StackPanel>

 

                <!-- Section 2 -->

                <StackPanel x:Name="Section2Input">

                  <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Text="Select and right-click or tap on the selection in the below text box to show a custom context menu for text." />

                  <StackPanel Orientation="Horizontal" Margin="0,10,0,0">

                    <TextBox x:Name="Section2TextBox"></TextBox>

                  </StackPanel>

                </StackPanel>

 

              </StackPanel>

            </StackPanel>

          </StackPanel>

           

            <!-- Output section -->

          <TextBlock Text="Output" Margin="0,25,0,20" Style="{StaticResource H2Style}"/>

          <StackPanel x:Name="Output"  HorizontalAlignment="Left">

             

            <!-- Section 1-->

            <StackPanel x:Name="Section1Output">

              <TextBlock Style="{StaticResource DescriptionTextStyle}" x:Name="Output1Text"  TextWrapping="Wrap" Text="" />

            </StackPanel>

             

            <!-- Section 2 -->

            <StackPanel x:Name="Section2Output" >

              <TextBlock Style="{StaticResource DescriptionTextStyle}" x:Name="Output2Text"  TextWrapping="Wrap" Text="" />

            </StackPanel>

          </StackPanel>

        </StackPanel>

      </ScrollViewer>

       

        <!-- Footer -->

        <StackPanel x:Name="Footer" Grid.Row="2" Margin="0, 10, 0, 0" VerticalAlignment="Bottom">

            <StackPanel>               

                <TextBlock Style="{StaticResource FooterStyle}" TextWrapping="Wrap"/>

            </StackPanel>

            <StackPanel x:Name="LegalPanel" Orientation="Horizontal" Margin="0,-15,10,0" VerticalAlignment="Top" HorizontalAlignment="Right">

                 <TextBlock Text="|" Style="{StaticResource SeparatorStyle}" VerticalAlignment="Center" Margin="5,0,5,0"/>

                <TextBlock Text="|"  Style="{StaticResource SeparatorStyle}" VerticalAlignment="Center" Margin="5,0,5,0"/>

               </StackPanel>

        </StackPanel>

    </Grid>

  </Grid>

</UserControl>

Step 4 : After running this code we get the following output. Here we have to explain the two different points with different functionality:

 Show context menu button to show a simple context menu. Right-click or press and hold on the attachment to show an example context menu:

 Select and right-click or tap on the selection in the following text box to show a custom context menu for text.