Menu déroulant 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 déroulant affiche un menu de niveau supérieur unique qui peut contenir 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).

Exemple de menu contextuel classique

Est-ce le contrôle approprié ?

Consultez les menus et menus contextuels pour obtenir de l'aide pour identifier les scénarios de menu par rapport aux menus contextuels et des conseils sur l'utilisation du menu déroulant par rapport à la 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 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 la commande de collection pour obtenir des exemples sur le 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.

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

Ouvrez l’application galerie WinUI 3 et consultez MenuFlyout en action

L’application Galerie WinUI 3 inclut des exemples interactifs de contrôles et de fonctionnalités WinUI. Obtenez l’application à partir du Microsoft Store ou parcourez 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, SplitMenuFlyoutItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem et MenuFlyoutSeparator au MenuFlyout.

Ces objets ont les rôles suivants :

MenuFlyoutItem : exécution d’une action immédiate.
MenuFlyoutSubItem : contenant une liste en cascade d’éléments de menu.
SplitMenuFlyoutItem : exécution d’une action par défaut, avec des actions associées dans une liste en cascade. Pour plus d’informations, consultez Ajouter un élément de menu fractionné.
ToggleMenuFlyoutItem : activation ou désactivation d’une option.
RadioMenuFlyoutItem : basculement entre les éléments de menu mutuellement exclusifs.
MenuFlyoutSeparator : séparation visuelle des éléments de menu.

Cet exemple crée un MenuFlyout et utilise la propriété ContextFlyout , une propriété disponible pour la plupart des contrôles, pour afficher MenuFlyout en tant que 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 == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.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, l’exemple utilise 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 == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.UI.Colors.Red;
    }
}

API importantes :classe SplitMenuFlyoutItem, propriété Items

Ouvrez l’application galerie WinUI 3 et consultez SplitMenuFlyoutItem en action

L’application Galerie WinUI 3 inclut des exemples interactifs de contrôles et de fonctionnalités WinUI. Obtenez l’application à partir du Microsoft Store ou parcourez le code source sur GitHub.

Un SplitMenuFlyoutItem offre le comportement d’un bouton scindé dans un menu déroulant. Il comporte deux parties :

La partie principale effectue une action par défaut, telle qu’un MenuFlyoutItem. Pour répondre lorsque l’utilisateur le sélectionne, gérez l’événement Click ou définissez la propriété Command .
Le composant secondaire ouvre un sous-menu d’options associées, comme un MenuFlyoutSubItem.

Utilisez un élément de menu partagé lorsqu’une commande a une action par défaut courante et quelques variantes, telles que l’enregistrement d’un fichier dans différents formats. Cela permet de raccourcir votre menu par rapport à si vous répertoriiez chaque variante comme élément distinct.

Note

SplitMenuFlyoutItem nécessite SDK d'application Windows 1.8.6 ou version ultérieure.

Cet exemple, à partir de l’application galerie WinUI 3, ajoute deux éléments de menu fractionnés à un MenuFlyout. Les éléments de sous-menu se trouvent dans la propriété Items . Étant donné que Items est la propriété de contenu XAML de SplitMenuFlyoutItem, vous pouvez ajouter les éléments de sous-menu directement à l’intérieur de l’élément 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;
    }
}

Le sous-menu peut également contenir des objets MenuFlyoutSeparator et d’autres objets SplitMenuFlyoutItem. Si la Items collection est vide, la partie secondaire est désactivée.

Pour personnaliser le sous-menu, définissez SubMenuPresenterStyle sur un style pour le contrôle de présentation du sous-menu et SubMenuItemStyle sur un style pour les éléments du sous-menu.

Les utilisateurs interagissent séparément avec les deux parties lorsqu’ils utilisent le clavier :

Lorsque le composant principal a le focus, appuyez sur Entrée ou Espace pour effectuer l’action par défaut, ou appuyez sur la flèche droite pour déplacer le focus vers la partie secondaire.
Lorsque le composant secondaire a le focus, appuyez sur Entrée ou flèche droite pour ouvrir le sous-menu.
Lorsque le sous-menu est ouvert, appuyez sur Échap ou sur flèche gauche pour le fermer.

Les lecteurs d’écran annoncent également les deux parties séparément. La partie secondaire est annoncée sous la forme d’un bouton qui fournit plus d’options pour l’élément de menu.

Icons

Merci de fournir des icônes pour les éléments du menu :

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

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é 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 choisir de toujours forcer la superposition à être activée ou désactivée.

<MenuFlyout LightDismissOverlayMode="Off" />

API importantes :Classe MenuBar. Classe MenuBarItem

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

L’application Galerie WinUI 3 inclut des exemples interactifs de contrôles et de fonctionnalités WinUI. Obtenez l’application à partir du Microsoft Store ou parcourez 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.

Note

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

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

Principes de base de la conception de commande pour les applications Windows
Menus et menus contextuels
Commande contextuelle pour les collections et les listes
classe MenuFlyout
classe SplitMenuFlyoutItem
MenuBar, classe

Commentaires

Cette page a-t-elle été utile ?

Dernière mise à jour : 2026-10-16

Est-ce le contrôle approprié ?

Créer un menu déroulant

Ajouter un élément de menu scindé

Icons

Abandon interactif

Créer une barre de menus

Articles connexes

Commentaires

Ressources supplémentaires