Pour afficher l’article en anglais, activez la case d’option Anglais. Vous pouvez aussi afficher la version anglaise dans une fenêtre contextuelle en faisant glisser le pointeur de la souris sur le texte.
Traduction
Anglais

Conseils de conception de styles pour le contrôle CheckBox

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

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 :

JJ169932.1b2a1e45-ffdd-4ac8-941a-d6625b797fd0(fr-fr,VS.120).png

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 :

Nom de l’état

Description

Normal

Aspect du contrôle CheckBox en l’absence d’interaction avec ce dernier.

MouseOver

Aspect du contrôle CheckBox lorsque l’utilisateur place le pointeur dessus.

Pressed

Aspect du contrôle CheckBox 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 CheckBox lorsque la propriété IsEnabled a la valeur False.

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

Nom de l’état

Description

Unfocused

Aspect du contrôle CheckBox lorsqu’il ne possède pas le focus clavier.

Focused

Aspect du contrôle CheckBox lorsqu’il possède le focus clavier. Un utilisateur pourrait, par exemple, appuyer sur la touche Tabulation pour parcourir séquentiellement les objets d’une application jusqu’à ce que le focus clavier soit sur le contrôle CheckBox.

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

Nom de l’état

Description

Valid

Aspect du contrôle CheckBox lorsqu’il est valide.

InvalidUnfocused

Aspect du contrôle CheckBox lorsqu’il n’est pas valide et ne possède pas de focus.

InvalidFocused

Aspect du contrôle CheckBox lorsqu’il n’est pas valide et possède le focus.

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

Nom de l’état

Description

Unchecked

Aspect du contrôle CheckBox lorsque la propriété IsChecked a la valeur False.

Checked

Aspect du contrôle CheckBox lorsque la propriété IsChecked a la valeur True.

Indeterminate

Aspect du contrôle CheckBox lorsque la propriété IsThreeState est définie sur True et que la propriété IsChecked est définie sur Null.

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

JJ169932.df888d99-f032-4084-a93e-3de14ad1c19c(fr-fr,VS.120).png
Conseil 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 JJ169932.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,VS.120).pngsur 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.

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.

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



Normal

Case à cocher à l'état Normal



MouseOver

Case à cocher à l'état MouseOver



Pressed

Case à cocher à l'état Enfoncé



Disabled

Case à cocher à l'état Désactivé



Focused

Case à cocher à l'état Actif

Remarque Remarque

Il est important de noter que les graphiques précédents ne sont pas encore des contrôles CheckBox, mais une conception graphique qui peut être convertie en contrôles CheckBox.

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 JJ169932.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>
       <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 JJ169932.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,VS.120).png. 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 à JJ169932.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(fr-fr,VS.120).png. 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 JJ169932.2ff91340-477e-4efa-a0f7-af20851e4daa(fr-fr,VS.120).png 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.

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.

Afficher: