Conseils d’application d’un style au contrôle RadioButton

Vous pouvez utiliser le modèle de contrôle RadioButton intégré pour créer un modèle RadioButton personnalisé. Par défaut, le contrôle RadioButton se présente comme suit :

États du contrôle RadioButton

Par défaut, le contrôle RadioButton peut être dans l’un des quatre états suivants dans le groupe d’états CommonStates, que vous pouvez afficher dans le panneau États lors de la modification d’un modèle RadioButton  :

Nom de l'état	Description
Normal	Aspect du contrôle RadioButton en l’absence d’interaction avec ce dernier.
MouseOver	Aspect du contrôle RadioButton lorsque l’utilisateur place le pointeur dessus.
Pressed	Aspect du contrôle RadioButton lorsque l’utilisateur clique dessus ou lorsque le contrôle possède le focus et que l’utilisateur appuie sur Entrée ou sur Espace.
Disabled	Aspect du contrôle RadioButton lorsque la propriété IsEnabled a la valeur False .

Le contrôle RadioButton peut être dans l’un des deux états suivants du groupe d’états FocusStates :

Nom de l'état	Description
Unfocused	Aspect du contrôle RadioButton lorsqu’il ne possède pas le focus clavier.
Avec focus	Aspect du contrôle RadioButton lorsqu’il possède le focus clavier. Un utilisateur pourrait, par exemple, appuyer sur la touche Tabulation pour parcourir en séquence les objets d’une application jusqu’à ce que le focus clavier soit sur le contrôle RadioButton .

Le contrôle RadioButton peut être dans l’un des trois états suivants du groupe d’états CheckStates :

Nom de l'état	Description
Unchecked	Aspect du contrôle RadioButton lorsque la propriété IsChecked a la valeur False.
Checked	Aspect du contrôle RadioButton lorsque la propriété IsChecked a la valeur True.
Indeterminate	Aspect du contrôle RadioButton lorsque la propriété IsThreeState a la valeur True.

Le contrôle RadioButton peut être dans l’un des trois états suivants du groupe d’états ValidationStates :

Nom de l'état	Description
Valid	Aspect du contrôle RadioButton lorsqu’il est valide.
InvalidUnfocused	Aspect du contrôle RadioButton lorsqu’il n’est pas valide et ne possède pas le focus clavier.
InvalidFocused	Aspect du contrôle RadioButton lorsqu’il n’est pas valide et possède le focus clavier.

Conseil :

Un groupe d'états contient les états visuels qui appartiennent à une même catégorie logique et ne peuvent pas être affichés simultanément. Le groupe CommonStates, par exemple, comprend des états qui se rapportent à une interaction utilisateur avec un périphérique d'entrée tel que la souris. Un seul état d'un groupe d'états peut être affiché à la fois, mais un état d'un groupe peut être affiché en même temps qu'un état d'un autre groupe d'états.

Lorsque vous sélectionnez un état, l'enregistrement de l'état est activé et toutes les modifications que vous effectuez sont enregistrées pour cet état. Pour désactiver l'enregistrement de l'état, cliquez sur le bouton d'enregistrement ou sélectionnez Base dans le panneau États. Pour modifier l'apparence de votre contrôle lorsque deux états distincts sont actifs, vous pouvez épingler un aperçu d'un état dans un groupe d'états pendant que vous modifiez un état dans un autre groupe d'états.

Liaison de modèle

Vous pouvez lier par modèle les propriétés Background , BorderBrush , Foreground , BorderThickness ou Padding . Pour plus d'informations, voir Véhiculer des propriétés d'objet vers le modèle.

Pour convertir des objets en contrôle RadioButton

Les images suivantes sont une conception complète (comp) d’une case d’option qui inclut les états Normal , MouseOver , Pressed , Disabled et Focused  :

Normal

MouseOver

Enfoncé

Désactivé

Avec focus

Remarque :
Il est important de noter que les graphiques précédents ne sont pas encore des contrôles RadioButton , mais des conceptions graphiques qui peuvent être converties en contrôles RadioButton .

Cet exemple montre comment utiliser le code XAML à l’étape 4 de la procédure suivante.

1. Ouvrez un nouveau projet Microsoft Silverlight. Dans la catégorie Pinceaux, cliquez sur Pinceau de couleur unie. Dans l’Éditeur, dans la zone Valeur hexadécimale, tapez #FF808080 .

2. Double-cliquez sur ****Grille **** dans le panneau Outils pour créer un nouveau conteneur sur la planche graphique. Dans le panneau Propriétés, dans la catégorie Disposition, à droite de Largeur, cliquez sur Options avancées, puis cliquez sur Réinitialiser. Répétez l’opération pour Hauteur.

3. En mode Code, recherchez le code suivant, puis supprimez la barre oblique de fermeture (/).

   <Grid HorizontalAlignment="Left" VerticalAlignment="Top"/>
   

4. Copiez et collez ensuite le code suivant dans votre nouveau projet, après le code que vous avez localisé à l’étape 3.

   <Grid>
      <Ellipse Stroke="#FF3C3C3C" Width="12" Height="12" HorizontalAlignment="Left" Fill="Transparent"/>
      <Ellipse x:Name="bullet" Fill="White" Width="6" Height="6" HorizontalAlignment="Left" Margin="3,0,0,0"/>
      <TextBlock Foreground="White" Text="Lorem" Margin="15,0,0,0" VerticalAlignment="Center"/>
   </Grid>
   

5. Ajoutez une balise Grid de fermeture (</Grid>) après le code que vous venez de coller.

6. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur Grille, puis cliquez sur Créer un contrôle. Dans la boîte de dialogue Créer un contrôle, cliquez sur RadioButton, puis cliquez sur OK.

   En mode Code, notez que le code que vous avez collé lors de l’étape précédente a été remplacé par le code d’un nouvel objet RadioButton. En outre, Expression Blend a transformé Grid en modèle pour un nouveau style RadioButton et a appliqué ce modèle à Grid .

   L’objet TextBlock situé dans la grille d’origine avait un premier plan blanc, donc le nouveau style RadioButton possède un premier plan blanc également. Le texte de l’élément TextBlock était Lorem , ce qui devient donc la propriété Content du nouvel objet RadioButton . Dans le modèle, l’objet TextBlock a été remplacé par un objet ContentPresenter qui possède les mêmes propriétés de disposition que l’objet TextBlock .

7. Pour ajouter un état MouseOver au RadioButton, procédez comme suit :

   1. Dans le panneau Objets et chronologie, cliquez sur Ellipse.

   2. Dans le panneau États, cliquez sur MouseOver.

   3. Dans le panneau Propriétés, dans la catégorie Pinceaux, cliquez sur Remplir et dans la catégorie Éditeur, affectez à Alpha la valeur 25 .

   4. Revenez au panneau États, puis cliquez sur Base pour arrêter l’enregistrement de l’état.

   Remarque :
   Vous pouvez également mettre fin à l’enregistrement de l’état en cliquant sur Indicateur du mode d’enregistrement  dans l’angle supérieur gauche de la fenêtre du document.

8. Cliquez avec le bouton droit sur MouseOver dans le panneau États, cliquez sur Copier l’état vers, puis cliquez sur Pressed.

9. Pour créer le décalage, l’état Pressed étant sélectionné dans le panneau États, sélectionnez Grille dans le panneau Objets et chronologie. Dans la catégorie Transformer du panneau Propriétés, affectez à X et Y la valeur 1 . Cliquez sur Base pour arrêter l’enregistrement de l’état. Notez que Grille s’appelle maintenant grille.

10. Dans le panneau États, cliquez sur Disabled. Dans la catégorie Apparence du panneau Propriétés, affectez à Opacité la valeur 50 . Cliquez sur Base pour arrêter l’enregistrement de l’état.

11. Dans le panneau États, cliquez sur Normal. Cliquez sur Ajouter une transition, puis cliquez sur Normal à MouseOver. Affectez à Durée de la transition la valeur 0,2 . Cliquez sur Base pour arrêter l’enregistrement de l’état.

12. Dans le panneau Objets et chronologie, cliquez sur Puce. Dans la catégorie Apparence du panneau Propriétés, affectez à Opacité la valeur 0 .

13. Dans le panneau États, cliquez sur Checked. Dans la catégorie Apparence du panneau Propriétés, affectez à Opacité la valeur 100 . Cliquez sur Base pour arrêter l’enregistrement de l’état.

14. La conception complète inclut un rectangle bleu autour de la case d’option lorsque l’état de celle-ci est Focused. Pour créer le rectangle, ajoutez un nouvel objet Rectangle avec l’état Focused sélectionné. Ce procédé s’appelle « dessin dans l’état », ce qui signifie que le nouvel objet est uniquement visible dans l’état dans lequel vous avez dessiné l’objet. Pour créer le rectangle dans l’état Focused, dans le panneau États, cliquez sur Focused, puis double-cliquez sur l’outil Rectangle dans le volet Outils pour créer le nouvel objet Rectangle.

15. L’étape suivante consiste à définir les propriétés du nouveau rectangle. Les propriétés doivent être modifiées dans l’état Base, pas dans l’état Focused. Toutefois, le rectangle est actuellement transparent et n’est pas visible dans l’état Base. Cliquez sur le bouton d’enregistrement  pour maintenir la visibilité du rectangle. Notez que le nouveau rectangle (rectangle) est toujours sélectionné dans le panneau Objets et chronologie. Dans le panneau Propriétés, définissez les propriétés suivantes pour rectangle :

    • Remplir   Dans la catégorie Pinceaux, cliquez sur Aucun pinceau.

    • Trait   Dans la catégorie Pinceaux, cliquez sur Pinceau de couleur unie. Dans l’Éditeur, définissez la couleur sur #FF00C0FF .

    • RadiusX   Dans la catégorie Apparence, affectez à RadiusX la valeur 2 .

    • RadiusY   Dans la catégorie Apparence, affectez à RadiusY la valeur 2 .

    • Marge   Dans la catégorie Disposition, affectez à Marge les valeurs suivantes :

      • Gauche    -2

      • Droite    -2

      • Haut    0

      • Bas    0

16. Cliquez sur ****Rétablir l’étendue à ****. Avec l’objet RadioButton sélectionné dans le panneau Objets et chronologie, appuyez sur Ctrl+C pour le copier. Appuyez à quatre reprises sur Ctrl+V pour coller quatre autres contrôles RadioButton dans le conteneur. Utilisez l’outil Sélection  pour organiser les cases à cocher dans une colonne. Avec l’un des objets RadioButton sélectionné dans le panneau Objets et chronologie, désactivez la case à cocher IsEnabled dans la catégorie Propriétés communes du panneau Propriétés.

17. Générez votre projet (Ctrl+Maj+B) et testez-le en appuyant sur F5.

Pour plus d’informations sur l’application de votre nouveau modèle RadioButton à d’autres objets RadioButton , voir Appliquer ou supprimer une ressource.

Références

Vous trouverez des informations détaillées sur les propriétés et événements du contrôle RadioButton de Silverlight dans la Galerie de contrôles Silverlight  sur MSDN.

Voir aussi

Tâches

Véhiculer des propriétés d'objet vers le modèle

Concepts

Conseils de conception de styles pour les contrôles Silverlight courants
Application d’un style à un contrôle prenant en charge les modèles

Copyright © 2011 Microsoft Corporation. Tous droits réservés.