SimpleComboBox et SimpleComboBoxItem

La zone de liste déroulante est un contrôle d’éléments sous la forme d’une liste déroulante. Vous pouvez placer du contenu dans une zone de liste déroulante dans Microsoft Expression Blend en double-cliquant sur la zone de liste déroulante et en y faisant glisser un élément (tel que SimpleComboBoxItem). Vous pouvez également cliquer avec le bouton droit sur la zone de liste déroulante sous Objets et chronologie, puis cliquer sur Ajouter SimpleComboBoxItem pour ajouter des éléments individuels à la collection, ou cliquer sur Lier la propriété ItemsSourceaux données pour générer la collection d’éléments ComboBoxItem à partir d’une source de données. Pour afficher la zone de liste déroulante sur la planche graphique alors qu’elle est développée, vous pouvez cliquer avec le bouton droit sur la zone de liste déroulante ou l’élément de zone de liste déroulante sous Objets et chronologie, puis cliquer sur Développer ComboBox.

Vue de planche graphique d’un contrôle SimpleComboBox après l’ajout de deux éléments

Composition du modèle de contrôle

Le modèle de contrôle SimpleComboBox est composé des éléments suivants :

• Un panneau Grille, qui sert à contenir les multiples enfants dans la zone de liste déroulante. La grille est également utilisée pour permettre à un concepteur d’interface utilisateur d’application d’ajouter plus facilement des éléments au modèle.

• Un élément ContentPresenter nommé ContentSite, qui est contenu dans la Grille et qui est utilisé pour afficher l’élément sélectionné.

• Une zone de texte nommée PART_EditableTextBox, qui est contenue dans la Grille et qui permet à l’utilisateur de modifier du texte dans la zone de liste déroulante. Comme le nom PART_EditableTextBox est utilisé par la classe pour localiser la zone de texte, vous ne devez pas le modifier. Par défaut, la zone de texte est réduite et rendue visible lorsque IsEditable prend la valeur True sur la zone de liste déroulante à laquelle ce modèle de contrôle est appliqué.

• Un contrôle de bouton bascule Popup, qui est utilisé pour créer la partie d’expansion de la zone de liste déroulante. Le contrôle Popup sait se positionner par rapport aux autres contrôles et s’affiche au-dessus de tout autre contenu. Ce contrôle prend également en charge certaines animations intégrées.

• Le contrôle Popup comporte un contrôle Grid contenant un élément ScrollViewer permettant le défilement de la liste d’éléments. L’objet StackPanel dans l’élément ScrollViewer positionne chaque élément. La propriété IsItemsHost de l’objet StackPanel prend la valeur True afin que le contrôle de zone de liste déroulante connaisse la position des éléments enfants à l’intérieur de l’objet StackPanel. Si vous souhaitez changer le mode d’affichage de vos éléments, vous pouvez remplacer ce panneau de disposition en cliquant avec le bouton droit sur la grille déroulante sous Objets et chronologie, puis en choisissant pour Change Layout Type un autre panneau tel que UniformGrid.

Le modèle de contrôle SimpleComboBoxItem est composé des éléments suivants :

• Un panneau Grille, qui sert à contenir les multiples enfants dans l’élément de la zone de liste déroulante. Une grille est aussi utilisée pour permettre à un concepteur d’ajouter plus facilement des éléments au modèle.

• Un élément Border, qui est utilisé parce qu’il inclut une propriété BorderThickness pouvant être liée par modèle à la propriété BorderThickness du contrôle de bouton auquel ce modèle est appliqué.

• Un élément ContentPresenter, qui est contenu dans l’élément Grid et qui est automatiquement lié à la propriété Content du contrôle d’éléments auquel ce modèle est appliqué.

  Liste d’objets : parties de base (modèle) d’un contrôle SimpleComboBox (gauche) et d’un contrôle SimpleComboBoxItem (droite)

  

Haut de la page

Déclencheurs de propriété utilisés

Des déclencheurs de propriété dans le modèle de contrôle sont utilisés pour que le contrôle réagisse aux changements de propriétés. Vous pouvez cliquer sur les éléments sous Déclencheurs dans le panneau Interaction pour voir les propriétés qui sont changées lorsqu’un déclencheur est actif. Par exemple, dans le modèle pour la zone de liste déroulante, lorsque la propriété HasItems a la valeur False, la hauteur minimale de l’élément DropDownBorder est réglée à 95 et une fenêtre déroulante vide apparaît lors d’un clic dans la zone de liste déroulante. Si la hauteur minimale a été réglée à 0, une toute petite fenêtre déroulante apparaît. Dans le modèle de l’élément de zone de liste déroulante, lorsque la propriété IsHighlighted a la valeur True, la propriété Background de l’élément Border change pour indiquer quel élément est sélectionné dans la zone de liste déroulante.

Haut de la page

Pinceaux utilisés

Les ressources pinceau suivantes dans le dictionnaire de ressources SimpleStyles.xaml sont utilisées par les modèles SimpleComboBox et SimpleComboBoxItem :

• La propriété Background de l’élément DropDownBorder est définie à l’aide de l’élément WindowBackgroundBrush.

• La propriété BorderBrush de l’élément DropDownBorder est définie à l’aide de l’élément SolidBorderBrush.

• La propriété Foreground est définie à l’aide de l’élément DisabledForegroundBrush lorsque IsEnabled a la valeur False.

• Si le modèle SimpleComboBox est rempli avec des éléments qui utilisent le modèle SimpleComboBoxItem, la propriété Background de l’élément est définie à l’aide de SelectedBackgroundBrush lorsqu’un élément est sélectionné, et la propriété Foreground est définie à l’aide de DisabledForgroundBrush si IsEnabled a la valeur False.

Haut de la page

Recommandations et directives de conception

• En général, utilisez un contrôle Grid comme racine de votre modèle si vous prévoyez qu’un concepteur ajoutera des éléments visuels à votre contrôle. Expression Blend recherche un panneau de disposition comme le contrôle Grid et l’active par défaut afin que de nouveaux éléments ajoutés à la planche graphique deviennent des éléments enfants du panneau de disposition.

• Le développement de la zone de liste déroulante est défini en liant la propriété IsChecked du contrôle ToggleButton et la propriété IsOpen du contrôle Popup à la propriété IsDropDownOpen de la zone de liste déroulante auquel ce modèle de contrôle est appliqué. Si vous modifiez l’élément ToggleButton ou l’élément Pop-up, vous devez vous assurer de bien maintenir cette liaison de modèle.

• L’élément ToggleButton utilise un modèle séparé nommé ToggleButtonControlTemplate. Pour modifier cet aspect, cliquez avec le bouton droit sur l’élément ToggleButton, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle ou sur Modifier la copie.

• Pour modifier le modèle SimpleComboBoxItem, cliquez sur le bouton Modifier la ressource en regard du style SimpleComboBoxItem dans le panneau Ressources. Ensuite, dans le mode d’édition du style, cliquez avec le bouton droit sur Style sous Objets et chronologie, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle ou sur Modifier une copie. Si vous modifiez le modèle SimpleComboBoxItem, vous pourriez souhaiter conserver ou modifier le déclencheur IsHighlighted.

Haut de la page

Voir aussi

Concepts

Essayez ! Personnaliser l’aspect du bouton de développement dans un contrôle SimpleComboBox