Menu volant et barre de menus

  • Article

Les menus volants sont utilisés dans les scénarios de menu et de menu contextuel pour afficher une liste de commandes ou d’options lorsque l’utilisateur le demande. Un menu volant affiche un menu unique, inline, de niveau supérieur qui peut contenir des éléments de menu et des sous-menus. Pour afficher un ensemble de plusieurs menus de niveau supérieur dans une ligne horizontale, utilisez la barre de menus (que vous positionnez généralement en haut de la fenêtre de l’application).

Exemple de menu contextuel standard

Est-ce le contrôle approprié ?

Consultez menus et menus contextuels pour obtenir de l’aide sur l’identification des scénarios de menu et de menu contextuel et des conseils sur l’utilisation du menu volant par rapport au menu volant de la barre de commandes.

Les menus volants peuvent être utilisés comme menus et menus contextuels pour organiser les commandes. Pour afficher du contenu arbitraire, tel qu’une notification ou une demande de confirmation, utilisez une boîte de dialogue ou un menu volant.

Si une commande particulière est utilisée fréquemment et que vous disposez de l’espace disponible, consultez Commandes de collection pour obtenir des exemples de placement d’une commande directement dans son propre élément afin que les utilisateurs n’aient pas à passer par un menu pour y accéder.

UWP et WinUI 2

Important

Les informations et les exemples de cet article sont optimisés pour les applications qui utilisent le SDK d'application Windows et WinUI 3, mais qui s’appliquent généralement aux applications UWP qui utilisent WinUI 2. Consultez la référence API de la plateforme Windows universelle pour obtenir des informations et des exemples spécifiques à la plateforme.

Cette section contient les informations dont vous avez besoin pour utiliser le contrôle dans une application de la plateforme Windows universelle ou de WinUI 2.

MenuBar nécessite Windows 10 version 1809 (SDK 17763) ou ultérieure, ou la bibliothèque d’interface utilisateur Windows.

Les contrôles MenuFlyout et MenuBar pour les applications UWP sont inclus dans la bibliothèque d’interface utilisateur Windows 2. Pour plus d’informations, notamment des instructions d’installation, consultez la bibliothèque d’interface utilisateur Windows. Les API de ces contrôles existent dans les espaces de noms Windows.UI.Xaml.Controls et Microsoft.UI.Xaml.Controls .

Nous vous recommandons d’utiliser la dernière version de WinUI 2 pour obtenir les styles et modèles les plus récents pour tous les contrôles. WinUI 2.2 ou version ultérieure inclut un nouveau modèle pour ces contrôles qui utilise des coins arrondis. Pour plus d’informations, consultez Rayons des angles.

Pour utiliser le code de cet article avec WinUI 2, utilisez un alias en XAML (nous utilisons muxc) pour représenter les API de bibliothèque d’interface utilisateur Windows incluses dans votre projet. Consultez Bien démarrer avec WinUI 2 pour plus d’informations.

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

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

Créer un menu volant

Ouvrez l’application Galerie WinUI 3 et consultez MenuBar en action.

L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.

Pour créer un menu volant, vous utilisez la classe MenuFlyout. Vous définissez le contenu du menu en ajoutant des objets MenuFlyoutItem, MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem et MenuFlyoutSeparator à MenuFlyout.

Voici le rôle de ces objets :

Cet exemple crée un MenuFlyout et utilise la propriété ContextFlyout (qui est disponible pour la plupart des contrôles) pour afficher le MenuFlyout sous la forme d’un menu contextuel.

<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’exemple qui suit est presque identique, mais au lieu d’utiliser la propriété ContextFlyout pour afficher la classe MenuFlyout sous forme de menu contextuel, l’exemple utilise la propriété FlyoutBase.ShowAttachedFlyout pour l’afficher sous forme de 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;
    }
}

Icônes

Fournissez des icônes d’élément de menu pour :

  • Les éléments les plus fréquemment utilisés
  • Les éléments de menu dont l’icône est standard ou bien connue
  • Les éléments de menu dont l’icône montre clairement ce que permet de faire la commande

Ne vous sentez pas obligé de fournir des icônes pour les commandes qui n’ont pas de visualisation standard. Les icônes non explicites ne sont pas utiles : elles créent un encombrement visuel et empêchent les utilisateurs de se concentrer sur les éléments de menu importants.

Exemple de menu contextuel avec des icônes

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

Conseil

La taille des icônes d’un MenuFlyoutItem est de 16 x 16 px. Si vous utilisez SymbolIcon, FontIcon ou PathIcon, la taille de l’icône s’ajustera automatiquement sans perte de fidélité. Si vous utilisez BitmapIcon, vérifiez que la taille de votre ressource est de 16 x 16 px.

Abandon interactif

Les contrôles d’abandon interactif, tels que les menus, les menus contextuels et les menus volants, interceptent le focus du clavier et du boîtier de commande à l’intérieur de l’interface utilisateur temporaire, jusqu’à le faire disparaître. Pour fournir une indication visuelle de ce comportement, les contrôles de la Xbox permettant de faire disparaître la luminosité dessinent une superposition qui assombrit l’interface utilisateur hors de portée. Ce comportement peut être modifié avec la propriété LightDismissOverlayMode . Par défaut, les interfaces utilisateur temporaires dessinent la superposition de l’abandon interactif sur Xbox (Automatique), mais pas sur les autres familles d’appareils. Vous pouvez forcer la superposition à être toujours Activée ou Désactivée.

<MenuFlyout LightDismissOverlayMode="Off" />

Créer une barre de menus

Ouvrez l’application Galerie WinUI 3 et consultez MenuBar en action.

L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.

Vous utilisez les mêmes éléments pour créer les menus d’une barre de menus que pour créer un menu volant. Toutefois, au lieu de regrouper les objets MenuFlyoutItem dans un MenuFlyout, vous les regroupez dans un élément MenuBarItem. Chaque MenuBarItem est ajouté au MenuBar en tant que menu de niveau supérieur.

Exemple de barre de menus

Notes

Cet exemple montre uniquement comment créer la structure de l’interface utilisateur, mais ne montre pas comment implémenter les commandes.

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

Obtenir l’exemple de code