Conseils de conception de styles pour le contrôle Curseur

Le contrôle Slider constitue une plage de valeurs, où la valeur actuelle est représentée par la position d’un type d’objet appelé Thumb.

Comme avec tous les contrôles, vous pouvez modifier le contrôle Slider de sorte qu’il paraisse très différent de son apparence par défaut. Par défaut, le contrôle Slider se présente comme suit :

Propriétés d'intérêt du contrôle Slider

Vous pouvez rendre un contrôle Slider horizontal ou vertical en définissant la propriété Orientation sous Propriétés communes dans le panneau Propriétés. Vous pouvez également inverser le sens des nombres en sélectionnant la propriété IsDirectionReversed. Vous pouvez indiquer la plage de valeurs en définissant les propriétés Minimum et Maximum. La valeur actuelle (indiquée dans la propriété Value) doit être comprise entre les valeurs minimale et maximale. Vous pouvez définir d’autres propriétés dans la catégorie Propriétés communes, par exemple, LargeChange et SmallChange.

Vous pouvez définir ces propriétés des manières suivantes :

• Définir les propriétés de l’objet   Après avoir dessiné un objet Slider sur la planche graphique, vous pouvez définir directement les propriétés de l’objet. Pour que plusieurs contrôles Slider utilisent les mêmes valeurs, définissez ces propriétés dans un style.

• Définir les propriétés dans un style   Si vous définissez ces propriétés dans le style  de l’objet Slider, tout objet Slider qui a recours à ce style utilise ces valeurs. Vous pouvez remplacer les valeurs d’un objet spécifique.

  Pour plus d’informations, voir Créer un style.

Le contrôle Slider change l’apparence selon l’état correspondant. Vous pouvez modifier l’apparence de chaque état en mode de modification de modèle en sélectionnant un état dans le panneau États.

Pour plus d’informations, voir les états énumérés dans les tableaux suivants, et voir Définition d'états visuels différents pour un contrôle.

Parties d’un modèle Slider

Le contrôle Slider utilise un seul modèle : le modèle Slider. Chaque partie du modèle remplit un rôle dans l’apparence et le comportement de l’objet Slider auquel le modèle est appliqué.

D’autres objets peuvent exister dans le modèle pour personnaliser l’apparence du contrôle Slider, mais les parties répertoriées dans le tableau suivant sont liées à son comportement dans un contrat.

Pour visualiser les parties du modèle, ouvrez le panneau Parties lors de la modification du modèle.

Nom de la partie	Type d’objet	Description
HorizontalTemplate  VerticalTemplate	FrameworkElement	Un panneau de disposition contenant les objets qui définissent l’apparence du contrôle Slider en orientation horizontale (ou verticale). Cette partie est obligatoire.
HorizontalTrackLargeChangeDecreaseRepeatButton  VerticalTrackLargeChangeDecreaseRepeatButton	RepeatButton	Un objet qui diminue la propriété Value du contrôle Slider lorsque vous cliquez sur l’objet. La propriété Value est diminuée de façon incrémentielle par la valeur de la propriété LargeChange.
HorizontalThumb  VerticalThumb	Thumb	Un objet dont la position le long du Track représente la valeur actuelle du contrôle Slider. Cette partie est obligatoire.
HorizontalTrackLargeChangeIncreaseRepeatButton  VerticalTrackLargeChangeIncreaseRepeatButton	RepeatButton	Un objet qui diminue la propriété Value du contrôle Slider lorsque vous cliquez sur l’objet. La propriété Value est augmentée de façon incrémentielle par la valeur de la propriété LargeChange.

États d’un contrôle Slider

Par défaut, le contrôle Slider peut être dans l’un des trois états suivants dans le groupe d’états CommonStates, que vous pouvez afficher 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.
Désactivé	Aspect du contrôle Slider lorsque la valeur False est affectée à la propriété IsEnabled.

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

Nom de l’état	Description
Sans focus	Aspect du contrôle Slider lorsqu'il ne possède pas le focus clavier.
Avec focus	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 font partie de la même catégorie logique, et qui ne peuvent pas être affichés simultanément. Par exemple, le groupe CommonStates comprend des états associés à l’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.

Pour convertir des objets en contrôle Slider

