Menus et menus contextuelsMenus and context menus

Les menus et les menus contextuels affichent une liste de commandes ou d’options lorsque l’utilisateur les demande.Menus and context menus display a list of commands or options when the user requests them. Utilisez un menu volant pour afficher un menu inséré.Use a menu flyout to show a single, inline menu. Utilisez une barre de menus pour afficher un ensemble de menus sur une ligne horizontale, généralement en haut d’une fenêtre d’application.Use a menu bar to show a set of menus in a horizontal row, typically at the top of an app window. Chaque menu peut avoir des sous-menus et des éléments de menu.Each menu can have menu items and sub-menus.

Exemple de menu contextuel standard

Obtenir la bibliothèque d’interface utilisateur WindowsGet the Windows UI Library

Logo WinUI

Le contrôle MenuBar est inclus dans la bibliothèque d’interface utilisateur Windows, package NuGet qui contient les nouveaux contrôles et fonctionnalités d’interface utilisateur pour les applications Windows.The MenuBar control is included as part of the Windows UI Library, a NuGet package that contains new controls and UI features for Windows apps. Pour plus d’informations, notamment des instructions d’installation, consultez Vue d’ensemble de la bibliothèque d’interface utilisateur Windows.For more info, including installation instructions, see the Windows UI Library overview.

API de la bibliothèque d’interface utilisateur Windows  : MenuBar, classeWindows UI Library APIs: MenuBar class

API de plateforme : classe MenuFlyout, classe MenuBar, propriété ContextFlyout, propriété FlyoutBase.AttachedFlyoutPlatform APIs: MenuFlyout class, MenuBar class, ContextFlyout property, FlyoutBase.AttachedFlyout property

Est-ce le contrôle approprié ?Is this the right control?

Les menus et les menus contextuels permettent de gagner de l’espace en organisant les commandes et en les masquant jusqu’à ce que l’utilisateur en ait besoin.Menus and context menus save space by organizing commands and hiding them until the user needs them. Si une commande particulière doit être utilisée fréquemment et que vous disposez de l’espace disponible, envisagez de le placer directement dans son propre élément, plutôt que dans un menu, afin que les utilisateurs n’aient pas à passer par un menu afin d’y accéder.If a particular command will be used frequently and you have the space available, consider placing it directly in its own element, rather than in a menu, so that users don't have to go through a menu to get to it.

Les menus et les menus contextuels permettent d’organiser les commandes. Pour afficher du contenu arbitraire, comme une notification ou une demande de confirmation, utilisez une boîte de dialogue ou un menu volant.Menus and context menus are for organizing commands; to display arbitrary content, such as a notification or confirmation request, use a dialog or a flyout.

Pour afficher un menu dans un menu volant attaché à un élément d’interface utilisateur sur canevas, utilisez le contrôle MenuFlyout pour héberger les éléments de menu.To show a menu in a flyout attached to an on-canvas UI element, use the MenuFlyout control to host your menu items. Vous pouvez appeler un menu volant comme un menu standard ou un menu contextuel.You can invoke a menu flyout either as a regular menu or as a context menu. Un menu volant héberge un seul menu de niveau supérieur (et des sous-menus facultatifs).A menu flyout hosts a single top-level menu (and optional sub-menus).

Pour afficher un ensemble de menus de niveau supérieur sur une ligne horizontale, utilisez une barre de menus.To show a set of multiple top-level menus in a horizontal row, use a menu bar. En règle générale, les barres de menus sont placées en haut de la fenêtre d’application.You typically position the menu bar at the top of the app window.

MenuBar et CommandBar sont des surfaces qui permettent d’afficher des commandes pour vos utilisateurs.MenuBar and CommandBar both represent surfaces that you can use to expose commands to your users. MenuBar fournit un moyen rapide et simple d’afficher un ensemble de commandes dans les applications nécessitant un niveau d’organisation et de regroupement plus avancé que celui fourni par CommandBar.The MenuBar provides a quick and simple way to expose a set of commands for apps that might need more organization or grouping than a CommandBar allows.

Vous pouvez également utiliser un MenuBar conjointement à un CommandBar.You can also use a MenuBar in conjunction with a CommandBar. Utilisez MenuBar pour fournir le groupe de commandes, et CommandBar pour mettre en surbrillance les commandes les plus utilisées.Use the MenuBar to provide the bulk of the commands, and the CommandBar to highlight the most used commands.

ExemplesExamples

Galerie de contrôles XAMLXAML Controls Gallery
XAML controls gallery

Si vous disposez de l’application Galerie de contrôles XAML, cliquez ici pour ouvrir l’application et voir l’objet MenuFlyout en contexte.If you have the XAML Controls Gallery app installed, click here to open the app and see the MenuFlyout in action.

Les menus et les menus contextuels ont une apparence et un contenu similaires.Menus and context menus are similar in how they look and what they can contain. D’ailleurs, vous pouvez utiliser le même contrôle (MenuFlyout) pour les créer.In fact, you can use the same control, MenuFlyout, to create them. La seule différence réside dans la façon dont vous permettez à l’utilisateur d’y accéder.The difference is how you let the user access it.

Quand utiliser un menu ou un menu contextuel ?When should you use a menu or a context menu?

  • Si l’élément hôte est un bouton ou un autre élément de commande dont le principal rôle est d’afficher des commandes supplémentaires, utilisez un menu.If the host element is a button or some other command element whose primary role is to present additional commands, use a menu.
  • Si l’élément hôte est un autre type d’élément ayant un autre objectif principal (par exemple, la présentation de texte ou une image), utilisez un menu contextuel.If the host element is some other type of element that has another primary purpose (such as presenting text or an image), use a context menu.

Par exemple, vous pouvez utiliser un menu sur un bouton pour fournir des options de tri et de filtrage à une liste.For example, use a menu on a button to provide filtering and sorting options for a list. Dans ce scénario, l’objectif principal du contrôle de bouton consiste à fournir un accès à un menu.In this scenario, the primary purpose of the button control is to provide access to a menu.

Exemple de menu dans Mail

Si vous voulez ajouter des commandes (telles que couper, copier et coller) à un élément de texte, utilisez un menu contextuel au lieu d’un menu.If you want to add commands (such as cut, copy, and paste) to a text element, use a context menu instead of a menu. Dans ce scénario, le rôle principal de l’élément de texte est de présenter et de modifier du texte ; les commandes supplémentaires (par exemple, couper, copier et coller) sont secondaires et doivent figurer dans un menu contextuel.In this scenario, the primary role of the text element is to present and edit text; additional commands (such as cut, copy, and paste) are secondary and belong in a context menu.

Exemple de menu contextuel dans la galerie de photos

  • Ont un point d’entrée unique (un menu Fichier en haut de l’écran, par exemple) qui est toujours affiché.Have a single entry point (a File menu at the top of the screen, for example) that is always displayed.
  • Sont généralement attachés à un bouton ou un élément de menu parent.Are usually attached to a button or a parent menu item.
  • Sont appelés en cliquant avec le bouton gauche de la souris (ou par le biais d’une action équivalente, telles que l’appui avec votre doigt).Are invoked by left-clicking (or an equivalent action, such as tapping with your finger).
  • Sont associés à un élément via ses propriétés Flyout ou FlyoutBase.AttachedFlyout, ou sont regroupés dans une barre de menus en haut de la fenêtre d’application.Are associated with an element via its Flyout or FlyoutBase.AttachedFlyout properties, or grouped in a menu bar at the top of the app window.

