Hardware Dev Center

Collapse the table of content
Expand the table of content
Expand Minimize
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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

App bar menu

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

Quickstart: Adding app bars
AppBar
CommandBar
AppBarButton
MenuFlyout

 

 

Show:
© 2015 Microsoft