Pour afficher l’article en anglais, activez la case d’option Anglais. Vous pouvez aussi afficher la version anglaise dans une fenêtre contextuelle en faisant glisser le pointeur de la souris sur le texte.
Traduction
Anglais

Essayez ! Changer l'aspect de l’élément sélectionné dans un contrôle SimpleListBox (prise en charge de WPF dans Blend)

Cette page s’applique uniquement aux projets WPF

Vous pouvez facilement personnaliser l’aspect d’un élément sélectionné dans une zone de liste Blend for Visual Studio, à 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 Blend.

    Conseil 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 dans Blend.

    Conseil Conseil

    Pour quitter le mode de modification de modèle et revenir à l’étendue de votre document, cliquez sur le bouton Rétablir l’étendue àJJ170337.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(fr-fr,VS.120).png, qui se trouve au-dessus de l’arborescence d’objets 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’objet dont vous voulez modifier le modèle, pointez sur Modifier le modèle, puis cliquez sur Modifier le modèle actif.

  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 Border dans le panneau Objets et chronologie, puis en modifiant la propriété Background sous Pinceaux dans le panneau Propriétés.

    Conseil Conseil

    Lorsqu’un déclencheur de propriété est sélectionné dans le panneau Déclencheurs, toute modification apportée dans 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 Rétablir l'étendue àJJ170337.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(fr-fr,VS.120).png pour revenir à l’étendue de modification de votre document, double-cliquer sur l’objet de zone de liste pour l’activer, puis ajouter votre style personnalisé dans la catégorie Styles du panneau Assets.

  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 Blend.

    Conseil 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 RectangleJJ170337.ae750268-92e8-403a-9e07-b662da4e9e1e(fr-fr,VS.120).png ou un autre contrôle dans la zone de liste sur la planche graphique. Vous pouvez aussi cliquer avec le bouton droit sur l’objet de la zone de liste et cliquer sur Ajouter SimpleListBoxItem.

    Conseil 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 Blend.

  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.

    Blend passe en mode d’édition pour le style d’un ListBoxItem.

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

  4. Les modèles étant encapsulés dans des objets de style, pour modifier le modèle d’un élément ListBoxItem, cliquez avec le bouton droit sur l’objet Style dans le panneau Objets et chronologie, pointez sur Modifier le modèle, puis cliquez sur Modifier le modèle actuel.

    Remarque Remarque

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

    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. Ce modèle contient un objet Border nommé Bd, un objet 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’objet Bd.

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

Afficher: