Menu a comparsa e barra dei menu

  • Articolo

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 riquadro a comparsa del menu mostra un menu singolo, inline, 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).

Example of a typical context menu

È il controllo giusto?

Vedere menu e menu di scelta rapida per informazioni sull'identificazione di scenari di menu di scelta rapida e indicazioni su quando usare il riquadro a comparsa del menu a comparsa e la 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.

Piattaforma UWP e WinUI 2

Importante

Le informazioni e gli esempi in questo articolo sono ottimizzati per le app che usano Windows App SDK e WinUI 3, ma sono generalmente applicabili alle app UWP che usano WinUI 2. Per informazioni ed esempi specifici della piattaforma, consultare le indicazioni di riferimento sulle API UWP.

Questa sezione contiene informazioni necessarie per usare il controllo in un'app UWP o WinUI 2.

MenuBar richiede Windows 10, versione 1809 (SDK 17763) o versioni successive oppure la libreria dell'interfaccia utente di Windows.

I controlli MenuFlyout e MenuBar per le app UWP sono inclusi come parte della libreria dell'interfaccia utente di Windows 2. Per altre informazioni, incluse le istruzioni per l'installazione, vedi Libreria dell'interfaccia utente di Windows. Le API per questi controlli sono presenti negli spazi dei nomi Windows.UI.Xaml.Controls e lo spazio dei nomi Microsoft.UI.Xaml.Controls.

È consigliabile usare la versione più recente di WinUI 2 per ottenere gli stili e i modelli più recenti per tutti i controlli. WinUI 2.2 o versioni successive include un nuovo modello per questi controlli che usa angoli arrotondati. Per altre informazioni, vedere Raggio dell'angolo.

Per usare il codice in questo articolo con WinUI 2, usare un alias in XAML (si usa muxc) per rappresentare le API della libreria dell'interfaccia utente di Windows incluse nel progetto. Per altre informazioni, vedere Attività iniziali di WinUI 2.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:MenuFlyout />
<muxc:MenuBar />

Creare un menu flyout

Aprire l'app Raccolta WinUI 3 e vedere MenuBar in azione.

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

Per creare un riquadro a comparsa del menu o un menu flyout, puoi usare la classe MenuFlyout. Per definire il contenuto del menu, devi aggiungere oggetti MenuFlyoutItem, MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem e MenuFlyoutSeparator a MenuFlyout.

Questi oggetti sono:

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 == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.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 == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.UI.Colors.Red;
    }
}

Icone

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

  • Elementi usati con maggiore frequenza.
  • Voci di menu con icone 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.

Example context menu with icons

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

Suggerimento

Le dimensioni di un'icona in MenuFlyoutItem sono di 16x16 px. Se usi SymbolIcon, FontIcon o PathIcon, l'icona si adatta automaticamente alle dimensioni appropriate senza perdita di fedeltà. Se usi BitmapIcon, assicurati che l'asset sia di 16x16 px.

Elementi che scompaiono quando si tocca lo schermo

I controlli che scompaiono quando si tocca lo schermo, ad esempio menu, menu di scelta rapida e altri riquadri a comparsa, bloccano lo stato attivo della tastiera e del game pad all'interno dell'interfaccia utente temporanea fino a quando non vengono chiusi. Per fornire un segnale visivo di questo comportamento, su Xbox i controlli che scompaiono quando si tocca lo schermo disegnano una sovrimpressione che attenua il contrasto e la visibilità dell'interfaccia utente esterna all'ambito. Questo comportamento può essere modificato con la proprietà LightDismissOverlayMode. Per impostazione predefinita, le interfacce utente temporanee disegnano la sovrimpressione per i controlli che scompaiono quando si tocca lo schermo su Xbox (Auto) ma non in altre famiglie di dispositivi. Puoi scegliere di forzare la sovrimpressione in modo che la sua impostazione sia sempre On o sempre Off.

<MenuFlyout LightDismissOverlayMode="Off" />

Creare una barra dei menu

Aprire l'app Raccolta WinUI 3 e vedere MenuBar in azione.

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su 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.

Example of a menu bar

Nota

Questo esempio illustra solo come creare la struttura dell'interfaccia utente, ma non mostra l'implementazione dei comandi.

<muxc:MenuBar>
    <muxc: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"/>
    </muxc:MenuBarItem>

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

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

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

Scaricare il codice di esempio