How to add a menu to an app bar (Windows Store apps using C#/VB/C++ and XAML)

When you add commands to an app bar, consider whether your command sets would work better in a command menu. Menus let you present more options in less space and include interactive controls. In this example, the Sort menu pops up a simple list that makes choosing options easy.

Roadmap: How does this topic relate to others? See:

• Roadmap for Windows Store apps using C# or Visual Basic
• Roadmap for Windows Store apps using C++

What you need to know

Technologies

• AppBar

Prerequisites

• Quickstart: Adding app bars
• Commanding design for Windows Store apps

Instructions

Step 1: Add an app bar to the app

• Add an app bar to your app. For more info, see Quickstart: Adding app bars.

  Here, we add a bottom app bar with a button to show the sort menu.

  XAML

  Copy

  
  <Page.BottomAppBar>
      <AppBar x:Name="bottomAppBar" IsSticky="True">
          <Grid>
              <StackPanel x:Name="rightPanel" 
                          Orientation="Horizontal" HorizontalAlignment="Right">
                  <Button Style="{StaticResource AppBarButtonStyle}" 
                          Content="&#xE174;" 
                          AutomationProperties.Name="Sort"
                          AutomationProperties.AutomationId="SortButton"
                          Click="SortMenuButton_Click" />
              </StackPanel>
          </Grid>
      </AppBar>
  </Page.BottomAppBar>
  
  
  

Step 2: Show the menu pop up

When a user clicks the Sort command button on the AppBar, you show a Popup menu. The user picks a sort option from the menu.

1. Create a Popup to host the sort menu.
   C#

   C++

   VB

   Copy

   
   Popup popUp = new Popup();
   
   
   

2. Set the Popup.IsLightDismissEnabled property to true.

   With light dismiss enabled, the Popup hides automatically when the user interacts with another part of the app.

   C#

   C++

   VB

   Copy

   
   popUp.IsLightDismissEnabled = true;
   
   
   

3. Create a panel as the root of the menu UI.
   C#

   C++

   VB

   Copy

   
   StackPanel panel = new StackPanel();
   panel.Background = bottomAppBar.Background;
   panel.Height = 140;
   panel.Width = 180;
   
   
   

4. Add command buttons to the menu UI.
   C#

   C++

   VB

   Copy

   
   Button byRatingButton = new Button();
   byRatingButton.Content = "By rating";
   byRatingButton.Style = (Style)App.Current.Resources["TextButtonStyle"];
   byRatingButton.Margin = new Thickness(20, 5, 20, 5);
   byRatingButton.Click += SortButton_Click;
   panel.Children.Add(byRatingButton);
   
   
   

5. Add the menu root panel as the Popup content.
   C#

   C++

   VB

   Copy

   
   popUp.Child = panel;
   
   
   

6. Calculate the placement of the Popup menu.

   Here, we place the Popup in the bottom right corner of the screen, above the AppBar, with a padding of 4.

   C#

   C++

   VB

   Copy

   
   popUp.HorizontalOffset = Window.Current.CoreWindow.Bounds.Right - panel.Width - 4;
   popUp.VerticalOffset = Window.Current.CoreWindow.Bounds.Bottom - bottomAppBar.ActualHeight - panel.Height - 4;
   
   
   

7. Open the Popup.
   C#

   C++

   VB

   Copy

   
   popUp.IsOpen = true;
   
   
   

Related topics

Quickstart: Adding app bars

AppBar

Popup

Build date: 11/29/2012