Comment ajouter un menu à une barre de l’application (XAML)

Applies to Windows and Windows Phone

Quand vous ajoutez des commandes à une barre de l’application, essayez de déterminer si vos commandes ne seraient pas plus efficaces dans un menu de commandes. Les menus permettent de présenter davantage d’options tout en occupant moins de place et comportent des contrôles interactifs. Dans cet exemple, le menu Sort présente une liste simple qui facilite la sélection des options.

Voir cette fonctionnalité en action dans le cadre de notre série Fonctionnalités d’application de A à Z:  Interface utilisateur des applications du Windows Store de A à Z

Menu de barre de l’applications

Ce que vous devez savoir

Technologies

Prérequis

Instructions

Étape 1: Ajouter une barre de l’application à votre application

Pour plus d’informations, voir Démarrage rapide : ajout de barres d’applications.

Ici, nous ajoutons une CommandBar comme barre de l’application inférieure.


<Page.BottomAppBar>
    <CommandBar>
        ...
    </CommandBar>
</Page.BottomAppBar>

Étape 2: Ajoutez un élément AppBarButton à la barre de l’application.

Ajoutez un élément AppBarButton et définissez les propriétés Icon et Label.


...
    <CommandBar>
        <AppBarButton Icon="Sort" Label="Sort">
            .... 
        </AppBarButton>
    </CommandBar>
...

Étape 3: Ajouter un contrôle MenuFlyout à l’élément AppBarButton

Ajoutez un contrôle MenuFlyout à la propriété Flyout du bouton. Quand l’utilisateur clique sur le bouton, le menu volant s’ouvre automatiquement.


...
        <AppBarButton Icon="Sort" Label="Sort">
            <AppBarButton.Flyout>
                <MenuFlyout>
                    ....
                </MenuFlyout>
            </AppBarButton.Flyout>
        </AppBarButton>
...

Étape 4: Ajouter des éléments MenuFlyoutItems au contrôle MenuFlyout

Ajoutez un élément MenuFlyoutItem pour chaque option du menu et définissez sa propriété Text. Gérez son événement Click ou affectez une Command pour agir quand l’utilisateur effectue un choix.


...
                <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>
...

Exemple complet

Voici le code XAML final pour la barre de l’application et le code du gestionnaire d’événements pour l’événement MenuFlyoutItem.Click.


<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();
        }
    }
}

Rubriques associées

Démarrage rapide : ajout de barres d’applications
AppBar
CommandBar
AppBarButton
MenuFlyout

 

 

Afficher:
© 2015 Microsoft