Menu a discesa e barra dei menu

I riquadri a comparsa dei menu vengono usati negli scenari di menu e menu di scelta rapida per visualizzare un elenco di comandi o opzioni quando richiesto dall'utente. Un pannello a comparsa del menu mostra un menu singolo, in linea e di primo livello che può avere voci di menu e sottomenu. Per visualizzare un set di più menu di primo livello in una riga orizzontale, usa la barra dei menu (in genere posizionata nella parte superiore della finestra dell'app).

Questo è il controllo giusto?

Vedere menu e menu di scelta rapida per aiuto nell'identificazione degli scenari dei menu rispetto ai menu di scelta rapida e indicazioni su quando utilizzare il flyout del menu rispetto al flyout della barra dei comandi.

I riquadri a comparsa dei menu possono essere usati come menu e menu di scelta rapida per organizzare i comandi. Per visualizzare contenuto arbitrario, ad esempio una notifica o una richiesta di conferma, usare una finestra di dialogo o un riquadro a comparsa.

Se un particolare comando verrà usato di frequente e si dispone dello spazio disponibile, vedere La raccolta comandi per esempi sull'inserimento di un comando direttamente nel proprio elemento in modo che gli utenti non devono passare attraverso un menu per accedervi.

Creare un menu a scomparsa

L'app Raccolta WinUI 3 include esempi interattivi di controlli e funzionalità WinUI. Ottenere l'app dal Microsoft Store o esplorare il codice sorgente in GitHub.

Per creare un riquadro a comparsa, puoi usare la classe MenuFlyout. Il contenuto del menu si definisce aggiungendo gli oggetti MenuFlyoutItem, MenuFlyoutSubItem, SplitMenuFlyoutItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem e MenuFlyoutSeparator a MenuFlyout.

Questi oggetti sono destinati a:

• MenuFlyoutItem: esecuzione di un'azione immediata.
• MenuFlyoutSubItem: possibilità di contenere un elenco a cascata di voci di menu.
• SplitMenuFlyoutItem: esecuzione di un'azione predefinita, con azioni correlate in un elenco a cascata. Per altre info, vedi Aggiungere una voce di menu divisa.
• ToggleMenuFlyoutItem: attivazione o disattivazione di un'opzione.
• RadioMenuFlyoutItem: passaggio tra voci di menu che si escludono a vicenda.
• MenuFlyoutSeparator: separa visivamente gli elementi del menu.

Questo esempio crea un MenuFlyout e usa la proprietà ContextFlyout, una proprietà disponibile per la maggior parte dei controlli, per mostrare MenuFlyout come menu di scelta rapida.

<Rectangle
  Height="100" Width="100">
  <Rectangle.ContextFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
    </MenuFlyout>
  </Rectangle.ContextFlyout>
  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectangleFill" Color="Red" />
  </Rectangle.Fill>
</Rectangle>

private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
    // Change the color from red to blue or blue to red.
    if (rectangleFill.Color == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.UI.Colors.Red;
    }
}

L'esempio seguente è quasi identico, ma invece di usare la proprietà ContextFlyout per visualizzare la classe MenuFlyout come menu di scelta rapida, nell'esempio viene utilizzata la proprietà FlyoutBase.ShowAttachedFlyout per visualizzarla come menu.

<Rectangle
  Height="100" Width="100"
  Tapped="Rectangle_Tapped">
  <FlyoutBase.AttachedFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
    </MenuFlyout>
  </FlyoutBase.AttachedFlyout>
  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectangleFill" Color="Red" />
  </Rectangle.Fill>
</Rectangle>

private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}

private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
    // Change the color from red to blue or blue to red.
    if (rectangleFill.Color == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.UI.Colors.Red;
    }
}

Aggiungere un elemento di menu suddiviso

L'app Raccolta WinUI 3 include esempi interattivi di controlli e funzionalità WinUI. Ottenere l'app dal Microsoft Store o esplorare il codice sorgente in GitHub.

