Conseils de conception de styles pour le contrôle ComboBox

Le contrôle ComboBox représente un objet qui combine une zone de texte non modifiable et un contrôle Popup. Le contrôle Popup contient un contrôle ListBox qui permet aux utilisateurs de sélectionner un élément dans une liste.

Comme avec tous les contrôles, le contrôle ComboBox (comprenant le contrôle Popup, le contrôle ListBox et chaque contrôle ComboBoxItem contenu dans l'objet ComboBox) peut être modifié jusqu'à avoir un aspect très différent de son aspect par défaut. Par défaut, le contrôle ComboBox a l'aspect suivant :

Propriétés intéressantes du contrôle ComboBox

Vous pouvez définir l'élément qui est sélectionné dans le contrôle ComboBox en définissant la propriété SelectedIndex sous Propriétés communes dans le panneau Propriétés. Une valeur de -1 affiche l'objet ComboBox sans aucune sélection effectuée. Une valeur de 0 affiche l'objet ComboBox avec le premier élément sélectionné.

Pour ajouter des éléments à un contrôle ComboBox, vous pouvez ajouter manuellement des objets ComboBoxItem ou vous pouvez lier une collection de données à l'objet ComboBox pour que les éléments s'affichent automatiquement.

Pour plus d'informations, voir Lier un objet à des données et Création d'un échantillon de données.

Parties du modèle ComboBox

Le contrôle ComboBox utilise un modèle pour définir l'aspect de la zone déroulante, de la flèche de zone déroulante et de la fenêtre contextuelle : le modèle ComboBox. Chaque partie du modèle joue un rôle dans l'aspect et le comportement de l'objet ComboBox auquel le modèle est appliqué.

Conseil :

Pour appliquer un style aux éléments que contient un contrôle ComboBox, vous devez modifier d'autres modèles. Par exemple, lorsqu'un contrôle ComboBox est lié à des données, le modèle qu'il utilise pour appliquer un style aux éléments qu'il contient est un modèle d'éléments générés (un modèle de données). Lorsqu'un contrôle ComboBox n'est pas lié à des données, il n'a pas de modèle qu'il applique aux éléments qu'il contient. Au lieu de cela, vous modifiez le modèle des éléments eux-mêmes, comme le modèle ComboBoxItem.

D'autres objets peuvent exister dans le modèle pour habiller le contrôle ComboBox, mais les parties répertoriées dans le tableau suivant sont liées à son comportement dans un contrat.

Pour afficher les parties du modèle, ouvrez le panneau Parties lorsque vous modifiez le modèle. Dans le panneau Objets et chronologie, une icône  s'affiche en regard de tout objet qui joue le rôle d'une partie dans le panneau Parties.

Nom de la partie	Type d'objet	Description
ContentPresenter	ContentPresenter	Un objet qui affiche l'élément actuellement sélectionné lorsque le contrôle ComboBox n'est pas développé. Cette partie est obligatoire.
ContentPresenterBorder	FrameworkElement	Un panneau de disposition qui contient la partie supérieure du contrôle ComboBox. Cette partie est obligatoire.
DropDownToggle	ToggleButton	Un bouton qui développe le contrôle ComboBox lorsque l'on clique dessus. Par défaut, le bouton contient un objet Tracé qui représente une flèche, mais vous pouvez utiliser une image à la place.
Popup	Popup	Un objet Popup qui affiche le contenu du contrôle ComboBox. Cette partie est obligatoire.

États du contrôle ComboBox

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

Nom de l'état	Description
Normal	Aspect du contrôle ComboBox en l'absence d'interaction avec ce dernier.
MouseOver	Aspect du contrôle ComboBox lorsque l'utilisateur place le pointeur dessus.
Désactivé	Aspect du contrôle ComboBox lorsque la propriété IsEnabled a pour valeur False.

Le contrôle ComboBox peut se trouver dans l'un des 3 états suivants du groupe des états FocusStates :

Nom de l'état	Description
Sans focus	Aspect du contrôle ComboBox lorsqu'il ne possède pas le focus clavier.
Avec focus	Aspect du contrôle ComboBox lorsqu'il possède le focus clavier et qu'il n'est pas développé. 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 ComboBox.
FocusedDropDown	Aspect du contrôle ComboBox lorsqu'il possède le focus clavier et qu'il est développé.

Le contrôle ComboBox peut se trouver dans l'un des 3 états suivants du groupe des états ValidationStates :

Nom de l'état	Description
Valide	Aspect du contrôle ComboBox lorsqu'il est valide.
InvalidUnfocused	Aspect du contrôle ComboBox lorsqu'il n'est pas valide et ne possède pas le focus clavier.
InvalidFocused	Aspect du contrôle ComboBox 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 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.

Pour convertir des objets en contrôle ComboBox

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

• Dessinez un ComboBox  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.

• Créez l'aspect de votre contrôle ComboBox en dessinant des objets ou en important des éléments graphiques, puis utilisez la commande Créer un contrôle.

Si vous utilisez la commande Créer un contrôle, suivez la procédure suivante pour être sûr de créer tous les objets requis par le modèle ComboBox :

1. Groupez dans un contrôle Grid tous les objets que vous voulez utiliser pour définir l'aspect de votre contrôle ComboBox.

2. Sélectionnez le nouveau contrôle 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 ComboBox, donnez un nom à votre modèle et sélectionnez l'emplacement où le modèle sera stocké.

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

4. Lorsque vous cliquez sur OK, Microsoft Expression Blend entre dans le mode de modification de modèle et affiche les objets qui forment votre contrôle ComboBox. 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.

5. Si le groupe d'objets d'origine comprenait un objet TextBlock , celui-ci est converti en objet ContentPresenter dans le modèle du contrôle ComboBox. Ceci permet à votre objet ComboBox d'afficher du texte. Si vos objets d'origine ne comprenaient pas d'objet TextBlock, un objet ContentPresenter est automatiquement ajouté au modèle.

   Si la partie correcte du modèle n'est pas déjà affectée à l'objet ContentPresenter, cliquez avec le bouton droit sur l'objet ContentPresenter, pointez sur Créer une partie de ComboBox, puis cliquez sur ContentPresenter.

   Vous pouvez facultativement ajouter ou déplacer d'autres objets à l'intérieur de l'objet ContentPresenter si vous voulez qu'ils s'affichent dans le contrôle ComboBox même lorsqu'il n'y a aucun élément actuellement sélectionné.

6. Si vous voulez utiliser des objets ou des éléments graphiques pour la flèche de zone déroulante de votre contrôle ComboBox, procédez comme suit :

   1. Groupez-les dans un panneau de disposition.

   2. Cliquez avec le bouton droit sur le panneau de disposition.

   3. Pointez sur Créer une partie de ComboBox.

   4. Cliquez sur DropDownToggle.

      Cela remplace vos objets par un objet ToggleButton et utilise vos objets pour créer le style et le modèle qui sera appliqué à l'objet ToggleButton.

   5. Dans la boîte de dialogue Créer une partie, tapez un nom pour le style du contrôle ToggleButton qui sera créé.

   6. Sélectionnez un emplacement où le style sera stocké, puis cliquez sur OK.

      Dans le mode de modification de modèle pour le nouvel objet ToggleButton, vous pouvez continuer à faire des modifications, comme supprimer l'objet ContentPresenter (si vous ne voulez pas afficher de texte dans l'objet ToggleButton) ou sélectionner des états dans le panneau États pour modifier l'aspect de l'objet ToggleButton dans ces états.

   7. Pour revenir au mode de modification de modèle pour le Combobox, cliquez sur Étendue supérieure dans le panneau Objets et chronologie ou cliquez sur DropDownToggle dans la barre de navigation en haut de la planche graphique.

   Remarque :
   La partie DropDownToggle est facultative parce qu'il est également possible de cliquer sur le contrôle  ContentPresenterBorder pour ouvrir la liste des éléments du contrôle ComboBox, et il fournit une plus grande surface cliquable.

