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 les commandes dans une barre d’outils flottante liée à un élément sur le canevas de l’interface utilisateur.
Comme CommandBar, CommandBarFlyout a des propriétés PrimaryCommands et SecondaryCommands que vous pouvez utiliser pour ajouter des commandes. Vous pouvez placer des commandes dans une des collections ou dans les deux. Le mode d’affichage détermine à quel moment et comment les commandes principales et secondaires sont affichées.
Le menu volant de barre de commandes a deux modes d’affichage : réduit et développé.
- En mode réduit, seules les commandes principales sont affichées. Si votre menu volant de barre de commandes comporte des commandes primaires et secondaires, un bouton « voir plus », représenté par des points de suspension [...], s’affiche. Il permet à l’utilisateur d’accéder aux commandes secondaires en passant au mode développé.
- En mode développé, les commandes principales et secondaires sont affichées. (Si le contrôle a 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 de menu 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 menu volant de la barre de commandes est le contrôle recommandé pour créer des menus contextuels. Cela permet d’ajouter les commandes courantes (telles que les commandes Copier, Couper, Coller, Supprimer, Partager ou sélectionner du texte) qui sont les plus pertinentes du point de vue contextuel pour le scénario du menu contextuel en tant que commandes principales afin qu’elles soient affichées sous la forme d’une 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 des commandes de texte dans les contrôles TextBox, TextBlock, RichEditBox, RichTextBlock et PasswordBox. Une commande CommandBarFlyout peut être utilisée pour remplacer les commandes de texte par défaut sur les contrôles de texte.
Pour afficher des commandes contextuelles sur des éléments de liste, suivez les instructions indiquées dans Commandes contextuelles pour les collections et les listes.
Appel proactif ou réactif
Il existe généralement deux façons d’appeler un menu volant ou un menu associé à un élément sur le canevas de l’interface utilisateur : appel proactif et appel réactif.
Dans le cas d’un appel proactif, les commandes apparaissent automatiquement quand l’utilisateur interagit avec l’élément avec lequel elles sont associées. Par exemple, les commandes de mise en forme de texte peuvent apparaître quand l’utilisateur sélectionne du texte dans une zone de texte. Dans ce cas, le menu volant de barre de commandes ne prend pas le focus. Au lieu de cela, il présente des commandes pertinentes proches de l’élément avec lequel l’utilisateur interagit. Si l’utilisateur n’interagit pas avec les commandes, elles sont ignorées.
Dans le cas d’un 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 de menu contextuel.
Vous pouvez utiliser le CommandBarFlyout dans un cas de figure, comme dans l’autre.
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.
Le contrôle CommandBarFlyout pour les applications UWP est inclus dans la bibliothèque d’interface utilisateur Windows 2. Pour plus d’informations, notamment des instructions d’installation, consultez la bibliothèque d’interface utilisateur Windows. Les API de ce contrôle existent dans les espaces de noms Windows.UI.Xaml.Controls (UWP) et Microsoft.UI.Xaml.Controls (WinUI).
- API UWP :classe CommandBarFlyout, classe TextCommandBarFlyout, classe AppBarButton, classe AppBarToggleButton, classe AppBarSeparator
- WinUI 2 Apis:Classe CommandBarFlyout, classe TextCommandBarFlyout
- Ouvrez l’application WinUI 2 Gallery et voyez commandBarFlyout 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 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.
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:CommandBarFlyout />
Créer un menu volant de barre de commandes
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 montre comment créer un menu volant de barre de commandes et l’utiliser à la fois de façon proactive et réactive. Quand l’utilisateur appuie sur l’image, le menu volant est affiché en mode réduit. Quand il se présente sous la forme d’un menu contextuel, le menu volant est affiché en mode développé. Dans les deux cas, l’utilisateur peut développer ou réduire le menu volant une fois celui-ci ouvert.
<Grid>
<Grid.Resources>
<CommandBarFlyout x:Name="ImageCommandsFlyout">
<AppBarButton Icon="OutlineStar" ToolTipService.ToolTip="Favorite"/>
<AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/>
<AppBarButton Icon="Share" ToolTipService.ToolTip="Share"/>
<CommandBarFlyout.SecondaryCommands>
<AppBarButton Label="Select all"/>
<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 façon proactive
Quand vous affichez les commandes contextuelles de façon proactive, seules les commandes principales doivent être affichées par défaut (le menu volant de barre de commandes doit être réduit). Placez les commandes les plus importantes dans la collection de commandes principales et les commandes supplémentaires qui iraient d’ordinaire dans un menu contextuel dans la collection de commandes secondaires.
Pour afficher les commandes de manière proactive, vous gérez en général l’événement Click ou Tapped pour afficher le menu volant de barre de commandes. Définissez le ShowMode du menu volant sur Transient ou TransientWithDismissOnPointerMoveAway pour ouvrir le menu volant en mode réduit sans prise du focus.
Les contrôles de texte ont une propriété SelectionFlyout . Quand vous affectez un menu volant à cette propriété, il s’affiche automatiquement quand du texte est sélectionné.
Afficher les commandes de façon réactive
Quand vous affichez les commandes contextuelles de façon réactive, sous la forme d’un menu contextuel, les commandes secondaires sont affichées par défaut (le menu volant de barre de commandes doit être développé). Dans ce cas, le menu volant de barre de commandes peut avoir des commandes principales et secondaires, ou uniquement des commandes secondaires.
Pour afficher des commandes dans un menu contextuel, vous attribuez généralement le menu volant à la propriété ContextFlyout d’un élément d’interface utilisateur. De cette façon, l’ouverture du menu volant est gérée par l’élément, et vous n’avez rien à faire de plus.
Si vous gérez l’affichage du menu volant vous-même (par exemple, sur un événement RightTapped), définissez le ShowMode du menu volant sur Standard pour ouvrir le menu volant en mode développé et lui donner le focus.
Conseil
Pour plus d’informations sur les options d’affichage d’un menu volant et sur la façon de contrôler son emplacement, consultez Menus volants.
Afficher un CommandBarFlyout toujours développé
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é a la AlwaysExpanded valeur true, le bouton « En savoir plus » n’est pas affiché et l’utilisateur ne peut pas activer l’état développé du contrôle. CommandBarFlyout est toujours ignoré comme d’habitude lorsqu’une commande secondaire est cliquée ou que l’utilisateur clique en dehors du menu volant.
Cette propriété a un effet uniquement si CommandBarFlyout a des commandes secondaires. S’il n’y a pas de commandes secondaires, commandBarFlyout sera toujours en mode réduit.
Conseil
Vous pouvez toujours réduire et développer commandBarFlyout par programmation en définissant la propriété IsOpen même si la propriété a la AlwaysExpandedtruevaleur .
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 deux modes réduit et développé. Contrairement à CommandBar, les commandes principales ne débordent pas automatiquement sur les commandes secondaires et risquent d’être tronquées.
Vous pouvez également ajouter des commandes à la collection SecondaryCommands. Les commandes secondaires sont affichées dans la partie de menu du contrôle et sont visibles uniquement en mode développé.
S’il existe des commandes courantes (telles que les commandes 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 comme commandes secondaires.
Boutons de la barre de l’application
Vous pouvez remplir les propriétés 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 qu’ils sont affichés dans la barre de commandes ou dans le menu de dépassement.
- Les boutons de barre d’application utilisés en tant que commandes principales sont affichés dans la barre de commandes avec leur icône uniquement ; 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 illustré ici.
<AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/> - Les boutons de barre d’application utilisés en tant que commandes secondaires sont affichés dans le menu, avec l’icône et l’étiquette visibles.
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.
Autre contenu
Vous pouvez ajouter d’autres contrôles à un menu volant de barre de commandes en les wrappant 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 pouvoir être ajouté aux collections de commandes principales 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 que vous puissiez 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 à un menu volant de barre de commandes. Un SplitButton est ajouté aux commandes principales pour permettre la sélection de couleurs. Un StackPanel est ajouté aux commandes secondaires pour permettre une mise en page plus complexe des contrôles de zoom.
Conseil
Par défaut, les éléments conçus pour le canevas de l’application peuvent ne pas avoir l’apparence appropriée dans une barre de commandes. Quand vous ajoutez un élément à l’aide d’AppBarElementContainer, vous devez suivre quelques étapes pour que l’élément corresponde à d’autres éléments de la barre de commandes :
- Remplacez les propriétés de pinceau par défaut en adoptant un style léger afin que l’arrière-plan et la bordure de l’élément correspondent aux boutons de la barre d’application.
- Ajustez la taille et la position de l’élément.
- Wrappez les icônes dans un Viewbox avec une largeur et une hauteur de 16px.
Notes
Cet exemple montre uniquement l’interface utilisateur du menu volant de la barre de commandes ; il n’implémente aucune des commandes affichées. Pour plus d’informations sur l’implémentation des commandes, consultez Boutons et Informations de base sur la conception des commandes.
<CommandBarFlyout>
<AppBarButton Icon="Cut" ToolTipService.ToolTip="Cut"/>
<AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/>
<AppBarButton Icon="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 volant de barre de commandes réduit avec un SplitButton ouvert.
Voici le menu volant de la barre de commandes développé avec l’interface utilisateur de zoom personnalisé dans le menu.
Créer un menu contextuel avec uniquement des commandes secondaires
Vous pouvez utiliser un menu volant de barre de commandes avec uniquement des commandes secondaires pour créer un menu contextuel qui affiche le même aspect et le même comportement que le 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 en tant que 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 volants de barre de commandes pour les contrôles de texte
Le TextCommandBarFlyout est un menu volant de barre de commandes spécialisé qui contient des commandes de modification de texte. Chaque contrôle de texte affiche automatiquement le TextCommandBarFlyout sous la forme d’un menu contextuel (clic droit) ou quand du texte est sélectionné. Le menu volant de barre de commandes de texte s’adapte à la sélection du texte pour n’afficher que les commandes appropriées.
Voici un menu volant de barre de commandes de texte sur la sélection de texte.
Voici un menu volant de barre de commandes de texte développé qui affiche les commandes secondaires.
Commandes disponibles
Le tableau ci-après montre les commandes qui sont incluses dans un TextCommandBarFlyout et indique quand elles sont affichées.
| Commande | Affichée... |
|---|---|
| Gras | quand le contrôle de texte n’est pas en lecture seule (RichEditBox uniquement). |
| Italique | quand le contrôle de texte n’est pas en lecture seule (RichEditBox uniquement). |
| Souligner | quand le contrôle de texte n’est pas en lecture seule (RichEditBox uniquement). |
| Vérification linguistique | quand IsSpellCheckEnabled est true et que du texte mal orthographié est sélectionné. |
| Couper | quand le contrôle de texte n’est pas en lecture seule et que du texte est sélectionné. |
| Copier | quand du texte est sélectionné. |
| Coller | quand le contrôle de texte n’est pas en lecture seule et que le Presse-papiers a du contenu. |
| Annuler | quand une action peut être annulée. |
| Tout sélectionner | quand du texte peut être sélectionné. |
Menus volants de barre de commandes de texte personnalisés
TextCommandBarFlyout ne peut pas être personnalisé et est géré automatiquement par chaque contrôle de texte. Toutefois, vous pouvez remplacer le TextCommandBarFlyout par défaut par des commandes personnalisées.
- Pour remplacer le TextCommandBarFlyout par défaut qui s’affiche quand du texte est sélectionné, vous pouvez créer un CommandBarFlyout personnalisé (ou un autre type de menu volant) et l’assigner à la propriété SelectionFlyout. Si vous définissez SelectionFlyout sur null, aucune commande n’apparaît au moment de la sélection.
- Pour remplacer le TextCommandBarFlyout par défaut qui s’affiche sous la forme d’un 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 apparaît à la place du TextCommandBarFlyout.
Abandon interactif
Les contrôles de fermeture légère, tels que les menus, les menus contextuels et d’autres menus volants, interceptent le clavier et le boîtier de commande à l’intérieur de l’interface utilisateur temporaire jusqu’à ce qu’ils soient ignorés. 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. 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 forcer la superposition à être toujours Activée ou Désactivée.
<CommandBarFlyout LightDismissOverlayMode="Off" /> >
Obtenir l’exemple de code
- Exemple winUI Gallery : affichez tous les contrôles XAML dans un format interactif.
- Exemple de commandes XAML
Articles connexes
Windows developer
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour