Conseils de conception de styles pour le contrôle CheckBox

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

États d’un contrôle CheckBox

Par défaut, le contrôle CheckBox 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 CheckBox :

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

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

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

Par défaut, les états activés d’un contrôle CheckBox ressemblent à ceci :

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 sur la planche graphique, 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, consultez Carry object properties through to the template.

Pour convertir des objets en contrôle CheckBox

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

Normal

MouseOver

Pressed

Disabled

Focused

Cet exemple utilise le code XAML dans l’étape 4 de la procédure suivante, qui correspond à l’état Normal dans les graphiques précédents.

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 ** 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>
      <Rectangle Stroke="#FF333333" Height="12" Width="12" HorizontalAlignment="Left" Fill="Transparent"/>
      <Path x:Name="check" Height="8" Width="8" Fill="White" Stretch="Fill" 
         Data="M14.8,6.2 C14.9,6.2 14.9,6.3 14.9,6.2 C14.9,6.3 14.9,6.3 14.8,6.5 
         C14.1,7.2 13.4,8.1 12.6,9.2 C11.8,10.4 11.1,11.7 10.6,13 
         C10.4,13.5 10.2,13.8 10.2,13.9 C10.1,14.1 9.8,14.1 9.4,14.1 
         C9.1,14.1 8.9,14.1 8.9,14 C8.8,14 8.7,13.8 8.5,13.5 
         C8.2,13 7.8,12.6 7.5,12.2 C7.3,12 7.2,11.9 7.2,11.8 
         C7.2,11.6 7.3,11.5 7.5,11.3 C7.7,11.2 7.9,11.1 8,11.1 
         C8.2,11.1 8.5,11.2 8.7,11.4 C9,11.6 9.3,12 9.6,12.5 
         C10,11.8 10.3,11.1 10.6,10.4 C11,9.7 11.4,9.11.8,8.5 
         C12.3,7.8 12.6,7.3 12.9,7 C13.1,6.8 13.3,6.6 13.4,6.5 
         C13.5,6.5 13.6,6.4 13.8,6.4 C14.3,6.3 14.6,6.2 14.8,6.2 z"
         HorizontalAlignment="Left" Margin="2,2,0,2"/>
      <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 CheckBox, puis sur OK.

   En mode Code, notez que le code que vous avez collé à l’étape précédente a été remplacé par celui pour un nouveau contrôle CheckBox. En outre, Blend a fait du contrôle CheckBox un modèle pour un nouveau style CheckBox et l’a appliqué à CheckBox.

   Le contrôle TextBlock dans la composition possède un premier plan blanc. Le contrôle TextBlock dans la composition contient également le texte Lorem. En outre, le contrôle TextBlock dans le code précédent a été remplacé par un contrôle ContentPresenter avec les mêmes propriétés que le contrôle TextBlock d’origine.

7. Pour ajouter un état MouseOver au contrôle Button, effectuez les opérations suivantes :

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

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

   3. Dans le panneau Propriétés, sélectionnez Remplir et définissez la propriété Alpha sur 25.

      Notez que Rectangle a été renommé rectangle.

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

8. Pour appliquer les mêmes propriétés à l’état Pressed, dans le panneau États, cliquez avec le bouton droit sur MouseOver, cliquez sur Copier l’état vers, puis cliquez sur Pressed.

9. Pour décaler le modèle CheckBox lorsque la case à cocher se trouve dans l’état Pressed, effectuez les opérations suivantes :

   1. Dans le panneau États, cliquez sur Pressed.

   2. Dans le panneau Objets et chronologie, cliquez sur Grille.

   3. Dans la catégorie Transformer de l’onglet Déplacer du panneau Propriétés, définissez X et Y sur 1.

      Notez que Grille dans le panneau Objets et chronologie a été renommé grille.

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

10. Dans le panneau États, cliquez sur Disabled. Dans le panneau Objets et chronologie, cliquez sur grille. Dans le panneau Propriétés, définissez Opacité sur 50. Revenez au panneau États, puis cliquez sur Base pour arrêter l’enregistrement de l’état.

11. Pour ajouter de l’interactivité au contrôle CheckBox, effectuez les opérations suivantes :

    1. Dans le panneau États, cliquez sur Normal, sur Ajouter une transition, puis sur Normal à MouseOver.

    2. Dans la zone Durée de la transition, tapez 0,2.

    3. Cliquez sur Base pour arrêter l’enregistrement de l’état.

    Désormais, lorsque vous placez le pointeur sur le contrôle CheckBox, la transition entre l’état Normal et l’état MouseOver prendra 0,2 seconde. Toutes les autres transitions se produisent instantanément.

12. Dans le panneau Objets et chronologie, cliquez sur cocher. Dans la catégorie Apparence du panneau Propriétés, définissez Opacité sur 0. Dans le panneau États, cliquez sur Activé, puis, dans le panneau Propriétés, définissez Opacité sur 100. Cliquez sur Base pour arrêter l’enregistrement de l’état.

13. La composition comprend un rectangle arrondi bleu clair dans l’état Focused qui n’est pas présent dans le XAML de l’état Normal.

    Pour créer le rectangle, ajoutez un nouvel objet Rectangle avec l’état Focused sélectionné. C’est ce que l’on appelle « dessin dans l’état », ce qui signifie que le nouvel objet est visible uniquement 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 du panneau Outils pour créer l’objet Rectangle.

14. L’étape suivante consiste à définir les propriétés du nouveau rectangle. Les propriétés doivent être modifiées dans Base, pas dans l’état Focused. Toutefois, le rectangle est actuellement transparent et ne sera pas visible dans Base. Pour maintenir la visibilité du rectangle, cliquez sur **Indicateur de mode d’enregistrement **. Notez que le nouveau rectangle (rectangle1) est toujours sélectionné dans le panneau Objets et chronologie.

    Dans le panneau Propriétés, définissez les propriétés suivantes pour rectangle1 :

    • 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

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

16. 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 CheckBox à d’autres objets CheckBox, 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 CheckBox de Microsoft Silverlight dans la Galerie de contrôles Silverlight sur MSDN.

Voir aussi

Concepts

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

SimpleCheckBox (prise en charge de WPF dans Blend)

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