7. La partie Popup affiche les éléments du contrôle ComboBox. Habituellement, un objet ItemsPresenter est utilisé pour afficher une liste d'éléments, et l'objet ItemsPresenter est habituellement affiché à l'intérieur d'un contrôle ScrollViewer pour procurer une fonctionnalité de défilement. Pour créer la partie Popup, procédez comme suit :

   1. Dans le panneau Objets et chronologie, sélectionnez le panneau de disposition racine.

   2. Dans le panneau Parties, double-cliquez sur la partie Popup pour créer un objet Popup dans la racine de votre modèle.

   3. À l'intérieur du nouvel objet Popup, dessinez un nouveau contrôle ItemsPresenter.

   4. Utilisez l'outil de Sélection  pour modifier la taille et l'emplacement du Popup.

8. Pour créer la partie ** ContentPresenterBorder**, sélectionnez uniquement votre ContentPresenter et le ToggleButton facultatif, pointez sur Grouper dans le menu Objet, puis sélectionnez un panneau de disposition. Cliquez avec le bouton droit sur le nouvel objet panneau de disposition, pointez sur Créer une partie de ComboBox, puis cliquez sur ** ContentPresenterBorder**.

9. Envisagez de lier certaines propriétés du pinceau des objets de votre modèle aux propriétés suivantes de l'objet ComboBox que votre modèle utilisera in fine :

   • Background

   • BorderBrush

   • Foreground

   • BorderThickness

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

10. Pour sortir du mode de modification de modèle, cliquez sur [ComboBox] 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 ComboBox à d'autres objets ComboBox, voir Appliquer ou supprimer une ressource.

Références

Des informations détaillées sur les propriétés et les événements du contrôle ComboBox Microsoft Silverlight sont disponibles à la rubrique Silverlight Control Gallery (galerie des contrôles Silverlight) sur MSDN.

Voir aussi

Concepts

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

SimpleComboBox et SimpleComboBoxItem

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