Adding PopUp Menu to App Bar in Windows Store App Using C#

Today we will learn how to create a dropdown menu in a Windows 8 Apps. InWindows 8 Apps we use an app bar to show navigation, commands, and tools that help us to navigate from one page to another which gives flexibility in the use of various types of options. We can set the app bar at the bottom of the page as well as at the top of the page or we can put it on both. The app bar is hidden by default and when the user right-clicks on the screen it is then shown with all the options. We set the controls of the app bar either programmaticlly or at design time.

But, in this article we are trying to use a menu for the app options. When the user clicks or moves from the button in the app bar, it displays a dropdown menu with various options. Menus enable the developer to use more options in less space using interactive controls.

So, here first we create an app bar at the top of the page with an Edit button and then when a user clicks the Sort command button on the AppBar, you show a Popup menu. The user can pick an Edit option from the menu.

Follow these steps:

Step 1:  First, we will create a new blank Windows Store

• Open Visual Studio 2012 RC
• File -> New -> Project
• Choose Template -> Visual C# -> Windows Store
• Select Blank Application
• Rename the application.

Step 2: First we add an app bar at the top of the page and put some buttons including Edit buttons that show a pop up menu:

<Page.TopAppBar>

   <AppBar x:Name="bottomAppBar" Padding="10,0,10,0" Background="#E559A5D1" >

       <Grid>

           <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

             <Button Style="{StaticResource RemoveAppBarButtonStyle}" />

             <Button Style="{StaticResource AddAppBarButtonStyle}" />

             <Button Style="{StaticResource EditAppBarButtonStyle}"  Click="EditMenuButton_Click" />                                                                       

            </StackPanel>

         </Grid>

    </AppBar>

</Page.TopAppBar>

Step 3: Then, we add a Popup control in the page that is displayed when the user clicks on the Edit button:

<Popup x:Name="pop" IsLightDismissEnabled="True">
</Popup>

Step 4: Then, we take a stackpanel as the root element of the menu option within the Popup control:

<StackPanel x:Name="panel" Orientation="Vertical" Background="#FFB8D0E4" Height="280" Width="120" Margin="200,85" >
</StackPanel>

Step 5: Add command buttons to the stackpanel that makes the menu options:

<Button Content="Insert" Height="100" Width="100"  Margin="20,0,0,0" Style="{StaticResource TextButtonStyle}" />
<Button Content="Update" Height="100" Width="100"  Margin="20,0,0,0" Style="{StaticResource TextButtonStyle}"/>
<Button Content="Delete" Height="100" Width="100"  Margin="20,0,0,0" Style="{StaticResource TextButtonStyle}"/>

Step 6: Here we set the animation properties of the stackpanel for a better apperance in the MainPage.xaml.cs file:
 

panel.Background = bottomAppBar.Background;

panel.Transitions = new Windows.UI.Xaml.Media.Animation.TransitionCollection();

panel.Transitions.Add(new Windows.UI.Xaml.Media.Animation.EntranceThemeTransition());

Step 7: In the MainPage.xaml.cs file we open the Popup control in the click event of the edit button
 

private void EditMenuButton_Click(object sender, RoutedEventArgs e)

{

        pop.Visibility = Visibility.Visible;

        pop.IsOpen = true;

}

Step 8: The complete contents of the MainPage.xaml file is shown below:

<Page

    x:Class="App4.MainPage"

    IsTabStop="false"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:App4"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Page.TopAppBar>

        <AppBar x:Name="bottomAppBar" Padding="10,0,10,0" Background="#E559A5D1" >

            <Grid>

                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

                     <Button Style="{StaticResource RemoveAppBarButtonStyle}" />

                    <Button Style="{StaticResource AddAppBarButtonStyle}" />

                    <Button Style="{StaticResource EditAppBarButtonStyle}" Click="EditMenuButton_Click" />

                </StackPanel>

            </Grid>

        </AppBar>

    </Page.TopAppBar>

    <Grid>

        <Grid.Background>

            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                <GradientStop Color="Black"/>

                <GradientStop Color="#FF8CC9EC" Offset="1"/>

            </LinearGradientBrush>

        </Grid.Background>

        <Popup x:Name="pop" IsLightDismissEnabled="True">

            <StackPanel x:Name="panel" Orientation="Vertical" Background="#FFB8D0E4" Height="280" Width="120" Margin="200,85" >

                <Button Content="Insert" Height="100" Width="100"  Margin="20,0,0,0" Style="{StaticResource TextButtonStyle}" />

                <Button Content="Update" Height="100" Width="100"  Margin="20,0,0,0" Style="{StaticResource TextButtonStyle}"/>

                <Button Content="Delete" Height="100" Width="100"  Margin="20,0,0,0" Style="{StaticResource TextButtonStyle}"/>

            </StackPanel>

        </Popup>

    </Grid>

</Page>

Step 9: Press F5 to run the application. Right-click on the screen to display the App bar at the top of the page.



Step 10: Move or click on the Edit button from the app bar. You will see a menu is opened on the screen, as in: