Barre de commandes

  • Article

Les barres de commandes permettent aux utilisateurs d’accéder facilement aux tâches les plus courantes de votre application. Les barres de commandes peuvent donner accès à des commandes au niveau d’une application ou spécifiques d’une page, et peuvent être utilisées avec n’importe quel modèle de navigation.

Exemple d’une barre de commandes avec des icônes

Est-ce le contrôle approprié ?

Le contrôle CommandBar est un contrôle à usage général, flexible et léger qui permet d’afficher du contenu complexe, comme des images, des barres de progression ou des blocs de texte, ainsi que des commandes simples, comme des contrôles AppBarButton, AppBarToggleButton et AppBarSeparator.

Notes

XAML fournit les contrôles AppBar et CommandBar. Utilisez le contrôle AppBar uniquement lorsque vous mettez à niveau une application Windows 8 universelle qui utilise ce contrôle et si vous avez besoin de réduire les modifications. Pour les nouvelles applications dans Windows 10, nous vous recommandons plutôt d’utiliser le contrôle CommandBar. Ce document part du principe que vous utilisez le contrôle CommandBar.

Anatomie

Par défaut, la barre de commandes affiche une ligne de boutons d’icône et un bouton facultatif « En savoir plus », qui est représenté par des points de suspension [...]. Voici la barre de commandes créée par l’exemple de code présenté ultérieurement. Elle est présentée à l’état compact et fermé.

Capture d’écran montrant une barre de commandes fermée.

La barre de commandes peut également être affichée à l’état fermé minimal comme ce qui suit : Voir la section États ouvert et fermé pour plus d’informations.

Capture d’écran montrant une barre de commandes à l’état minimal fermé.

Voici la même barre de commandes à l’état ouvert. Les étiquettes identifient les principales parties du contrôle.

Capture d’écran montrant une barre de commandes à l’état ouvert.

La barre de commandes est divisée en 4 zones principales :

  • La zone de contenu est alignée sur le côté gauche de la barre. Elle s’affiche si la propriété Content est remplie.
  • La zone de commande principale est alignée sur la droite de la barre. Elle s’affiche si la propriété PrimaryCommands est remplie.
  • Le bouton « En savoir plus » [...] s’affiche à droite de la barre. Le fait d’appuyer sur le bouton « En savoir plus » [...] affiche les étiquettes de commande principale et ouvre le menu de dépassement de capacité s’il existe des commandes secondaires. Le bouton n’est pas visible si aucun libellé de commande principale ou secondaire n’est présent. Pour modifier le comportement par défaut, utilisez la propriété OverflowButtonVisibility.
  • Le menu de dépassement est visible uniquement quand la barre de commandes est ouverte et si la propriété SecondaryCommands est remplie. Lorsque l’espace est limité, les commandes principales se déplacent dans la zone SecondaryCommands. Pour modifier le comportement par défaut, utilisez la propriété IsDynamicOverflowEnabled.

La disposition est inversée lorsque FlowDirection est défini sur RightToLeft.

Sélection élective

Les barres de commandes peuvent être placées en haut et en bas de la fenêtre d’application, et inline, en les incorporant dans un contrôle de disposition comme Grid.row.

Exemple 1 de placement de la barre d’application

  • Pour les petits appareils de poche, nous vous recommandons de positionner les barres de commande en bas de l’écran pour faciliter leur accessibilité.
  • Pour les écrans de plus grande taille, le fait de placer les barres de commandes près du haut de la fenêtre les rend plus détectables et plus accessibles.

Utilisez l’API DiagonalSizeInInches pour déterminer la taille physique de l’écran.

Les barres de commandes peuvent être placées dans les zones d’écran suivantes sur les écrans à vue unique (exemple à gauche) et sur les écrans à vues multiples (exemple à droite). Les barres de commandes incorporées peuvent être placées n’importe où dans la zone d’action.

Exemple 2 de placement de la barre de l’application

Appareils tactiles : si la barre de commandes doit rester visible à l’utilisateur lorsque le clavier tactile ou virtuel s’affiche, vous pouvez affecter la barre de commandes à la propriété BottomAppBar d’une page, de sorte qu’elle reste visible en présence du clavier virtuel. Dans le cas contraire, vous devez placer la barre de commandes de sorte qu’elle soit alignée et positionnée par rapport au contenu de votre application.

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.

Les API de ce contrôle existent dans l’espace de noms Windows.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 ce contrôle qui utilise des coins arrondis. Pour plus d’informations, consultez Rayons des angles.

Le style automatique d’un SplitButton dans un CommandBar nécessite que vous utilisiez le contrôle SplitButton de WinUI 2.6 ou version ultérieure.