Un elemento SplitMenuFlyoutItem offre un'esperienza di pulsante diviso in un menu a comparsa. Ha due parti:

• La parte primaria esegue un'azione predefinita, ad esempio MenuFlyoutItem. Per rispondere quando l'utente lo seleziona, gestire l'evento Click o impostare la proprietà Command .
• La parte secondaria apre un sottomenu di opzioni correlate, ad esempio menuFlyoutSubItem.

Usare una voce di menu suddivisa quando un comando ha un'azione predefinita comune e alcune varianti, ad esempio il salvataggio di un file in formati diversi. Mantiene il menu più breve di quello che sarebbe se ogni variante fosse elencata come elemento separato.

Questo esempio, dall'app Raccolta WinUI 3, aggiunge due voci di menu divise a un MenuFlyout. Gli elementi del sottomenu si trovano nella proprietà Items . Poiché Items è la proprietà del contenuto XAML di SplitMenuFlyoutItem, puoi aggiungere gli elementi del sottomenu direttamente all'interno dell'elemento SplitMenuFlyoutItem.

<StackPanel Orientation="Horizontal" Spacing="12">
    <Button Content="File Options">
        <Button.Flyout>
            <MenuFlyout>
                <SplitMenuFlyoutItem Text="Save" Click="SplitMenuFlyoutItem_Click">
                    <SplitMenuFlyoutItem.Icon>
                        <FontIcon Glyph="&#xE74E;" />
                    </SplitMenuFlyoutItem.Icon>
                    <MenuFlyoutItem Text="Save as .docx" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .pdf" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .txt" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
                <SplitMenuFlyoutItem Text="Share" Icon="Share" Click="SplitMenuFlyoutItem_Click">
                    <MenuFlyoutItem Text="Share via email" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Share via link" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
            </MenuFlyout>
        </Button.Flyout>
    </Button>
    <TextBlock x:Name="SelectedCommandText" VerticalAlignment="Center" />
</StackPanel>

private void SplitMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    // SplitMenuFlyoutItem derives from MenuFlyoutItem, so one handler works for both.
    if (sender is MenuFlyoutItem selectedItem)
    {
        SelectedCommandText.Text = "Clicked: " + selectedItem.Text;
    }
}

Il sottomenu può contenere anche oggetti MenuFlyoutSeparator e altri oggetti SplitMenuFlyoutItem. Se la Items raccolta è vuota, la parte secondaria è disabilitata.

Per personalizzare il sottomenu, impostare SubMenuPresenterStyle su uno stile per il presenter del sottomenu e SubMenuItemStyle su uno stile per gli elementi nel sottomenu.

Gli utenti interagiscono separatamente con le due parti quando usano la tastiera:

• Quando la parte primaria ha lo stato attivo, premere INVIO o Spazio per eseguire l'azione predefinita oppure premere il tasto freccia destra per spostare lo stato attivo sulla parte secondaria.
• Quando la parte secondaria ha lo stato attivo, premere INVIO o il tasto freccia destra per aprire il sottomenu.
• Quando il sottomenu è aperto, premere ESC o il tasto freccia sinistra per chiuderlo.

Le utilità per la lettura dello schermo annunciano anche le due parti separatamente. La parte secondaria viene annunciata come pulsante che fornisce altre opzioni per la voce di menu.

Icons

Prendi in considerazione l'eventualità di fornire icone per le voci di menu relativamente a:

• Elementi usati con maggiore frequenza.
• Voci di menu le cui icone sono standard o ben note.
• Voci di menu le cui icone illustrino ampiamente la funzione del comando.

Non sentirti obbligato a inserire le icone per i comandi che non hanno una visualizzazione standard. Le icone criptiche sono di scarsa utilità, in quanto generano confusione visiva e impediscono agli utenti di concentrarsi sulle voci di menu fondamentali.

