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 style simple sont disponibles sous Styles simples dans la catégorie Styles du panneau 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 dans le panneau 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 dans le panneau Objets et chronologie, pointez sur Modifier le modèle, puis cliquez sur Modifier le modèle courant. 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 courant 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 Étendue supérieure, qui se trouve au-dessus de l’arborescence d’éléments dans le panneau Objets et chronologie. Pour revenir au mode d’édition de modèle pour un modèle existant, dans le panneau Objets et chronologie, cliquez avec le bouton droit sur l’élément dont vous voulez modifier le modèle, pointez sur Modifier le modèle, puis cliquez sur Modifier le modèle courant.

4. Cliquez sur IsSelected = True dans le panneau Déclencheurs. 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 dans le panneau Déclencheurs. Vous pouvez attribuer une autre couleur à l’arrière-plan en cliquant sur Bordure dans le panneau 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é dans le panneau Déclencheurs, 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, cliquez sur 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 É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 la catégorie Styles du panneau 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 style simple sont disponibles sous Styles simples dans la catégorie Styles du panneau 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 dans le panneau 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.

3. Cliquez sur l’objet ListBox dans le panneau 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 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.

   Pour en savoir plus sur les options dans la fenêtre Créer la ressource Style, voir Créer une ressource.

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 dans le panneau Objets et chronologie, pointez sur Modifier le modèle, puis cliquez sur Modifier le modèle courant.

   Remarque :
   Vous cliquez sur Modifier le modèle courant 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, qui est 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. Dans le panneau Déclencheurs, 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