Les menus contextuels :Context menus

  • Sont attachés à un élément unique et affichent les commandes secondaires.Are attached to a single element and display secondary commands.
  • Sont appelés en cliquant avec le bouton droit de la souris (ou par le biais d’une action équivalente, telle que l’appui prolongé avec votre doigt).Are invoked by right clicking (or an equivalent action, such as pressing and holding with your finger).
  • Sont associés à un élément via sa propriété ContextFlyout.Are associated with an element via its ContextFlyout property.

IcônesIcons

Fournissez des icônes d’élément de menu pour :Consider providing menu item icons for:

  • Les éléments les plus fréquemment utilisésThe most commonly used items.
  • Les éléments de menu dont l’icône est standard ou bien connueMenu items whose icon is standard or well known.
  • Les éléments de menu dont l’icône montre clairement ce que permet de faire la commandeMenu items whose icon well illustrates what the command does.

Ne vous sentez pas obligé de fournir des icônes pour les commandes qui n’ont pas de visualisation standard.Don't feel obligated to provide icons for commands that don't have a standard visualization. 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.Cryptic icons aren't helpful, create visual clutter, and prevent users from focusing on the important menu items.

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.The size of the icon in a MenuFlyoutItem is 16x16px. Si vous utilisez SymbolIcon, FontIcon ou PathIcon, la taille de l’icône s’ajustera automatiquement sans perte de fidélité.If you use SymbolIcon, FontIcon, or PathIcon, the icon automatically scales to the correct size with no loss of fidelity. Si vous utilisez BitmapIcon, vérifiez que la taille de votre ressource est de 16 x 16 px.If you use BitmapIcon, ensure that your asset is 16x16px.

Créer un menu volant ou un menu contextuelCreate a menu flyout or a context menu

Pour créer un menu volant ou un menu contextuel, utilisez la classe MenuFlyout.To create a menu flyout or a context menu, you use the MenuFlyout class. Vous définissez le contenu du menu en ajoutant des objets MenuFlyoutItem, MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem et MenuFlyoutSeparator à MenuFlyout.You define the contents of the menu by adding MenuFlyoutItem, MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem and MenuFlyoutSeparator objects to the MenuFlyout.

Voici le rôle de ces objets :These objects are for:

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.This example creates a MenuFlyout and uses the ContextFlyout property, a property available to most controls, to show the MenuFlyout as a context menu.

<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.The next example is nearly identical, but instead of using the ContextFlyout property to show the MenuFlyout class as a context menu, the example uses the FlyoutBase.ShowAttachedFlyout property to show it as a 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;
    }
}

Abandon interactifLight dismiss

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.Light dismiss controls such as menus, context menus, and other flyouts, trap keyboard and gamepad focus inside the transient UI until dismissed. 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.To provide a visual cue for this behavior, light dismiss controls on Xbox will draw an overlay that dims the visibility of out of scope UI. Ce comportement peut être modifié à l’aide de la propriété LightDismissOverlayMode.This behavior can be modified with the LightDismissOverlayMode property. 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.By default, transient UIs will draw the light dismiss overlay on Xbox ( Auto ) but not other device families. Vous pouvez forcer la superposition à être toujours Activée ou Désactivée.You can choose to force the overlay to be always On or always Off.

<MenuFlyout LightDismissOverlayMode="Off" />

Créer une barre de menusCreate a menu bar

Important

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

Vous utilisez les mêmes éléments pour créer les menus d’une barre de menus que pour créer un menu volant.You use the same elements to create menus in a menu bar as in a menu flyout. Toutefois, au lieu de regrouper les objets MenuFlyoutItem dans un MenuFlyout, vous les regroupez dans un élément MenuBarItem.However, instead of grouping MenuFlyoutItem objects in a MenuFlyout, you group them in a MenuBarItem element. Chaque MenuBarItem est ajouté au MenuBar en tant que menu de niveau supérieur.Each MenuBarItem is added to the MenuBar as a top level menu.

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.This example shows only how to create the UI structure, but does not show implementation of any of the commands.

<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 codeGet the sample code