Windows Dev Center

Come aggiungere un menu a una barra dell'app (XAML)

Quando aggiungi i comandi a una barra dell'app, prova a vedere se è più comodo inserire i set di comandi in un menu. I menu ti consentono di visualizzare più opzioni in meno spazio e includono controlli interattivi. In questo esempio il menu Ordina visualizza un semplice elenco che semplifica la selezione delle opzioni.

Per una dimostrazione pratica di questa funzionalità, vedi gli argomenti della serie Funzionalità dell'app, dall'inizio alla fine:  Interfaccia utente delle app di Windows Store, dall'inizio alla fine

Menu della barra dell'app

Cosa sapere

Tecnologie

Prerequisiti

Istruzioni

Passaggio 1: Aggiungere una barra dell'app all'app

Per ulteriori informazioni, vedi Guida introduttiva: Aggiunta di barre dell'app.

In questo caso, aggiungiamo un elemento CommandBar come barra dell'app inferiore.


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

Passaggio 2: Aggiungere un elemento AppBarButton alla barra dell'app

Aggiungi un elemento AppBarButton e imposta le proprietà Icon e Label.


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

Passaggio 3: Aggiungere un elemento MenuFlyout ad AppBarButton

Aggiungi un elemento MenuFlyout alla proprietà Flyout del pulsante. Il riquadro a comparsa si apre automaticamente quando si fa clic sul pulsante.


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

Passaggio 4: Aggiungere elementi MenuFlyoutItem a MenuFlyout

Aggiungi un elemento MenuFlyoutItem per ogni opzione nel menu e imposta la relativa proprietà Text. Gestisci il relativo evento Click o assegna un Command per eseguire un'azione quando l'utente effettua la selezione.


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

Esempio completo

Ecco il codice XAML finale per la barra dell'app e il codice del gestore per l'evento 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();
        }
    }
}

Argomenti correlati

Guida introduttiva: Aggiunta di barre dell'app
AppBar
CommandBar
AppBarButton
MenuFlyout

 

 

Mostra:
© 2015 Microsoft