Cases d’option
Les cases d’option, ou boutons radio, permettent aux utilisateurs de sélectionner une option dans une collection constituée d’au moins deux options apparentées, mais qui s’excluent mutuellement. Les cases d’option sont toujours utilisées dans des groupes, et chacune d’elles est représentée par une case d’option dans le groupe.
Dans l’état par défaut, aucune case d’option n’est sélectionnée dans un groupe RadioButtons. Autrement dit, toutes les cases d’option sont désactivées. Toutefois, une fois qu’un utilisateur a sélectionné une case d’option, il ne peut plus désélectionner le bouton pour restaurer le groupe à son état vierge initial.
Le comportement singulier d’un groupe RadioButtons le distingue des cases à cocher, qui prennent en charge la sélection multiple et la désélection, ou désactivation.
Est-ce le contrôle approprié ?
Utilisez des cases d’option pour permettre aux utilisateurs d’effectuer une sélection parmi au moins deux options qui s’excluent mutuellement.
Utilisez les cases d’option quand les utilisateurs ont besoin de voir toutes les options avant d’effectuer une sélection. Les cases d’option mettent en évidence toutes les options de la même manière. Ainsi, elles peuvent donner plus d’importance à une option qu’elle n’en a vraiment ou que vous voulez lui en donner.
À moins que les options méritent toutes la même attention, envisagez d’utiliser d’autres contrôles. Par exemple, pour recommander l’option convenant le mieux à la plupart des utilisateurs dans la plupart des cas, utilisez une zone de liste modifiable pour l’afficher comme option par défaut.
S’il n’existe que deux options possibles qui peuvent être exprimées clairement en tant que choix binaire unique, par exemple activé/désactivé ou oui/non, combinez-les dans un contrôle case à cocher ou bouton bascule unique. Par exemple, utilisez une case à cocher unique pour « J’accepte », plutôt que deux cases d’option pour « J’accepte » et « Je n’accepte pas ».
N’utilisez pas deux cases d’option pour un choix binaire unique :
Utilisez plutôt une case à cocher :
Quand les utilisateurs peuvent sélectionner plusieurs options, utilisez des cases à cocher.
Quand les utilisateurs doivent choisir une valeur dans une plage de valeurs (par exemple, 10, 20, 30,... 100), utilisez un contrôle de curseur.
S’il y a plus de huit options, utilisez une zone de liste modifiable.
Si les options disponibles dépendent du contexte actuel d’une application ou si elles peuvent changer de façon dynamique, utilisez un contrôle de liste.
Recommandations
- Assurez-vous que le but et l’état actuel d’un ensemble de cases d’option sont explicites.
- Limitez l’étiquette de texte de la case d’option à une seule ligne.
- Si l’étiquette de texte est dynamique, songez au redimensionnement automatique du bouton et à ses conséquences sur les effets visuels environnants.
- Utilisez la police par défaut à moins que votre organisation ait passé d’autres consignes.
- Ne placez pas deux groupes RadioButtons côte à côte. Quand deux groupes RadioButtons sont adjacents, il peut être difficile pour les utilisateurs de déterminer quelles cases appartiennent à quel groupe.
Vue d’ensemble du contrôle RadioButtons
RadioButtons ou RadioButton ?
Il existe deux façons de créer des groupes de cases d’option : RadioButtons et RadioButton.
- Nous vous recommandons le contrôle RadioButtons. Ce contrôle simplifie la disposition, gère la navigation au clavier et l’accessibilité, et prend en charge la liaison à une source de données.
- Vous pouvez utiliser des groupes de contrôles RadioButton individuels.
L’accès au clavier et le comportement de navigation ont été optimisés dans le contrôle RadioButtons. Ces améliorations favorisent l’accessibilité et permettent aux utilisateurs privilégiant l’utilisation du clavier de naviguer dans la liste d’options plus rapidement et plus facilement.
En plus de ces améliorations, la disposition visuelle par défaut des cases d’option individuelles au sein d’un groupe RadioButtons a également été optimisée avec des paramètres automatisés d’orientation, d’espacement et de marges. Ces améliorations vous dispensent de spécifier ces propriétés, comme pouvait l’exiger un contrôle de regroupement plus primitif comme StackPanel ou Grid.
Navigation dans un groupe RadioButtons
Le contrôle RadioButtons a un comportement de navigation spécial qui aide les utilisateurs du clavier à parcourir la liste plus rapidement et plus facilement.
Focus clavier
Le contrôle RadioButtons prend en charge deux états :
- Aucune case d’option n’est sélectionnée.
- Une case d’option est sélectionnée.
Les sections suivantes décrivent le comportement de focus du contrôle dans chaque état.
Aucune case d’option n’est sélectionnée.
Quand aucune case d’option n’est sélectionnée, la première case d’option de la liste obtient le focus.
Remarque
L’élément qui reçoit le focus au début de la navigation par touche de tabulation n’est pas sélectionné.
Liste sans le focus de tabulation, aucune sélection
Liste avec le focus de tabulation initial, aucune sélection
Une case d’option est sélectionnée.
Quand un utilisateur accède à l’aide de la touche de tabulation à une liste où une case d’option est déjà sélectionnée, la case d’option sélectionnée obtient le focus.
Liste sans le focus de tabulation
Liste avec le focus de tabulation initial
Navigation à l’aide du clavier
Pour plus d’informations sur les comportements de navigation généraux avec le clavier, consultez Interactions avec le clavier – Navigation.
Lorsqu’un élément d’un groupe RadioButtons a déjà le focus, l’utilisateur peut utiliser les touches de direction pour la « navigation interne » entre les éléments du groupe. Les touches de direction Haut et Bas permettent d’accéder à l’élément logique « suivant » ou « précédent », comme défini dans votre balisage XAML. Les touches de direction Gauche et Droite permettent de se déplacer de manière spatiale.
Navigation dans les dispositions à une seule colonne ou à une seule ligne
Dans une disposition à une seule colonne ou à une seule ligne, la navigation au clavier entraîne le comportement suivant :
Une seule colonne
Les flèches Haut et Bas permettent de se déplacer entre les éléments.
Les flèches Gauche et Droite ne font rien.
Une seule ligne
Les touches de direction Gauche et Haut permettent d’accéder à l’élément précédent, tandis que les touches de direction Droite et Bas permettent d’accéder à l’élément suivant.
Navigation dans les dispositions à plusieurs colonnes ou plusieurs lignes
Dans une disposition en grille à plusieurs colonnes et à plusieurs lignes, la navigation au clavier entraîne ce comportement :
Touches de direction Gauche/Droite
Les touches de direction Gauche et Droite déplacent le focus horizontalement entre les éléments d’une ligne.
Lorsque le focus se trouve sur le dernier élément d’une colonne et que la touche de direction Droite ou Gauche est enfoncée, le focus se déplace vers le dernier élément de la colonne suivante ou précédente (s’il y en a une).
Touches de direction Haut/Bas
Les touches de direction Haut et Bas permettent de déplacer le focus verticalement entre les éléments d’une colonne.
Lorsque le focus se trouve sur le dernier élément d’une colonne et que la touche de direction Bas est enfoncée, le focus se déplace vers le premier élément de la colonne suivante (s’il y en a une). Lorsque le focus se trouve sur le premier élément d’une colonne et que la touche de direction Haut est enfoncée, le focus se déplace vers le dernier élément de la colonne précédente (s’il y en a une).
Pour plus d’informations, consultez Interactions avec le clavier.
Retour à la ligne
Le groupe RadioButtons ne renvoie pas le focus de la première ligne ou colonne jusqu’à la dernière, ni de la dernière ligne ou colonne jusqu’à la première. En effet, les utilisateurs qui ont recours à un lecteur d’écran perdent ce sentiment de limite et n’ont plus d’indication claire de début et de fin. La navigation dans la liste devient alors particulièrement difficile pour les utilisateurs malvoyants.
Le contrôle RadioButtons ne prend pas non plus en charge l’énumération, car il est censé contenir un nombre raisonnable d’éléments (consultez Est-ce le bon contrôle ?).
La sélection suit le focus.
Lorsque vous utilisez le clavier pour naviguer entre les éléments d’un groupe RadioButtons, quand le focus passe d’un élément au suivant, l’élément qui prend le focus est sélectionné et l’élément qui le perd est désactivé.
Avant la navigation au clavier
Focus et sélection avant la navigation au clavier.
Après la navigation au clavier
Focus et sélection après la navigation au clavier, où la touche de direction Bas déplace le focus sur la case d’option 3, la sélectionne et désactive la case d’option 2.
Vous pouvez déplacer le focus sans changer la sélection en naviguant à l’aide de Ctrl+touches de direction. Une fois le focus déplacé, vous pouvez utiliser la barre d’espace pour sélectionner l’élément qui a actuellement le focus.
Navigation avec un boîtier de commande ou un contrôle à distance
Si vous naviguez entre des cases d’option avec un boîtier de commande ou un contrôle à distance, le comportement « la sélection suit le focus » est désactivé. Vous devez appuyer sur le bouton « A » pour sélectionner la case d’option qui a le focus.
Comportement en matière d’accessibilité
Le tableau suivant décrit la façon dont le Narrateur gère un groupe RadioButtons et ce qui est annoncé. Ce comportement dépend de la manière dont l’utilisateur a défini les préférences du Narrateur.
| Action | Annonce du Narrateur |
|---|---|
| Le focus se déplace sur l’élément sélectionné | « nom, RadioButton, sélectionné, x sur N » |
| Le focus se déplace vers un élément non sélectionné (Si vous naviguez avec Ctrl et les touches de direction ou avec un boîtier de commande Xbox, qui indique que la sélection ne suit pas le focus.) |
« nom, RadioButton, non sélectionné, x sur N » |
Remarque
Le nom que le narrateur annonce pour chaque élément est la valeur de la propriété jointe AutomationProperties.Name si elle est disponible pour l’élément. Sinon, il s’agit de la valeur retournée par la méthode ToString de l’élément.
x est le numéro de l’élément actuel. N est le nombre total d’éléments dans le groupe.
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 RadioButtons 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 ces contrôles existent dans les espaces de noms Windows.UI.Xaml.Controls et Microsoft.UI.Xaml.Controls.
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.
Il existe deux façons de créer des groupes de cases d’option.
- À compter de WinUI 2.3, nous vous recommandons d’utiliser le contrôle RadioButtons. Ce contrôle simplifie la disposition, gère la navigation au clavier et l’accessibilité, et prend en charge la liaison à une source de données.
- Vous pouvez utiliser des groupes de contrôles RadioButton individuels. Si votre application n’utilise pas WinUI 2.3 ou une version ultérieure, il s’agit de la seule option.
Nous vous recommandons d’utiliser la dernière version de WinUI 2 pour obtenir les styles et fonctionnalités les plus récents pour tous les contrôles.
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:RadioButtons />
Créer un groupe RadioButtons WinUI
- API importantes : classe RadioButtons, propriété SelectedItem, propriété SelectedIndex, événement SelectionChanged, classe RadioButton, propriété IsChecked, événement Checked
- Ouvrez l’application WinUI 2 Gallery et regardez RadioButton 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.
Le contrôle RadioButtons utilise un modèle de contenu similaire à un ItemsControl. Cela signifie que vous pouvez :
- Le remplir en ajoutant des éléments directement à la collection Items ou en liant des données à sa propriété ItemsSource.
- Utiliser les propriétés SelectedIndex ou SelectedItem pour récupérer et définir l’option sélectionnée.
- Gérer l’événement SelectionChanged pour agir lorsqu’une option est choisie.
Ici, vous déclarez un contrôle RadioButtons simple avec trois options. La propriété Header est définie de façon à donner une étiquette au groupe, et la propriété SelectedIndex est définie de façon à fournir une option par défaut.
<RadioButtons Header="Background color"
SelectedIndex="0"
SelectionChanged="BackgroundColor_SelectionChanged">
<x:String>Red</x:String>
<x:String>Green</x:String>
<x:String>Blue</x:String>
</RadioButtons>
Le résultat ressemble à ceci :
Pour effectuer une action lorsque l’utilisateur sélectionne une option, gérez l’événement SelectionChanged. Ici, vous changez la couleur d’arrière-plan d’un élément Border nommé « ExampleBorder » (<Border x:Name="ExampleBorder" Width="100" Height="100"/>).
private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (ExampleBorder != null && sender is RadioButtons rb)
{
string colorName = rb.SelectedItem as string;
switch (colorName)
{
case "Red":
ExampleBorder.Background = new SolidColorBrush(Colors.Red);
break;
case "Green":
ExampleBorder.Background = new SolidColorBrush(Colors.Green);
break;
case "Blue":
ExampleBorder.Background = new SolidColorBrush(Colors.Blue);
break;
}
}
}
Conseil
Vous pouvez également obtenir l’élément sélectionné à partir de la propriété SelectionChangedEventArgs.AddedItems. Il n’y aura qu’un seul élément sélectionné, à l’index 0. Vous pourriez donc récupérer l’élément sélectionné comme suit : string colorName = e.AddedItems[0] as string;.
États de sélection
Une case d’option a deux états : sélectionnée ou désactivée. Lorsqu’une option est sélectionnée dans un groupe RadioButtons, vous pouvez obtenir sa valeur à partir de la propriété SelectedItem et son emplacement dans la collection à partir de la propriété SelectedIndex. Une case d’option peut être désactivée si l’utilisateur sélectionne une autre case d’option dans le même groupe, mais pas s’il la sélectionne de nouveau. Toutefois, vous pouvez désactiver un groupe de cases d’option par programmation en définissant SelectedItem = null ou SelectedIndex = -1. (Affecter à SelectedIndex n’importe quelle valeur en dehors de la plage de la collection Items entraîne l’absence de sélection.)
Contenu de RadioButtons
Dans l’exemple précédent, vous avez rempli le contrôle RadioButtons avec des chaînes simples. Le contrôle a fourni les cases d’option et utilisé les chaînes comme étiquette pour chacune d’elles.
Toutefois, vous pouvez remplir le contrôle RadioButtons avec n’importe quel objet. En règle générale, l’objet doit fournir une représentation sous forme de chaîne utilisable en tant qu’étiquette de texte. Dans certains cas, une image peut convenir à la place du texte.
Ici, les éléments SymbolIcon sont utilisés pour remplir le contrôle.
<RadioButtons Header="Select an icon option:">
<SymbolIcon Symbol="Back"/>
<SymbolIcon Symbol="Attach"/>
<SymbolIcon Symbol="HangUp"/>
<SymbolIcon Symbol="FullScreen"/>
</RadioButtons>
Vous pouvez également utiliser des contrôles RadioButton individuels pour remplir les éléments RadioButtons. Il s’agit d’un cas particulier que nous aborderons plus loin. Consultez Contrôles RadioButton dans un groupe RadioButtons.
L’avantage de pouvoir utiliser n’importe quel objet est que vous pouvez lier le contrôle RadioButtons à un type personnalisé dans votre modèle de données. Vous en verrez une illustration dans la section suivante.
Liaison de données
Le contrôle RadioButtons prend en charge la liaison de données à sa propriété ItemsSource. Cet exemple montre comment lier le contrôle à une source de données personnalisée. L’apparence et les fonctionnalités de cet exemple sont identiques à celles de l’exemple de couleur d’arrière-plan précédent, mais ici les pinceaux de couleur sont stockés dans le modèle de données au lieu d’être créés dans le gestionnaire d’événements SelectionChanged.
<RadioButtons Header="Background color"
SelectedIndex="0"
SelectionChanged="BackgroundColor_SelectionChanged"
ItemsSource="{x:Bind colorOptionItems}"/>
public sealed partial class MainPage : Page
{
// Custom data item.
public class ColorOptionDataModel
{
public string Label { get; set; }
public SolidColorBrush ColorBrush { get; set; }
public override string ToString()
{
return Label;
}
}
List<ColorOptionDataModel> colorOptionItems;
public MainPage1()
{
this.InitializeComponent();
colorOptionItems = new List<ColorOptionDataModel>();
colorOptionItems.Add(new ColorOptionDataModel()
{ Label = "Red", ColorBrush = new SolidColorBrush(Colors.Red) });
colorOptionItems.Add(new ColorOptionDataModel()
{ Label = "Green", ColorBrush = new SolidColorBrush(Colors.Green) });
colorOptionItems.Add(new ColorOptionDataModel()
{ Label = "Blue", ColorBrush = new SolidColorBrush(Colors.Blue) });
}
private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var option = e.AddedItems[0] as ColorOptionDataModel;
ExampleBorder.Background = option?.ColorBrush;
}
}
Contrôles RadioButton dans un groupe RadioButtons
Vous pouvez utiliser des contrôles RadioButton individuels pour remplir les éléments RadioButtons. Vous pourriez par exemple souhaiter accéder à certaines propriétés, comme AutomationProperties.Name, ou peut-être avez-vous du code RadioButton existant mais souhaitez tirer parti de la disposition et de la navigation de RadioButtons.
<RadioButtons Header="Background color">
<RadioButton Content="Red" Tag="red" AutomationProperties.Name="red"/>
<RadioButton Content="Green" Tag="green" AutomationProperties.Name="green"/>
<RadioButton Content="Blue" Tag="blue" AutomationProperties.Name="blue"/>
</RadioButtons>
Lorsque vous utilisez des contrôles RadioButton dans un groupe RadioButtons, le contrôle RadioButtons sait comment présenter le RadioButton ; ainsi, vous ne vous retrouverez pas avec deux cercles de sélection.
Toutefois, vous devez avoir connaissance de certains comportements. Nous vous recommandons de gérer l’état et les événements sur les contrôles individuels ou sur RadioButtons, mais pas les deux, afin d’éviter les conflits.
Le tableau ci-dessous montre les événements et les propriétés connexes sur les deux contrôles.
| RadioButton | RadioButtons |
|---|---|
| Checked, Unchecked, Click | SelectionChanged |
| IsChecked | SelectedItem, SelectedIndex |
Si vous gérez des événements sur un RadioButton individuel, tels que Checked ou Unchecked, et que vous gérez également l’événement RadioButtons.SelectionChanged, les deux événements se déclenchent. L’événement RadioButton se produit en premier, suivi de l’événement RadioButtons.SelectionChanged, ce qui peut entraîner des conflits.
Les propriétés IsChecked, SelectedItem et SelectedIndex restent synchronisées. Une modification apportée à une propriété met à jour les deux autres.
La propriété RadioButton.GroupName est ignorée. Le groupe est créé par le contrôle RadioButtons.
Définition de plusieurs colonnes
Par défaut, le contrôle RadioButtons dispose ses cases d’option verticalement dans une seule colonne. Vous pouvez définir la propriété MaxColumns afin que le contrôle dispose les cases d’option dans plusieurs colonnes. (Dans ce cas, elles sont présentées dans l’ordre de stockage en colonne [column-major], où les éléments sont renseignés de haut en bas, puis de gauche à droite.)
<RadioButtons Header="RadioButtons in columns" MaxColumns="3">
<x:String>Item 1</x:String>
<x:String>Item 2</x:String>
<x:String>Item 3</x:String>
<x:String>Item 4</x:String>
<x:String>Item 5</x:String>
<x:String>Item 6</x:String>
</RadioButtons>
Conseil
Pour que les éléments soient disposés sur une seule ligne horizontale, affectez à MaxColumns une valeur égale au nombre d’éléments dans le groupe.
Créer votre propre groupe RadioButton
Important
Nous vous recommandons d’utiliser le contrôle RadioButtons pour regrouper des éléments RadioButton.
Les cases d’option s’utilisent en groupes. Vous pouvez regrouper des contrôles RadioButton de deux manières :
- Placez-les dans le même conteneur parent.
- Définissez la propriété GroupName de chaque case d’option sur la même valeur.
Dans cet exemple, le premier groupe de cases d’option est implicitement formé en raison de son appartenance au même panneau d’empilement. Le deuxième groupe étant divisé entre deux panneaux d’empilement, GroupName est utilisé pour les regrouper explicitement dans un groupe unique.
<StackPanel>
<StackPanel>
<TextBlock Text="Background" Style="{ThemeResource BaseTextBlockStyle}"/>
<!-- Group 1 - implicit grouping -->
<StackPanel Orientation="Horizontal">
<RadioButton Content="Green" Tag="green" Checked="BGRadioButton_Checked"/>
<RadioButton Content="Yellow" Tag="yellow" Checked="BGRadioButton_Checked"/>
<RadioButton Content="White" Tag="white" Checked="BGRadioButton_Checked"
IsChecked="True"/>
</StackPanel>
</StackPanel>
<StackPanel>
<TextBlock Text="BorderBrush" Style="{ThemeResource BaseTextBlockStyle}"/>
<!-- Group 2 - grouped by GroupName -->
<StackPanel Orientation="Horizontal">
<StackPanel>
<RadioButton Content="Green" Tag="green" GroupName="BorderBrush"
Checked="BorderRadioButton_Checked"/>
<RadioButton Content="Yellow" Tag="yellow" GroupName="BorderBrush"
Checked="BorderRadioButton_Checked" IsChecked="True"/>
<RadioButton Content="White" Tag="white" GroupName="BorderBrush"
Checked="BorderRadioButton_Checked"/>
</StackPanel>
</StackPanel>
</StackPanel>
<Border x:Name="ExampleBorder"
BorderBrush="#FFFFD700" Background="#FFFFFFFF"
BorderThickness="10" Height="50" Margin="0,10"/>
</StackPanel>
private void BGRadioButton_Checked(object sender, RoutedEventArgs e)
{
RadioButton rb = sender as RadioButton;
if (rb != null && ExampleBorder != null)
{
string colorName = rb.Tag.ToString();
switch (colorName)
{
case "yellow":
ExampleBorder.Background = new SolidColorBrush(Colors.Yellow);
break;
case "green":
ExampleBorder.Background = new SolidColorBrush(Colors.Green);
break;
case "white":
ExampleBorder.Background = new SolidColorBrush(Colors.White);
break;
}
}
}
private void BorderRadioButton_Checked(object sender, RoutedEventArgs e)
{
RadioButton rb = sender as RadioButton;
if (rb != null && ExampleBorder != null)
{
string colorName = rb.Tag.ToString();
switch (colorName)
{
case "yellow":
ExampleBorder.BorderBrush = new SolidColorBrush(Colors.Gold);
break;
case "green":
ExampleBorder.BorderBrush = new SolidColorBrush(Colors.DarkGreen);
break;
case "white":
ExampleBorder.BorderBrush = new SolidColorBrush(Colors.White);
break;
}
}
}
Ces deux groupes de contrôles RadioButton ressemblent à ceci :
États de la case d’option
Une case d’option a deux états : sélectionnée ou désactivée. Quand une case d’option est sélectionnée, sa propriété IsChecked a la valeur true. Quand une case d’option est désactivée, sa propriété IsChecked a la valeur false. Une case d’option peut être désactivée si l’utilisateur sélectionne une autre case d’option dans le même groupe, mais pas s’il la sélectionne de nouveau. Toutefois, vous pouvez désactiver une case d’option par programmation en affectant la valeur false à sa propriété IsChecked.
Visuels à prendre en considération
L’espacement par défaut des contrôles RadioButton individuels est différent de l’espacement fourni par un groupe RadioButtons. Pour appliquer l’espacement RadioButtons à des contrôles RadioButton individuels, utilisez une valeur Margin égale à 0,0,7,3, comme indiqué ici.
<StackPanel>
<StackPanel.Resources>
<Style TargetType="RadioButton">
<Setter Property="Margin" Value="0,0,7,3"/>
</Style>
</StackPanel.Resources>
<TextBlock Text="Background"/>
<RadioButton Content="Item 1"/>
<RadioButton Content="Item 2"/>
<RadioButton Content="Item 3"/>
</StackPanel>
Les images suivantes montrent l’espacement préféré des cases d’option dans un groupe.
Remarque
Si vous utilisez un contrôle RadioButtons de WinUI, l’espacement, les marges et l’orientation sont déjà optimisés.
Obtenir l’exemple de code
- Galerie WinUI : cet exemple montre tous les contrôles XAML dans un format interactif.
Rubriques 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