Share via

Conseils de conception de styles pour le contrôle RadioButton des contrôles Silverlight dans Blend

  • Article

JJ170621.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(fr-fr,VS.120).png

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 :

JJ170621.a79fb949-5f67-4c15-afd5-5f28abd2ae07(fr-fr,VS.120).png

É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 est sélectionné 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.

Focused

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 JJ170621.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,VS.120).png, ou choisissez Base dans le panneau Etats. 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, consultez Véhiculer des propriétés d'objet vers le modèle dans Blend.

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

RadioButton à l'état Normal

MouseOver

RadioButton à l'état MouseOver

Pressed

RadioButton à l'état Enfoncé

Disabled

RadioButton à l'état Désactivé

Focused

RadioButton à l'état Actif

Notes

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 la zone Valeur hexadécimale de l’Éditeur, tapez #FF808080.

  2. Double-cliquez sur **Grille **JJ170621.a87ee957-7fbf-4135-a6ab-6de7e63160aa(fr-fr,VS.120).png dans le panneau Outils pour créer un nouveau conteneur sur la planche graphique. Dans la catégorie Disposition du panneau Propriétés, à droite de Width, cliquez sur Options avancées, puis cliquez sur Rétablir. 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 de fermeture Grid (</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, Blend a transformé Grid en modèle pour un nouveau style de RadioButton et l’a appliqué à 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.

    Notes

    Vous pouvez également arrêter l’enregistrement de l’état en cliquant sur Indicateur de mode d’enregistrement JJ170621.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,VS.120).png dans le coin 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, définissez Opacité sur 50. Cliquez sur Base pour arrêter l’enregistrement de l’état.

  11. Dans le panneau États, cliquez sur Normal. Cliquez sur Ajouter la transition, puis cliquez sur Normal à MouseOver. Définissez Durée de transition sur 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 JJ170621.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,VS.120).png 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, définissez RadiusX sur 2.

    • RadiusX   Dans la catégorie Apparence, définissez RadiusY sur 2.

    • Margin   Dans la catégorie Disposition, définissez Margin sur les valeurs suivantes :

      • Left   -2

      • Droite   -2

      • Top   0

      • Bottom   0

  16. Cliquez sur **Rétablir l’étendue à **JJ170621.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(fr-fr,VS.120).png. 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 JJ170621.2ff91340-477e-4efa-a0f7-af20851e4daa(fr-fr,VS.120).png 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+Shift+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 dans Blend.

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 dans Blend

Concepts

Conseils de conception de styles pour les contrôles Silverlight courants dans Blend

Conseils de conception de styles pour les styles simples WPF dans Blend

Conseils de conception de styles pour les contrôles Silverlight courants dans Blend