Créer une barre de commandes

Ouvrez l’application Galerie WinUI 3 et voyez la barre de commandes 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.

Cet exemple permet de créer la barre de commandes illustrée précédemment.

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>

    <CommandBar.SecondaryCommands>
        <AppBarButton Label="Like" Click="AppBarButton_Click"/>
        <AppBarButton Label="Dislike" Click="AppBarButton_Click"/>
    </CommandBar.SecondaryCommands>

    <CommandBar.Content>
        <TextBlock Text="Now playing..." Margin="12,14"/>
    </CommandBar.Content>
</CommandBar>

Commandes et contenu

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

Commandes

Par défaut, les éléments de la barre de commandes sont ajoutés à la collection PrimaryCommands. Vous devez ajouter les commandes par ordre d’importance afin que les commandes les plus importantes soient toujours visibles. Quand la barre de commandes change de largeur, par exemple, quand des utilisateurs redimensionnent la fenêtre de leur application, les commandes principales se déplacent de façon dynamique entre la barre de commandes et le menu de dépassement aux points d’arrêt. Pour modifier ce comportement par défaut, utilisez la propriété IsDynamicOverflowEnabled.

Sur les écrans les plus petits (largeur de 320 epx), la barre de commandes peut contenir au maximum 4 commandes principales.

Vous pouvez également ajouter des commandes à la collection SecondaryCommands. Celles-ci s’affichent dans le menu de dépassement.

Exemple de barre de commandes comportant une zone et des icônes « Plus »

Vous pouvez déplacer par programme les commandes entre les propriétés PrimaryCommands et SecondaryCommands en fonction des besoins.

  • S’il existe une commande qui s’affiche de façon cohérente sur plusieurs pages, il est préférable de la laisser à un emplacement cohérent.
  • Nous recommandons de placer les commandes Accepter, Oui et OK à gauche des commandes Rejeter, Non et Annuler. La cohérence permet aux utilisateurs de se déplacer en toute confiance dans le système et de réutiliser leur connaissance de navigation d’une application à l’autre.

Boutons de la barre de l’application

PrimaryCommands et SecondaryCommands peuvent être remplis uniquement avec des types qui implémentent l’interface ICommandBarElement , qui inclut les éléments de commande AppBarButton, AppBarToggleButton et AppBarSeparator .

Si vous souhaitez inclure un autre type d’élément dans vos PrimaryCommands ou SecondaryCommands, vous pouvez utiliser la classe AppBarElementContainer . Cela servira de wrapper pour votre élément et permettra à l’élément de s’afficher dans un CommandBar.

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 qu’ils sont utilisés dans la barre de commandes ou dans le menu de dépassement.

Icônes

La taille des icônes lorsqu’elles sont affichées dans la zone de commande principale est de 20x20px, alors qu’elle est de 16x16px dans le menu de dépassement de capacité. Si vous utilisez SymbolIcon, FontIcon ou PathIcon, la taille de l’icône s’ajuste automatiquement sans perte de fidélité lorsque la commande entre dans la zone de commande secondaire.

Pour plus d’informations et des exemples sur la définition des icônes, consultez la documentation de la classe AppBarButton.

Étiquettes

La propriété IsCompact d’AppBarButton détermine si l’étiquette s’affiche. Dans un contrôle CommandBar, la barre de commandes remplace automatiquement la propriété IsCompact du bouton lorsque la barre de commandes est ouverte et fermée.

Pour positionner les étiquettes des boutons de la barre de l’application, utilisez la propriété DefaultLabelPosition du contrôle CommandBar.

<CommandBar DefaultLabelPosition="Right">
    <AppBarToggleButton Icon="Edit" Label="Edit"/>
    <AppBarToggleButton Icon="Share" Label="Share"/>
</CommandBar>

Barre de commandes avec étiquettes sur la droite

Sur les fenêtres de plus grande taille, envisagez de déplacer les étiquettes à droite des icônes de bouton de la barre de l’application pour améliorer la lisibilité. Les étiquettes du bas obligent les utilisateurs à ouvrir la barre de commandes pour révéler les étiquettes, tandis que les étiquettes sur la droite sont visibles même lorsque la barre de commandes est fermée.

Dans les menus de dépassement, les étiquettes sont positionnées à droite des icônes par défaut, et la valeur LabelPosition est ignorée. Vous pouvez ajuster les styles en définissant la propriété CommandBarOverflowPresenterStyle sur un Style qui cible CommandBarOverflowPresenter.

