Menu volant de barre de commandes

Le menu volant de barre de commandes vous permet de fournir aux utilisateurs un accès facile aux tâches courantes en affichant des commandes dans une barre d’outils flottante liée à un élément de votre canevas d’interface utilisateur.

Comme CommandBar, CommandBarFlyout possède des propriétés PrimaryCommands et SecondaryCommands que vous pouvez utiliser pour ajouter des commandes. Vous pouvez placer des commandes dans une collection ou dans les deux collections. Quand et comment les commandes primaires et secondaires sont affichées dépend du mode d’affichage.

Le menu volant de la barre de commandes comporte deux modes d’affichage : réduit et développé.

• En mode réduit, seules les commandes principales sont affichées. Si le menu volant de la barre de commandes comporte à la fois des commandes primaires et secondaires, un bouton « voir plus », qui est représenté par des points de suspension [...], s’affiche. Cela permet à l’utilisateur d’accéder aux commandes secondaires en passant en mode développé.
• En mode développé, les commandes primaire et secondaire sont affichées. (Si le contrôle comporte uniquement des éléments secondaires, ils sont affichés de manière similaire au contrôle MenuFlyout.)

Est-ce le contrôle approprié ?

Utilisez le contrôle volant de barre de commandes pour afficher une collection de commandes à l’utilisateur, telles que des boutons et des éléments de menu, dans le contexte d’un élément sur le canevas de l’application.

Le sous-menu de barre de commandes est le contrôle recommandé pour la création de menus contextuels. Cela permet aux commandes courantes (telles que copier, couper, coller, supprimer, partager ou sélectionner du texte) qui sont les plus contextuellement pertinentes pour le scénario du menu contextuel à ajouter en tant que commandes principales afin qu’elles soient affichées sous forme de ligne horizontale unique dans le menu volant de la barre de commandes. TextCommandBarFlyout est déjà configuré de manière appropriée pour afficher automatiquement les commandes de texte dans les contrôles TextBox, TextBlock, RichEditBox, RichTextBlock et PasswordBox. Un CommandBarFlyout peut être utilisé pour remplacer les commandes de texte par défaut sur les contrôles de texte.

Pour afficher les commandes contextuelles sur les éléments de liste, suivez les instructions de la commande contextuelle pour les collections et les listes.

Appel proactif versus réactif

Il existe généralement deux façons d’appeler un menu volant ou un menu associé à un élément sur votre canevas d’interface utilisateur : appel proactif et appel réactif.

Dans l’appel proactif, les commandes s’affichent automatiquement lorsque l’utilisateur interagit avec l’élément auquel les commandes sont associées. Par exemple, les commandes de mise en forme du texte peuvent s’afficher lorsque l’utilisateur sélectionne du texte dans une zone de texte. Dans ce cas, le flyout de la barre de commandes ne reçoit pas le focus. Au lieu de cela, il présente les commandes pertinentes proches de l’élément avec lequel l’utilisateur interagit. Si l'utilisateur n'interagit pas avec les commandes, elles sont supprimées.

Dans l’appel réactif, les commandes sont affichées en réponse à une action explicite de l’utilisateur pour demander les commandes ; par exemple, un clic droit. Cela correspond au concept traditionnel d’un menu contextuel.

Vous pouvez utiliser "CommandBarFlyout" de l'une ou l'autre manière, ou même un mélange des deux.

Créer un menu déroulant de barre de commandes

L’application WinUI 3 Gallery inclut des exemples interactifs de la plupart des contrôles, des caractéristiques et des fonctionnalités de WinUI 3. Obtenir l’application à partir du Microsoft Store ou obtenir le code source sur GitHub

Cet exemple montre comment créer un flyout de barre de commandes et l’utiliser à la fois de manière proactive et réactive. Lorsque l’image est touchée, le menu déroulant s’affiche en mode réduit. Lorsqu’il est affiché sous la forme d’un menu contextuel, le menu volant s’affiche en mode développé. Dans les deux cas, l’utilisateur peut ouvrir ou réduire le volet après son ouverture.