<MenuFlyout>
  <MenuFlyoutItem Text="Share" >
    <MenuFlyoutItem.Icon>
      <FontIcon Glyph="&#xE72D;" />
    </MenuFlyoutItem.Icon>
  </MenuFlyoutItem>
  <MenuFlyoutItem Text="Copy" Icon="Copy" />
  <MenuFlyoutItem Text="Delete" Icon="Delete" />
  <MenuFlyoutSeparator />
  <MenuFlyoutItem Text="Rename" />
  <MenuFlyoutItem Text="Select" />
</MenuFlyout>

Chiusura leggera

I controlli che si chiudono automaticamente, come menu, menu di scelta rapida e altri pannelli a comparsa, intrappolano lo stato attivo della tastiera e del gamepad all'interno dell'interfaccia utente temporanea fino a quando non vengono chiusi. Per fornire un segnale visivo per questo comportamento, i controlli di chiusura della luce su Xbox disegnano una sovrimpressione che attenua la visibilità dell'interfaccia utente fuori ambito. Questo comportamento può essere modificato con la proprietà LightDismissOverlayMode. Per impostazione predefinita, le interfacce utente temporanee disegnano la sovrimpressione di chiusura della luce su Xbox (Auto) ma non su altre famiglie di dispositivi. È possibile scegliere di forzare la sovrimpressione in modo che sia sempre Attivata o Sempre Disattivata.

<MenuFlyout LightDismissOverlayMode="Off" />

Creare una barra dei menu

L'app Raccolta WinUI 3 include esempi interattivi di controlli e funzionalità WinUI. Ottenere l'app dal Microsoft Store o esplorare il codice sorgente in GitHub.

Puoi usare gli stessi elementi per creare i menu in una barra dei menu e in un riquadro a comparsa del menu. Tuttavia, invece di raggruppare gli oggetti MenuFlyoutItem in MenuFlyout, puoi raggrupparli in un elemento MenuBarItem. Ogni MenuBarItem viene aggiunto a MenuBar come menu di primo livello.

<MenuBar>
    <MenuBarItem Title="File">
        <MenuFlyoutSubItem Text="New">
            <MenuFlyoutItem Text="Plain Text Document"/>
            <MenuFlyoutItem Text="Rich Text Document"/>
            <MenuFlyoutItem Text="Other Formats..."/>
        </MenuFlyoutSubItem>
        <MenuFlyoutItem Text="Open..."/>
        <MenuFlyoutItem Text="Save"/>
        <MenuFlyoutSeparator />
        <MenuFlyoutItem Text="Exit"/>
    </MenuBarItem>

    <MenuBarItem Title="Edit">
        <MenuFlyoutItem Text="Undo"/>
        <MenuFlyoutItem Text="Cut"/>
        <MenuFlyoutItem Text="Copy"/>
        <MenuFlyoutItem Text="Paste"/>
    </MenuBarItem>

    <MenuBarItem Title="View">
        <MenuFlyoutItem Text="Output"/>
        <MenuFlyoutSeparator/>
        <RadioMenuFlyoutItem Text="Landscape" GroupName="OrientationGroup"/>
        <RadioMenuFlyoutItem Text="Portrait" GroupName="OrientationGroup" IsChecked="True"/>
        <MenuFlyoutSeparator/>
        <RadioMenuFlyoutItem Text="Small icons" GroupName="SizeGroup"/>
        <RadioMenuFlyoutItem Text="Medium icons" IsChecked="True" GroupName="SizeGroup"/>
        <RadioMenuFlyoutItem Text="Large icons" GroupName="SizeGroup"/>
    </MenuBarItem>

    <MenuBarItem Title="Help">
        <MenuFlyoutItem Text="About"/>
    </MenuBarItem>
</MenuBar>

Articoli correlati

• Nozioni di base sulla progettazione dei comandi per le app Windows
• Menu e menu di scelta rapida
• Esecuzione di comandi contestuali per le raccolte e gli elenchi
• Classe MenuFlyout
• Classe SplitMenuFlyoutItem
• Classe MenuBar