Les étiquettes des boutons doivent être courtes, en ne comptant de préférence qu’un seul mot. Les libellés plus longs sous une icône s’étalent sur plusieurs lignes, ce qui augmente la hauteur totale de la barre de commandes ouverte. Vous pouvez inclure un trait d’union conditionnel (0x00AD) dans le libellé pour indiquer l’endroit où une césure doit intervenir. En XAML, cela s’exprime par une séquence d’échappement, telle que celle qui suit :

<AppBarButton Icon="Back" Label="Areally&#x00AD;longlabel"/>

Lorsque le libellé est renvoyé à la ligne à l’emplacement indiqué, cela se présente comme suit.

Bouton de la barre de l’application avec renvoi à la ligne du libellé

SplitButton

Vous pouvez afficher un SplitButton dans une barre de commandes à l’aide de la classe intégrée SplitButtonCommandBarStyle et de la classe AppBarElementContainer . SplitButtonCommandBarStyle fournit des visuels pour qu’un SplitButton ressemble à un AppBarButton, tandis que AppBarElementContainer est une classe wrapper qui fournit les fonctionnalités dont SplitButton a besoin pour agir comme un AppBarButton.

Lorsque vous encapsulez un SplitButton dans un AppBarElementContainer et que vous le placez dans une barre de commande, la SplitButtonCommandBarStyle ressource est appliquée automatiquement.

Cet exemple de code crée et affiche un SplitButton à l’intérieur d’une barre de commandes :

<CommandBar>
    <AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy" Label="Copy"/>
    <AppBarElementContainer>
        <muxc:SplitButton ToolTipService.ToolTip="Insert" Content="Insert">
            <muxc:SplitButton.Flyout>
                <MenuFlyout Placement="RightEdgeAlignedTop">
                    <MenuFlyoutItem Text="Insert above"/>
                    <MenuFlyoutItem Text="Insert between"/>
                    <MenuFlyoutItem  Text="Insert below"/>
                </MenuFlyout>
            </muxc:SplitButton.Flyout>
        </muxc:SplitButton>
    </AppBarElementContainer>
    <AppBarButton Label="Select all"/>
    <AppBarButton Label="Delete" Icon="Delete"/>
</CommandBar>

Envisagez le regroupement logique des commandes ; placez par exemple les commandes Répondre, Répondre à tous et Transférer dans un menu Répondre. Un bouton de barre de l’application active en règle générale une seule commande ; il peut cependant être utilisé pour afficher des classes MenuFlyout ou Flyout avec du contenu personnalisé.

Exemple d’un MenuFlyout pour les optionsde tri Exemple de menus volants dans une barre de commandes

Autre contenu

Vous pouvez ajouter n’importe quel élément XAML à la zone de contenu en définissant la propriété Content. Si vous voulez ajouter plusieurs éléments, vous devez les placer dans un conteneur de panneaux et faire en sorte que le panneau soit le seul enfant de la propriété Content.

Quand le dépassement dynamique est activé, le contenu n’est pas tronqué car les commandes principales peuvent se déplacer dans le menu de dépassement. Dans le cas contraire, les commandes principales sont prioritaires et peuvent provoquer la troncature du contenu.

Lorsque ClosedDisplayMode est défini sur Compact, le contenu peut être tronqué s’il est plus grand que la taille compacte de la barre de commandes. Vous devez gérer les événements Opening et Closed pour afficher ou masquer des parties de l’interface utilisateur dans la zone de contenu afin qu’elles ne soient pas tronquées. Voir la section États ouvert et fermé pour plus d’informations.

États ouvert et fermé

La barre de commandes peut être ouverte ou fermée. Lorsqu’il est ouvert, il affiche les boutons de commande principaux avec des étiquettes de texte et ouvre le menu de dépassement de capacité (s’il existe des commandes secondaires). La barre de commandes ouvre le menu de dépassement vers le haut (au-dessus des commandes principales) ou vers le bas (sous les commandes principales). Le sens d’ouverture par défaut est vers le haut mais, s’il n’y a pas suffisamment d’espace, la barre de commandes s’ouvre vers le bas.

Un utilisateur peut basculer entre ces états en appuyant sur le bouton « Voir plus » [...] . Vous pouvez basculer d’un état à l’autre par programme en définissant la propriété IsOpen.

Vous pouvez utiliser les événements Opening, Opened, Closing, et Closed pour répondre à l’ouverture et à la fermeture de la barre de commandes.

  • Les événements Opening et Closing se produisent avant le début de l’animation de transition.
  • Les événements Opened et Closed se produisent après la transition.