<Grid>
    <Grid.Resources>
        <CommandBarFlyout x:Name="ImageCommandsFlyout">
            <AppBarButton Label="Favorite" Icon="OutlineStar" ToolTipService.ToolTip="Favorite"/>
            <AppBarButton Label="Copy" Icon="Copy" ToolTipService.ToolTip="Copy"/>
            <AppBarButton Label="Share" Icon="Share" ToolTipService.ToolTip="Share"/>
            <CommandBarFlyout.SecondaryCommands>
                <AppBarButton Label="Rotate" Icon="Rotate"/>
                <AppBarButton Label="Delete" Icon="Delete"/>
            </CommandBarFlyout.SecondaryCommands>
        </CommandBarFlyout>
    </Grid.Resources>

    <Image Source="Assets/image1.png" Width="300"
           Tapped="Image_Tapped" 
           FlyoutBase.AttachedFlyout="{x:Bind ImageCommandsFlyout}"
           ContextFlyout="{x:Bind ImageCommandsFlyout}"/>
</Grid>

private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    var flyout = FlyoutBase.GetAttachedFlyout((FrameworkElement)sender);
    var options = new FlyoutShowOptions()
    {
        // Position shows the flyout next to the pointer.
        // "Transient" ShowMode makes the flyout open in its collapsed state.
        Position = e.GetPosition((FrameworkElement)sender),
        ShowMode = FlyoutShowMode.Transient
    };
    flyout?.ShowAt((FrameworkElement)sender, options);
}

Voici le menu volant de la barre de commandes dans son état réduit.

Voici le même menu volant de barre de commandes dans son état développé montrant les commandes secondaires.

Afficher les commandes de manière proactive

Lorsque vous affichez des commandes contextuelles de manière proactive, seules les commandes principales doivent être affichées par défaut (le menu volant de la barre de commandes doit être réduit). Placez les commandes les plus importantes dans la collection de commandes principales, ainsi que d’autres commandes qui se trouveraient traditionnellement dans un menu contextuel dans la collection de commandes secondaires.

Pour afficher de manière proactive les commandes, vous gérez généralement l’événement Click ou Tapped pour afficher le menu volant de la barre de commandes. Définissez ShowMode du flyout sur Transitoire ou TransientWithDismissOnPointerMoveAway pour ouvrir le flyout en mode réduit sans attirer l'attention.

Les contrôles de texte ont une propriété SelectionFlyout . Lorsque vous affectez un menu volant à cette propriété, il s’affiche automatiquement lorsque le texte est sélectionné.

Afficher les commandes de manière réactive

Lorsque vous affichez des commandes contextuelles de manière réactive, sous la forme d’un menu contextuel, les commandes secondaires sont affichées par défaut (le menu volant de la barre de commandes doit être développé). Dans ce cas, le menu déroulant de la barre de commandes peut avoir à la fois des commandes primaires et secondaires ou uniquement des commandes secondaires.

Pour afficher les commandes dans un menu contextuel, vous affectez généralement le menu volant à la propriété ContextFlyout d’un élément d’interface utilisateur. De cette façon, l’ouverture du volet est gérée par l’élément, et aucune action supplémentaire n'est requise de votre part.

Si vous gérez l’affichage du menu volant vous-même (par exemple, sur un événement RightTapped ), définissez showMode du menu volant sur Standard pour ouvrir le menu volant en mode développé et lui donner le focus.

Afficher un CommandBarFlyout toujours étendu

Lorsque vous avez des commandes primaires et secondaires dans un CommandBarFlyout, le bouton « Voir plus » [...] s’affiche par défaut et peut être utilisé pour développer et réduire les commandes secondaires. Si vous souhaitez conserver votre CommandBarFlyout en mode développé et afficher les commandes secondaires à tout moment, vous pouvez utiliser la CommandBarFlyout.AlwaysExpanded propriété.

Lorsque la propriété AlwaysExpanded est définie sur true, le bouton « Voir Plus » n'est pas affiché et l’utilisateur ne peut pas basculer l’état développé du contrôle. CommandBarFlyout se ferme toujours comme d’habitude lorsqu’une commande secondaire est cliquée ou que l’utilisateur clique en dehors du volet.

Cette propriété a un effet uniquement si CommandBarFlyout a des commandes secondaires. S’il n’existe aucune commande secondaire, CommandBarFlyout est toujours en mode réduit.

Commandes et contenu

Le contrôle CommandBarFlyout a 2 propriétés que vous pouvez utiliser pour ajouter des commandes et du contenu : PrimaryCommands et SecondaryCommands.

Par défaut, les éléments de la barre de commandes sont ajoutés à la collection PrimaryCommands. Ces commandes sont affichées dans la barre de commandes et sont visibles dans les modes réduits et développés. Contrairement à CommandBar, les commandes principales ne dépassent pas automatiquement les commandes secondaires et peuvent être tronquées.

Vous pouvez également ajouter des commandes à la collection SecondaryCommands . Les commandes secondaires sont affichées dans la partie menu du contrôle et sont visibles uniquement en mode développé.

S’il existe des commandes courantes (telles que copier, couper, coller, supprimer, partager ou sélectionner du texte) qui sont importantes pour le scénario, il est recommandé de les ajouter en tant que commandes principales plutôt que de commandes secondaires.

Boutons de la barre des applications

Vous pouvez remplir les commandes PrimaryCommands et SecondaryCommands directement avec les contrôles AppBarButton, AppBarToggleButton et AppBarSeparator .

Les contrôles des boutons de la barre de l’application sont caractérisés par une icône et une étiquette avec un libellé. Ces contrôles sont optimisés pour une utilisation dans une barre de commandes et leur apparence change selon que le contrôle est affiché dans la barre de commandes ou dans le menu de dépassement de capacité.

• Dans le Kit de développement logiciel (SDK) d’application Windows 1.5 et versions ultérieures : Les boutons de barre d’application utilisés comme commandes principales sont affichés dans la barre de commandes avec l’étiquette de texte et l’icône (si les deux sont définis).

  <AppBarButton Icon="Copy" Label="Copy"/>
  

• Dans le Kit de développement logiciel (SDK) d’application Windows 1.4 et versions antérieures : Les boutons de barre d’application utilisés comme commandes principales sont affichés dans la barre de commandes avec uniquement leur icône ; l’étiquette de texte n’est pas affichée. Nous vous recommandons d’utiliser une info-bulle pour afficher une description textuelle de la commande, comme indiqué ici.

  <AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/>
  

• Les boutons de barre d’application utilisés comme commandes secondaires sont affichés dans le menu, avec l’étiquette et l’icône visibles.

Icons

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.

Autre contenu

Vous pouvez ajouter d’autres contrôles à un menu volant de barre de commandes en les encapsulant dans un AppBarElementContainer. Cela vous permet d’ajouter des contrôles tels que DropDownButton ou SplitButton, ou d’ajouter des conteneurs comme StackPanel pour créer une interface utilisateur plus complexe.

Pour être ajouté aux collections de commandes primaires ou secondaires d’un menu volant de barre de commandes, un élément doit implémenter l’interface ICommandBarElement . AppBarElementContainer est un wrapper qui implémente cette interface afin de pouvoir ajouter un élément à une barre de commandes même s’il n’implémente pas l’interface elle-même.

Ici, un AppBarElementContainer est utilisé pour ajouter des éléments supplémentaires à un menu volant de barre de commandes. Un SplitButton est ajouté aux commandes principales pour activer l’alignement du texte. Un StackPanel est ajouté aux commandes secondaires pour permettre une disposition plus complexe pour les contrôles de zoom.

<CommandBarFlyout>
    <AppBarButton Icon="Cut" Label="Cut" ToolTipService.ToolTip="Cut"/>
    <AppBarButton Icon="Copy" Label="Copy" ToolTipService.ToolTip="Copy"/>
    <AppBarButton Icon="Paste" Label="Paste" ToolTipService.ToolTip="Paste"/>
    <!-- Alignment controls -->
    <AppBarElementContainer>
         <SplitButton ToolTipService.ToolTip="Alignment">
            <SplitButton.Resources>
                <!-- Override default brushes to make the SplitButton 
                     match other command bar elements. -->
                <Style TargetType="SplitButton">
                    <Setter Property="Height" Value="38"/>
                </Style>
                <SolidColorBrush x:Key="SplitButtonBackground"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="SplitButtonBackgroundPressed"
                                 Color="{ThemeResource SystemListMediumColor}"/>
                <SolidColorBrush x:Key="SplitButtonBackgroundPointerOver"
                                 Color="{ThemeResource SystemListLowColor}"/>
                <SolidColorBrush x:Key="SplitButtonBorderBrush" Color="Transparent"/>
                <SolidColorBrush x:Key="SplitButtonBorderBrushPointerOver"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="SplitButtonBorderBrushChecked"
                                 Color="Transparent"/>
            </SplitButton.Resources>
            <SplitButton.Content>
                <Viewbox Width="16" Height="16" Margin="0,2,0,0">
                    <SymbolIcon Symbol="AlignLeft"/>
                </Viewbox>
            </SplitButton.Content>
            <SplitButton.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem Icon="AlignLeft" Text="Align left"/>
                    <MenuFlyoutItem Icon="AlignCenter" Text="Center"/>
                    <MenuFlyoutItem Icon="AlignRight" Text="Align right"/>
                </MenuFlyout>
            </SplitButton.Flyout>
        </SplitButton>
    </AppBarElementContainer>
    <!-- end Alignment controls -->
    <CommandBarFlyout.SecondaryCommands>
        <!-- Zoom controls -->
        <AppBarElementContainer>
            <AppBarElementContainer.Resources>
                <!-- Override default brushes to make the Buttons
                     match other command bar elements. -->
                <SolidColorBrush x:Key="ButtonBackground"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                 Color="{ThemeResource SystemListMediumColor}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                 Color="{ThemeResource SystemListLowColor}"/>
                <SolidColorBrush x:Key="ButtonBorderBrush"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBorderBrushChecked"
                                 Color="Transparent"/>
                <Style TargetType="TextBlock">
                    <Setter Property="VerticalAlignment" Value="Center"/>
                </Style>
                <Style TargetType="Button">
                    <Setter Property="Height" Value="40"/>
                    <Setter Property="Width" Value="40"/>
                </Style>
            </AppBarElementContainer.Resources>
            <Grid Margin="12,-4">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="76"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Viewbox Width="16" Height="16" Margin="0,2,0,0">
                    <SymbolIcon Symbol="Zoom"/>
                </Viewbox>
                <TextBlock Text="Zoom" Margin="10,0,0,0" Grid.Column="1"/>
                <StackPanel Orientation="Horizontal" Grid.Column="2">
                    <Button ToolTipService.ToolTip="Zoom out">
                        <Viewbox Width="16" Height="16">
                            <SymbolIcon Symbol="ZoomOut"/>
                        </Viewbox>
                    </Button>
                    <TextBlock Text="50%" Width="40"
                               HorizontalTextAlignment="Center"/>
                    <Button ToolTipService.ToolTip="Zoom in">
                        <Viewbox Width="16" Height="16">
                            <SymbolIcon Symbol="ZoomIn"/>
                        </Viewbox>
                    </Button>
                </StackPanel>
            </Grid>
        </AppBarElementContainer>
        <!-- end Zoom controls -->
        <AppBarSeparator/>
        <AppBarButton Label="Undo" Icon="Undo"/>
        <AppBarButton Label="Redo" Icon="Redo"/>
        <AppBarButton Label="Select all" Icon="SelectAll"/>
    </CommandBarFlyout.SecondaryCommands>
</CommandBarFlyout>

Voici le menu déroulant de la barre de commandes réduite avec un SplitButton ouvert.

Voici le menu volant de la barre de commandes développée avec l’interface utilisateur de zoom personnalisée dans le menu.

Créer un menu contextuel avec des commandes secondaires uniquement

Vous pouvez utiliser un menu volant de barre de commandes avec uniquement des commandes secondaires pour créer un menu contextuel qui obtient la même apparence et le même comportement de menu volant.

<Grid>
    <Grid.Resources>
        <!-- A command bar flyout with only secondary commands. -->
        <CommandBarFlyout x:Name="ContextMenu">
            <CommandBarFlyout.SecondaryCommands>
                <AppBarButton Label="Copy" Icon="Copy"/>
                <AppBarButton Label="Save" Icon="Save"/>
                <AppBarButton Label="Print" Icon="Print"/>
                <AppBarSeparator />
                <AppBarButton Label="Properties"/>
            </CommandBarFlyout.SecondaryCommands>
        </CommandBarFlyout>
    </Grid.Resources>

    <Image Source="Assets/image1.png" Width="300"
           ContextFlyout="{x:Bind ContextMenu}"/>
</Grid>

Voici le menu volant de la barre de commandes sous la forme d’un menu contextuel.

Vous pouvez également utiliser un CommandBarFlyout avec un DropDownButton pour créer un menu standard.

