How to add a menu to an app bar (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.
See this feature in action as part of our App features, start to finish series: Windows Store app UI, start to finish
What you need to know
Technologies
Prerequisites
Instructions
Step 1: Add an app bar to your app
For more info, see Quickstart: Adding app bars
Here, we add a CommandBar as the bottom app bar.
<Page.BottomAppBar> <CommandBar> ... </CommandBar> </Page.BottomAppBar>
Step 2: Add an AppBarButton to the app bar.
Add an AppBarButton and set the Icon and Label properties.
...
<CommandBar>
<AppBarButton Icon="Sort" Label="Sort">
....
</AppBarButton>
</CommandBar>
...
Step 3: Add a MenuFlyout to the AppBarButton
Add a MenuFlyout to the button's Flyout property. The flyout opens automatically when the button is clicked.
...
<AppBarButton Icon="Sort" Label="Sort">
<AppBarButton.Flyout>
<MenuFlyout>
....
</MenuFlyout>
</AppBarButton.Flyout>
</AppBarButton>
...
Step 4: Add MenuFlyoutItems to the MenuFlyout
Add a MenuFlyoutItem for each choice in the menu and set its Text property. Handle its Click event or assign a Command to take action when the user makes a choice.
...
<MenuFlyout>
<MenuFlyoutItem Text="By rating" Click="MenuFlyoutItem_Click" Tag="rating"/>
<MenuFlyoutItem Text="By match" Click="MenuFlyoutItem_Click" Tag="match"/>
<MenuFlyoutItem Text="By distance" Click="MenuFlyoutItem_Click" Tag="distance"/>
</MenuFlyout>
...
Complete example
Here's the final XAML for the app bar and the event handler code for the MenuFlyoutItem.Click event.
<Page.BottomAppBar> <CommandBar> <AppBarButton Icon="Sort" Label="Sort"> <AppBarButton.Flyout> <MenuFlyout> <MenuFlyoutItem Text="By rating" Click="MenuFlyoutItem_Click" Tag="rating"/> <MenuFlyoutItem Text="By match" Click="MenuFlyoutItem_Click" Tag="match"/> <MenuFlyoutItem Text="By distance" Click="MenuFlyoutItem_Click" Tag="distance"/> </MenuFlyout> </AppBarButton.Flyout> </AppBarButton> </CommandBar> </Page.BottomAppBar>
private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e) { MenuFlyoutItem selectedItem = sender as MenuFlyoutItem; if (selectedItem != null) { if (selectedItem.Tag.ToString() == "rating") { SortByRating(); } else if (selectedItem.Tag.ToString() == "match") { SortByMatch(); } else if (selectedItem.Tag.ToString() == "distance") { SortByDistance(); } } }
Related topics