Dans cet exemple, les événements Opening et Closing permettent de modifier l’opacité de la barre de commandes. Lorsque la barre de commandes est fermée, celle-ci devient semi-transparente révélant l’arrière-plan de l’application. Lorsque la barre de commandes est ouverte, celle-ci devient opaque de sorte que l’utilisateur puisse se concentrer sur les commandes.

<CommandBar Opening="CommandBar_Opening"
            Closing="CommandBar_Closing">
    <AppBarButton Icon="Accept" Label="Accept"/>
    <AppBarButton Icon="Edit" Label="Edit"/>
    <AppBarButton Icon="Save" Label="Save"/>
    <AppBarButton Icon="Cancel" Label="Cancel"/>
</CommandBar>

private void CommandBar_Opening(object sender, object e)
{
    CommandBar cb = sender as CommandBar;
    if (cb != null) cb.Background.Opacity = 1.0;
}

private void CommandBar_Closing(object sender, object e)
{
    CommandBar cb = sender as CommandBar;
    if (cb != null) cb.Background.Opacity = 0.5;
}

IsSticky

Si un utilisateur interagit avec d’autres parties d’une application quand une barre de commandes est ouverte, cette dernière se ferme automatiquement. C’est ce qu’on appelle un abandon interactif. Vous pouvez contrôler le comportement d’abandon interactif en définissant la propriété IsSticky. Lorsque IsSticky="true", la barre reste ouverte jusqu’à ce que l’utilisateur appuie sur le bouton « Voir plus » [...] ou sélectionne un élément dans le menu de dépassement de capacité.

Nous vous recommandons d’éviter les barres de commandes rémanentes, car elles ne répondent pas aux attentes des utilisateurs pour le comportement d’abandon interactif et des éléments sélectionnés au clavier.

Mode d’affichage

Vous pouvez contrôler la façon dont la barre de commandes est affichée à l’état fermé en définissant la propriété ClosedDisplayMode. Vous avez le choix entre 3 modes d’affichage lorsque la barre est fermée :

  • Compact : Mode par défaut. Affiche le contenu, les icônes de commande principale sans étiquettes et le bouton « Voir plus » [...] .
  • Minimal : affiche uniquement une barre mince qui fait office de bouton « voir plus » [...] . L’utilisateur peut appuyer n’importe où sur la barre pour l’ouvrir.
  • Masqué : la barre de commandes ne s’affiche pas quand elle est fermée. Cela peut être utile pour afficher des commandes contextuelles avec une barre de commandes en ligne. Dans ce cas, vous devez ouvrir la barre de commandes par programme en définissant la propriété IsOpen ou en modifiant la propriété ClosedDisplayMode pour la définir sur Minimal ou Compact.

Ici, une barre de commandes est utilisée pour contenir des commandes de mise en forme simples pour un élément RichEditBox. Lorsque la zone d’édition n’a pas le focus, les commandes de mise en forme peuvent devenir gênantes, c’est pourquoi elles sont masquées. Lorsque la zone d’édition est utilisée, la propriété ClosedDisplayMode de la barre de commandes est définie sur Compact afin que les commandes de mise en forme soient visibles.

<StackPanel Width="300"
            GotFocus="EditStackPanel_GotFocus"
            LostFocus="EditStackPanel_LostFocus">
    <CommandBar x:Name="FormattingCommandBar" ClosedDisplayMode="Hidden">
        <AppBarButton Icon="Bold" Label="Bold" ToolTipService.ToolTip="Bold"/>
        <AppBarButton Icon="Italic" Label="Italic" ToolTipService.ToolTip="Italic"/>
        <AppBarButton Icon="Underline" Label="Underline" ToolTipService.ToolTip="Underline"/>
    </CommandBar>
    <RichEditBox Height="200"/>
</StackPanel>

private void EditStackPanel_GotFocus(object sender, RoutedEventArgs e)
{
    FormattingCommandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Compact;
}

private void EditStackPanel_LostFocus(object sender, RoutedEventArgs e)
{
    FormattingCommandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Hidden;
}

Notes

L’implémentation des commandes d’édition dépasse la portée de cet exemple. Pour plus d’informations, voir l’article RichEditBox.

Bien que les modes Minimal et Hidden soient utiles dans certaines situations, n’oubliez pas que le masquage de toutes les actions peut prêter à confusion.

La modification de la propriété ClosedDisplayMode pour fournir plus ou moins d’indications à l’utilisateur affecte la disposition des éléments environnants. En revanche, lorsque CommandBar passe de l’état fermé à ouvert ou inversement, cela n’affecte pas la disposition des autres éléments.

Obtenir l’exemple de code