<CommandBarFlyout>
    <AppBarButton Icon="Placeholder"/>
    <AppBarElementContainer>
        <DropDownButton Content="Mail">
            <DropDownButton.Resources>
                <!-- Override default brushes to make the DropDownButton
                     match other command bar elements. -->
                <Style TargetType="DropDownButton">
                    <Setter Property="Height" Value="38"/>
                </Style>
                <SolidColorBrush x:Key="ButtonBackground"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed"
                                 Color="{ThemeResource SystemListMediumColor}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver"
                                 Color="{ThemeResource SystemListLowColor}"/>

                <SolidColorBrush x:Key="ButtonBorderBrush"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
                                 Color="Transparent"/>
                <SolidColorBrush x:Key="ButtonBorderBrushChecked"
                                 Color="Transparent"/>
            </DropDownButton.Resources>
            <DropDownButton.Flyout>
                <CommandBarFlyout Placement="BottomEdgeAlignedLeft">
                    <CommandBarFlyout.SecondaryCommands>
                        <AppBarButton Icon="MailReply" Label="Reply"/>
                        <AppBarButton Icon="MailReplyAll" Label="Reply all"/>
                        <AppBarButton Icon="MailForward" Label="Forward"/>
                    </CommandBarFlyout.SecondaryCommands>
                </CommandBarFlyout>
            </DropDownButton.Flyout>
        </DropDownButton>
    </AppBarElementContainer>
    <AppBarButton Icon="Placeholder"/>
    <AppBarButton Icon="Placeholder"/>
</CommandBarFlyout>

Voici un menu déroulant dans un menu volant de barre de commandes.

Menus déroulants de la barre de commandes pour les contrôles de texte

TextCommandBarFlyout est un menu volant de barre de commandes spécialisé qui contient des commandes pour modifier du texte. Chaque contrôle de texte affiche automatiquement TextCommandBarFlyout en tant que menu contextuel (clic droit) ou lorsque le texte est sélectionné. Le menu volant de la barre de commandes de texte s’adapte à la sélection de texte pour afficher uniquement les commandes pertinentes.

Voici un menu contextuel de la barre de commandes de texte lors de la sélection de texte.

Voici un volet de commande de texte étendu qui affiche les commandes secondaires.

Commandes disponibles

Ce tableau affiche les commandes incluses dans un TextCommandBarFlyout et quand elles sont affichées.

Menu volant de barre de commandes de texte personnalisé

TextCommandBarFlyout ne peut pas être personnalisé et est géré automatiquement par chaque contrôle de texte. Toutefois, vous pouvez remplacer textCommandBarFlyout par défaut par des commandes personnalisées.

• Pour remplacer le TextCommandBarFlyout par défaut affiché dans la sélection de texte, vous pouvez créer un CommandBarFlyout personnalisé (ou un autre type de menu volant) et l’affecter à la propriété SelectionFlyout . Si vous définissez SelectionFlyout sur Null, aucune commande n’est affichée sur la sélection.
• Pour remplacer le TextCommandBarFlyout par défaut affiché en tant que menu contextuel, affectez un CommandBarFlyout personnalisé (ou un autre type de menu volant) à la propriété ContextFlyout sur un contrôle de texte. Si vous définissez ContextFlyout sur Null, le menu volant affiché dans les versions précédentes du contrôle de texte est affiché au lieu de TextCommandBarFlyout.

Abandon interactif

Contrôles à dissolution rapide, tels que les menus, les menus contextuels et d'autres éléments surgissants, retiennent le focus du clavier et de la manette à l’intérieur de l’interface utilisateur temporaire jusqu'à sa désactivation. 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.

<CommandBarFlyout LightDismissOverlayMode="Off" /> >

UWP et WinUI 2

Le contrôle CommandBarFlyout pour les applications UWP est inclus dans le cadre de WinUI 2. Pour plus d’informations, notamment les instructions d’installation, consultez WinUI 2. Les API de ce contrôle existent dans les espaces de noms Windows.UI.Xaml.Controls (UWP) et Microsoft.UI.Xaml.Controls (WinUI).

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 ce contrôle qui utilise des angles arrondis. Pour plus d’informations, voir Rayon d’angle.

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. Pour plus d’informations, consultez Prise en main de WinUI 2 .

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

<muxc:CommandBarFlyout />

Articles connexes

• Principes de base de la conception des commandes pour les applications Windows
• Commandes contextuelles pour les collections et les listes.
• Menus et menus contextuels
• Barre de commandes
• Classe CommandBar
• Classe CommandBarFlyout