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

  • Article

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

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

JJ170228.42dd6b3d-3876-435a-b401-1f9d2c815454(fr-fr,VS.120).png

Parties d’un modèle Slider

Le modèle Slider comprend deux jeux de parties : un jeu pour curseur vertical et un jeu pour curseur horizontal. Les noms de parties sont précédés du mot « vertical » ou « horizontal », selon l’orientation du curseur.

Conseil

Pour afficher les parties du modèle, ouvrez le panneau Parties lorsque vous modifiez le modèle.

JJ170228.7db0aaf3-dcb4-427a-9ebc-3d192e34df54(fr-fr,VS.120).png

Nom de la partie

Type d’objet

JJ170228.B1_1(fr-fr,VS.120).png HorizontalTemplate

JJ170228.B1_2(fr-fr,VS.120).png VerticalTemplate

FrameworkElement

JJ170228.B1_3(fr-fr,VS.120).png HorizontalTrackLargeChangeDecreaseRepeatButton

JJ170228.B1_4(fr-fr,VS.120).png VerticalTrackLargeChangeDecreaseRepeatButton

RepeatButton

JJ170228.B1_5(fr-fr,VS.120).png HorizontalThumb

JJ170228.B1_6(fr-fr,VS.120).png VerticalThumb

Thumb

JJ170228.B1_7(fr-fr,VS.120).png HorizontalTrackLargeChangeIncreaseRepeatButton

JJ170228.B1_8(fr-fr,VS.120).png VerticalTrackLargeChangeIncreaseRepeatButton

RepeatButton

Conseils sur le curseur

JJ170228.collapse_all(fr-fr,VS.120).gifPartie Template

Cette partie est obligatoire. La partie template contient tous les éléments qui composent le Slider dans une orientation particulière.

Pour créer une partie template, créez une grille nommée HorizontalTemplate ou VerticalTemplate qui contient trois colonnes (pour l’orientation horizontale) ou trois lignes (pour l’orientation verticale) dont le dimensionnement est défini sur Auto, Auto et Étoile.

JJ170228.collapse_all(fr-fr,VS.120).gifPartie Curseur

Cette partie est obligatoire. Le curseur de position est l’élément mobile dans le curseur.

Pour transformer l’objet ou les objets qui représentent le curseur en contrôle Thumb (HorizontalThumb ou VerticalThumb), placez la partie Thumb dans la colonne (ou ligne) centrale de la partie Root. Ensuite, définissez les propriétés Width et Height de la partie Thumb afin que la colonne (ou ligne) soit redimensionnée en fonction du curseur.

JJ170228.collapse_all(fr-fr,VS.120).gifTrack

L’espace dans lequel le curseur de déplace se nomme le track. Le track n’est pas une partie et est facultatif.

Pour inclure un track, placez le objet ou les objets représentant le track dans la partie Template couvrant les trois colonnes (ou lignes).

JJ170228.collapse_all(fr-fr,VS.120).gifDéplacement du curseur le long du track par grands incréments

Pour que l’utilisateur puisse cliquer sur le track de chaque côté du curseur pour déplacer ce dernier par grands incréments, placez un contrôle RepeatButton dans les deux colonnes (ou lignes) de chaque côté de la partie Thumb et nommez-les VerticalLargeDecrease et VerticalLargeIncrease (ou HorizontalLargeDecrease et HorizontalLargeIncrease). Pour que les contrôles RepeatButton fonctionnent mais soient invisibles, attribuez-leur une Opacity nulle. Vous pouvez également appliquer un modèle qui contient un seul objet avec une Opacity nulle aux contrôles RepeatButton.

États d’un contrôle Slider

Par défaut, le contrôle Slider peut se trouver dans l’un des trois états suivants dans le groupe d’états CommonStates qui est visible dans le panneau États lors de la modification d’un modèle Slider :

Nom de l’état

Description

Normal

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

MouseOver

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

Disabled

Aspect du contrôle Slider lorsque la propriété IsEnabled est définie sur la valeur False.

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

Nom de l’état

Description

Unfocused

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

Focused

Aspect du contrôle Slider 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 Slider.

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 JJ170228.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 Slider

L’image suivante est une conception complète (comp) d’un curseur créé par un concepteur qui inclut les états MouseOver et Pressed de la partie HorizontalThumb.

Normal

Curseur à l'état Normal

MouseOver

Curseur à l'état MouseOver

Pressed

Curseur à l'état Enfoncé

Disabled

Curseur à l'état Désactivé

Cet exemple utilise le code XAML dans l’étape 2 de la procédure suivante, qui correspond aux graphiques précédents pour créer une barre de défilement personnalisée à l’aide du modèle de contrôle Slider.

Conseil

Cliquez sur Mode fractionné pour afficher les modifications en modes Création et Code lorsque vous suivez cette procédure.

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

    <Grid x:Name="LayoutRoot" Background="White"/>

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

    <Grid Width="146" Height="17" >
<Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" Margin="0,6" />
<Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Width="7"/>
</Grid>

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

  4. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur Grid, puis cliquez sur Créer un contrôle. Dans la boîte de dialogue Créer un contrôle, cliquez sur Curseur, puis cliquez 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 Curseur. En outre, Blend a transformé Grid en modèle pour un nouveau style de Slider et l’a appliqué à Grid.

  5. Pour ajouter des colonnes à la grille de partie Template, en mode Création, cliquez sur la règle bleue et déplacez là sur la gauche du contrôle pour ajouter de nouvelles lignes comme illustré dans l’image suivante :

    Si vous ajoutez les lignes comme indiqué, les parties figureront dans les lignes appropriées. Track a un ColumnSpan de 3, et thumb se situe dans Column 1.

    Notes

    La numérotation commence à 0. Les 3 colonnes sont donc numérotées de 0 à 2.

  6. Pour transformer la racine du modèle en partie HorizontalTemplate, dans le panneau Objets et chronologie, cliquez avec le bouton droit sur Grille, cliquez sur Créer une partie de curseur, puis cliquez sur HorizontalTemplate. Veuillez noter que Grid a été renommé HorizontalTemplate.

  7. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur thumb, puis cliquez sur Créer une partie de curseur puis cliquez sur HorizontalThumb.

  8. Pour ajouter des états à la partie HorizontalThumb, effectuez les opérations suivantes :

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

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

    3. Dans le panneau Propriétés, définissez Remplir sur #FFCCCCCC.

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

      Notes

      Mettez également fin à l’enregistrement de l’état en cliquant sur Indicateur du mode d’enregistrementJJ170228.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(fr-fr,VS.120).png dans l’angle supérieur gauche de la fenêtre du document.

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

  10. Pour créer le décalage, avec l’état Pressed sélectionné dans le panneau États, dans la catégorie Transformer dans le panneau Propriétés, définissez X et Y sur 1. 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. Revenez au mode d’édition de modèle pour le contrôle Slider [SliderStyle1 (modèle Slider)] en cliquant sur Rétablir l’étendue à JJ170228.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(fr-fr,VS.120).png dans le panneau Objets et chronologie.

  13. Dans le panneau Objets et chronologie, cliquez sur HorizontalThumb. Dans la catégorie Disposition du panneau Propriétés, cliquez sur Options avancées en regard de Margin puis cliquez sur Réinitialiser.

  14. Dans le panneau Objets et chronologie, cliquez sur HorizontalTemplate. Dans le panneau Parties, double-cliquez sur HorizontalTrackLargeChangeDecreaseRepeatButton pour créer cette partie et en faire un enfant de HorizontalTemplate. Dans la catégorie Apparence du panneau Propriétés, définissez Opacité sur 0.

  15. Dans le panneau Objets et chronologie, cliquez sur HorizontalTemplate. Dans le panneau Parties, double-cliquez sur HorizontalTrackLargeChangeIncreaseRepeatButton pour créer cette partie et en faire un enfant de HorizontalTemplate. Dans la catégorie Apparence du panneau Propriétés, définissez Opacité sur 0.

  16. Pour les colonnes 0 et 1, cliquez sur l’icône Étoile JJ170228.1b4edaf6-b6a8-4498-80dc-949375fa610d(fr-fr,VS.120).png deux fois jusqu'à ce que l'icône Automatique icon JJ170228.aa9ec064-22f8-4b62-9eed-3f4772362d22(fr-fr,VS.120).png apparaisse. Pour la colonne 2, assurez-vous que l’icône Étoile s’affiche. Cliquez sur le séparateur de la colonne du milieu, puis, dans le panneau Propriétés, cliquez sur Afficher les propriétés avancées. À droite de la valeur MinHeight, cliquez sur Options avancées, puis cliquez sur Réinitialiser.

  17. Dans le panneau Objets et chronologie, cliquez sur HorizontalTemplate. Dans le panneau États, cliquez sur Disabled. Dans la catégorie Apparence du panneau Propriétés, définissez Opacité sur 50.

  18. Générez votre projet en appuyant sur Ctrl+Shift+B. Une fois la génération terminée, exécutez votre projet en appuyant sur F5, puis testez votre barre de défilement.

Références

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

Voir aussi

Tâches

Lier un objet à la saisie utilisateur ou à d'autres valeurs internes

Concepts

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

SimpleSlider (prise en charge de WPF dans Blend)