Pour modifier le modèle d’un contrôle Slider, effectuez l’une des opérations suivantes :

• Dessinez un contrôle Slider  sur la planche graphique, puis créez une copie du modèle par défaut.

  Pour plus d’informations, voir Créer ou modifier un modèle.

• Concevez l’apparence de votre contrôle Slider en dessinant des objets ou en important les conceptions graphiques, puis utilisez la commande Créer un contrôle.

Si vous utilisez la commande Créer un contrôle, suivez ces étapes pour vous assurer de créer tous les objets requis par le modèle Slider :

1. Regroupez tous les objets souhaités pour définir l’apparence de votre contrôle Slider dans un panneau de disposition Grille.

2. Sélectionnez le nouvel objet Grid, puis, dans le menu Outils, cliquez sur Créer un contrôle.

3. Dans la boîte de dialogue qui s’affiche, sélectionnez Slider, nommez votre modèle, et sélectionnez l’emplacement de stockage du modèle.

   Pour plus d’informations sur les emplacements, voir Créer une ressource.

4. Après avoir cliqué sur OK, Microsoft Expression Blend passe en mode de modification de modèle et affiche les objets qui composent votre contrôle Slider vertical.

5. Le modèle d’un contrôle Slider comprend les parties utilisées lors de l’orientation horizontale ou verticale de l’objet Slider. Vous pouvez attribuer toutes les parties du panneau Parties aux objets de votre modèle, ou seulement les parties relatives à une seule orientation du contrôle Slider. Si vous disposez d’un seul ensemble d’objets, mais que vous souhaitez concevoir le modèle pour les deux orientations du contrôle Slider, vous pouvez dupliquer vos objets et réorganiser l’ensemble dupliqué.

   Conseil :

   Si vous n’attribuez que les parties verticales du panneau Parties aux objets de votre modèle, les objets disparaissent de la planche graphique si l’objet Slider (auquel le modèle est appliqué) est configuré pour un affichage horizontal. Pour modifier l’orientation de l’objet Slider, cliquez sur [Slider] dans la barre de navigation en haut de la planche graphique pour rétablir l’étendue d’édition de l’objet Slider, définissez la propriété Orientation sur Vertical, puis utilisez le troisième bouton de la barre de navigation pour revenir au mode de modification de modèle.

6. Pour créer l’objet de la partie HorizontalTemplate (ou VerticalTemplate), effectuez les opérations suivantes :

   1. Dessinez un panneau de disposition Grille  contenant trois colonnes (ou trois lignes). Les trois colonnes doivent être dimensionnées à Auto, Auto, et à une taille d’étoile (*), respectivement.

      Pour plus d’informations, voir Ajouter ou supprimer une ligne ou une colonne et Modifier l’option de taille d’une ligne ou d’une colonne.

   2. Cliquez avec le bouton droit sur votre nouvel objet Grid, pointez sur Créer une partie de Slider, puis cliquez sur HorizontalTemplate (ou sur VerticalTemplate).

7. L'espace dans lequel l'objet Thumb se déplace est appelé la piste. La piste n'est pas une partie du modèle ; elle est donc facultative. Placez un ou des objets souhaités pour représenter la piste dans l’objet HorizontalTemplate (ou VerticalTemplate), s’étendant sur les trois colonnes (ou lignes).

   Conseil :
   Pour qu’un objet s’étende sur plusieurs colonnes (ou lignes), sélectionnez l’objet, puis, dans le panneau Propriétés, définissez la propriété RowSpan (ou ColumnSpan).

8. Étant donné qu’un objet Thumb peut posséder son propre modèle, les objets à utiliser doivent être convertis en contrôle Thumb en effectuant les opérations suivantes :

   1. Regroupez les objets qui représentent votre objet Thumb dans un panneau de disposition.

   2. Déplacez le nouveau panneau de disposition dans la colonne du milieu (ou ligne) de votre objet HorizontalTemplate (ou VerticalTemplate).

      Conseil :
      Pour placer un objet dans une colonne spécifique (ou ligne), sélectionnez l’objet, puis, dans le panneau Propriétés, définissez la propriété Colonne (ou Ligne). Le numéro de la première colonne (ou ligne) est 0.

   3. Cliquez avec le bouton droit sur le nouveau panneau de disposition, pointez sur Créer une partie de Slider, puis cliquez sur HorizontalThumb (ou sur VerticalThumb).

   4. Dans la boîte de dialogue Créer une partie, sélectionnez l’emplacement de stockage du modèle.

   5. En mode de modification de modèle pour le nouvel objet Thumb, vous pouvez continuer à faire des modifications, par exemple en sélectionnant des états dans le panneau États pour modifier l'aspect de l'objet Thumb dans ces états. Si vous souhaitez disposer d'une marge dans l'objet Thumb, définissez les propriétés de Marge dans l'objet racine.

   6. Pour revenir au mode de modification de modèle pour l’objet Slider, cliquez sur le bouton Étendue supérieure  dans le panneau Objets et chronologie, ou cliquez sur VerticalThumb (ou sur HorizontalThumb) dans la barre de navigation en haut de la planche graphique.

   7. Définissez les propriétés Largeur et Hauteur du nouvel objet Thumb sur des valeurs spécifiques afin que la colonne du milieu (ou ligne) soit redimensionnée automatiquement pour ajuster l’objet Thumb.

9. Si vous souhaitez que l'utilisateur puisse cliquer sur un bouton à l'une ou l'autre extrémité de la piste pour déplacer l'objet Thumb par petits incréments, procédez comme suit :

   1. Groupez les objets que vous souhaitez utiliser pour le bouton de diminution dans un panneau de disposition.

   2. Déplacez le nouveau panneau de disposition dans la première colonne de votre objet HorizontalTemplate (ou la première ligne de l’objet VerticalTemplate).

   3. Cliquez avec le bouton droit sur le panneau de disposition, pointez sur Créer une partie de Slider, puis cliquez sur HorizontalTrackLargeChangeDecreaseRepeatButton (ou sur VerticalTrackLargeChangeDecreaseRepeatButton).

   4. Dans la boîte de dialogue Créer une partie, sélectionnez l’emplacement de stockage du modèle.

   5. En mode de modification de modèle pour le nouvel objet RepeatButton, vous pouvez continuer à effectuer des modifications, par exemple supprimer l'objet ContentPresenter. Si vous souhaitez disposer d'une marge dans l'objet RepeatButton, définissez les propriétés de Marge dans l'objet racine.

   6. Pour revenir au mode de modification de modèle pour l’objet Slider, cliquez sur le bouton Étendue supérieure  dans le panneau Objets et chronologie, ou cliquez sur HorizontalTrackLargeChangeDecreaseRepeatButton (ou sur VerticalTrackLargeChangeDecreaseRepeatButton) dans la barre de navigation en haut de la planche graphique.

   7. Ajustez les propriétés sous Disposition dans le panneau Propriétés pour que l’objet RepeatButton s’affiche à l’emplacement souhaité. Vous pouvez aussi réorganiser vos objets s'ils sont masqués par d'autres objets.

      Pour plus d’informations, voir Modifier l'ordre d'empilement des objets.

   8. Répétez ces étapes pour l’objet HorizontalTrackLargeChangeIncreaseRepeatButton (ou VerticalTrackLargeChangeIncreaseRepeatButton), en le déplaçant dans la dernière colonne de l’objet HorizontalTemplate (ou la dernière ligne de l’objet VerticalTemplate).

10. Vous pouvez continuer à modifier votre modèle dans ce mode. Par exemple, ajoutez ou modifiez des objets, ou sélectionnez un état dans le panneau États pour modifier l’apparence de votre modèle dans cet état.

11. Envisagez de lier certaines des propriétés de pinceau des objets de votre modèle aux propriétés suivantes dans l'objet Slider qui utilisera finalement votre modèle :

    • Arrière-plan

    • BorderBrush

    • Premier plan

    • BorderThickness

    Pour plus d’informations, voir Véhiculer des propriétés d'objet vers le modèle.

12. Pour quitter le mode de modification de modèle, cliquez sur [Slider] dans la barre de navigation en haut de la planche graphique, ou cliquez sur Étendue supérieure  dans le panneau Objets et chronologie.

    Pour plus d’informations sur l’application de votre nouveau modèle Slider à d’autres objets Slider, 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 Slider Microsoft 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

SimpleSlider

Définition d'un style pour un contrôle prenant en charge les modèles