Essayez ! Changement de l’aspect de l’élément sélectionné dans un contrôle SimpleListBox

Vous pouvez facilement personnaliser l’aspect d’un élément sélectionné dans Microsoft Expression Blend, à l’aide du modèle de contrôle SimpleListBoxItem.

Pour changer l’aspect de l’élément sélectionné dans un contrôle SimpleListBox

1. Dessinez un contrôle SimpleListBox sur la planche graphique dans Expression Blend.

   Conseil :
   Les contrôles de styles simples sont disponibles dans la catégorie Styles simples de l’onglet Contrôles dans la Bibliothèque de composants. Une fois que vous avez sélectionné un contrôle de style simple dans la liste, vous pouvez le dessiner sur la planche graphique.

2. Ajoutez un élément à la zone de liste en cliquant avec le bouton droit sur la zone de liste sous Objets et chronologie et en cliquant ensuite sur Ajouter SimpleListBoxItem.

3. Cliquez avec le bouton droit sur l’un des éléments de la zone de liste sous Objets et chronologie, pointez sur Modifier des parties du contrôle (modèle), puis cliquez sur Modifier le modèle. Si vous ne souhaitez pas changer le dictionnaire de ressources SimpleStyles.xaml, vous pouvez cliquer sur Modifier une copie et non sur Modifier le modèle pour créer un nouveau modèle et l’enregistrer dans le document. Pour plus d’informations sur la création d’une copie, voir Créer une ressource.

   Conseil :

   Pour quitter le mode d’édition de modèle et revenir à l’étendue de votre document, cliquez sur le bouton Étendue supérieure, qui se trouve au-dessus de l’arborescence d’éléments dans le panneau Interaction. Pour revenir au mode d’édition de modèle pour un modèle existant : sous Objets et chronologie, cliquez avec le bouton droit sur l’élément dont vous voulez modifier le modèle, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle.

4. Cliquez sur IsSelected = True sous Déclencheurs dans le panneau Interaction. Par défaut, la couleur d’arrière-plan de la bordure change lorsqu’un élément est sélectionné, comme vous pouvez le voir sous Propriétés une fois actif sous Déclencheurs. Vous pouvez attribuer une autre couleur à l’arrière-plan en cliquant sur Bordure sous Objets et chronologie, puis en modifiant la propriété Background sous Pinceaux dans le panneau Propriétés.

   Conseil :

   Lorsqu’un déclencheur de propriété est sélectionné sous Déclencheurs dans le panneau Interaction, toute modification apportée dans Expression Blend provoque le changement d’une valeur sur cette condition de déclencheur. Vérifiez que le déclencheur approprié est sélectionné avant d’apporter vos modifications. Si vous souhaitez apporter des modifications qui affectent l’état par défaut du modèle de contrôle, sélectionnez Par défaut dans le panneau Déclencheurs.

5. Pour ajouter des éléments à la zone de liste qui utilise le modèle que vous venez de modifier, vous pouvez cliquer sur le bouton Étendue supérieure pour revenir au mode d’édition de votre document, double-cliquer sur l’élément de zone de liste pour l’activer, puis ajouter votre style personnalisé dans l’onglet Styles locaux de la Bibliothèque de composants.

6. Testez votre application (F5) pour voir les effets.

Pour changer l’aspect de l’élément sélectionné à l’aide du modèle ItemContainerStyle

1. Dessinez un contrôle SimpleListBox sur la planche graphique dans Expression Blend.

   Conseil :
   Les contrôles de styles simples sont disponibles dans la catégorie Styles simples de l’onglet Contrôles dans la Bibliothèque de composants. Une fois que vous avez sélectionné un contrôle de style simple dans la liste, vous pouvez le dessiner sur la planche graphique.

2. Ajoutez quelques éléments à la zone de liste en double-cliquant dessus sous Objets et chronologie, et en dessinant ensuite un Rectangle  ou un autre contrôle dans la zone de liste sur la planche graphique. Vous pouvez aussi cliquer avec le bouton droit sur l’élément de la zone de liste et cliquer sur Ajouter SimpleListBoxItem.

   Conseil :
   Si vous souhaitez essayer la liaison de données pour générer automatiquement des éléments pour la zone de liste, vous pouvez utiliser les procédures dans Essayez ! Créer un lecteur de News RSS dans ce Guide de l’utilisateur.

3. Cliquez sur l’objet ListBox sous Objets et chronologie. Dans le menu Objet, pointez sur Modifier d’autres styles, pointez sur Modifier ItemContainerStyle, puis cliquez sur Modifier une copie.

   La fenêtre Créer la ressource Style apparaît. Pour en savoir plus sur les options dans la fenêtre Créer la ressource Style, voir Créer une ressource. Pour cette procédure, acceptez les valeurs par défaut et cliquez sur OK.

   Expression Blend passe dans le mode d’édition pour le style d’un élément ListBoxItem.

4. Les modèles étant encapsulés dans des éléments de style, pour modifier le modèle d’un élément ListBoxItem, cliquez avec le bouton droit sur l’élément Style sous Objets et chronologie, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle.

   Remarque :
   Vous cliquez sur Modifier le modèle ici au lieu de Modifier une copie car des modèles de contrôle sont encapsulés dans des éléments de style et vous avez cliqué sur Modifier une copie à l’étape 3 pour créer une copie du style.

   Expression Blend passe en étendue d’édition du modèle ListBoxItemStyleTemplate, le modèle que la zone de liste utilise pour chaque élément. Le modèle comporte un élément Border nommé Bd, un élément ContentPresenter, et deux déclencheurs pour l’état IsSelected.

5. Sous Déclencheurs, dans le panneau Interaction, cliquez sur l’un des déclencheurs IsSelected pour passer dans le mode d’enregistrement de ce déclencheur, puis changez les propriétés de l’élément Bd.

6. Testez votre application (F5) pour voir les effets.

Voir aussi

Concepts

SimpleListBox et SimpleListBoxItem