Menu volant et barre de menus

Les menus volants sont utilisés dans les scénarios à base de menus et menus contextuels pour afficher une liste de commandes ou d’options à la demande de l’utilisateur. Un menu volant affiche un seul menu de niveau supérieur, inclus, capable d'héberger des éléments de menu et des sous-menus. Pour afficher un ensemble de menus de niveau supérieur sur une ligne horizontale, utilisez une barre de menus (à placer généralement en haut de la fenêtre de l’application).

Est-ce le contrôle approprié ?

Consultez Menus et menus contextuels pour obtenir de l'aide sur l'identification des cas d'application de menus ou de menus contextuels et obtenir des conseils sur l’emploi de menus volants ou de menus volants de barre de commandes.

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

Si une certaine commande est destinée à être utilisée fréquemment et que vous disposez de l’espace nécessaire, consultez Commandes de collection pour voir des exemples sur la façon de placer 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 WinUI 2.

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

• API UWP : classe MenuFlyout, classe MenuBar, propriété ContextFlyout, flyoutBase.AttachedFlyout, propriété
• API WinUI 2 : Classe MenuBar, Propriété ContextFlyout, Propriété FlyoutBase.AttachedFlyout
• Ouvrez l’application WinUI 2 Gallery et voyez MenuBar en action. L’application WinUI 2 Gallery comprend des exemples interactifs de la plupart des contrôles et fonctionnalités WinUI 2. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.

Nous vous recommandons d’utiliser la dernière version de WinUI 2 pour obtenir les styles et fonctionnalités les plus récents pour tous les contrôles. WinUI 2.2 ou version ultérieure inclut pour ces contrôles un nouveau modèle qui utilise des angles 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

• API importantes : classe MenuFlyout, propriété ContextFlyout, propriété FlyoutBase.AttachedFlyout

Ouvrez l’application WinUI 3 Gallery et voyez 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, utilisez la classe MenuFlyout. Vous définissez le contenu du menu en ajoutant des objets MenuFlyoutItem, MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem et MenuFlyoutSeparator à MenuFlyout.

Ces objets ont les rôles suivants :

• MenuFlyoutItem : exécution d’une action immédiate.
• MenuFlyoutSubItem : contient une liste d’éléments de menu en cascade.
• ToggleMenuFlyoutItem : activation ou désactivation d’une option.
• RadioMenuFlyoutItem : basculer entre des éléments de menu qui s’excluent l’un l’autre.
• MenuFlyoutSeparator : séparation visuelle des éléments de menu.

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 suivant est presque identique, mais au lieu d’utiliser la propriété ContextFlyout pour afficher la classe MenuFlyout en tant que menu contextuel, il recourt à la propriété FlyoutBase.ShowAttachedFlyout pour l’afficher en tant que 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.

<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 un repère visuel de ce comportement, les contrôles d’abandon interactif sur la Xbox dessinent une superposition qui atténue la visibilité de l’interface utilisateur. Ce comportement peut être modifié à l’aide de 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

• API importantes : classe MenuBar. Classe MenuBarItem

Ouvrez l’application WinUI 3 Gallery et voyez 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.

Remarque

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

• Exemple de la galerie WinUI : consultez tous les contrôles XAML dans un format interactif.
• Exemple de menu contextuel XAML

Articles connexes

• Notions de base de la conception des commandes pour les applications Windows
• Menus et menus contextuels
• Commandes contextuelles pour les collections et les listes
• MenuFlyout, classe
• MenuBar, classe