SimpleExpander

Le contrôle Expander est un contrôle de contenu avec en-tête qui affiche un en-tête et une fenêtre réductible qui affiche du contenu. Vous pouvez définir un titre pour un contrôle Expander dans Microsoft Expression Blend en modifiant la propriété Header (en-tête). Vous pouvez placer du contenu dans un contrôle Expander en double-cliquant sur ce contrôle, puis en y dessinant un élément. Si vous souhaitez placer plusieurs éléments dans un contrôle Expander, vous devez d’abord ajouter un panneau de disposition tel qu’une grille ou un canevas. Un contrôle expander peut également afficher du texte par défaut ; vous pouvez modifier le texte en cliquant avec le bouton droit sur le contrôle Expander, puis en cliquant sur Modifier le texte. Pour afficher le contrôle Expander sur la planche graphique alors qu’il est développé, vous pouvez cliquer avec le bouton droit sur le contrôle Expander sous Objets et chronologie, puis cliquez sur Développer Expander.

Vue de planche graphique d’un contrôle SimpleExpander

Composition du modèle de contrôle

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

• Une grille, qui est un panneau de disposition requis pour contenir plusieurs enfants dans le contrôle Expander. 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. La grille est divisée en deux zones : la zone Border qui représente l’en-tête, et la zone ExpandSite qui représente le contenu.

• 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 Expander auquel ce modèle est appliqué.

• Un élément ToggleButton, qui est contenu dans l’élément Border, et qui développe et réduit le contrôle Expander.

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

• Un élément ContentPresenter sous la zone ExpandSite, qui est utilisé pour afficher la propriété Content du contrôle Expander auquel ce modèle est appliqué. Les deux éléments ContentPresenter doivent être présents pour que le contrôle Expander fonctionne comme prévu.

  Liste d’objets : parties de base (modèle) d’un contrôle SimpleExpander

  

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 SimpleExpander, lorsque la propriété IsExpanded prend la valeur True, la zone ExpandSite devient visible.

Haut de la page

Pinceaux utilisés

Les ressources pinceau suivantes dans le dictionnaire de ressources SimpleStyles.xaml sont utilisées par le modèle SimpleExpander :

• La propriété Background est définie à l’aide de l’élément LightBrush lorsqu’aucun déclencheur n’est actif, et de l’élément DisabledBackgroundBrush lorsque IsEnabled a la valeur False.

• La propriété BorderBrush est définie à l’aide de l’élément NormalBorderBrush lorsqu’aucun déclencheur n’est actif, et de l’élément DisabledBorderBrush lorsque IsEnabled a la valeur False.

• La propriété Background de l’élément Border est définie à l’aide de l’élément NormalBrush lorsqu’aucun déclencheur n’est actif.

• La propriété Background de l’élément ExpandSite est définie à l’aide de l’élément WindowBackgroundBrush lorsqu’aucun déclencheur n’est actif.

• La propriété BorderBrush de l’élément ExpandSite est définie à l’aide de l’élément SolidBorderBrush lorsqu’aucun déclencheur n’est actif.

• La propriété Foreground est définie à l’aide de l’élément DisabledForegroundBrush lorsque 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.

• Comme le contrôle Expander comporte deux éléments ContentPresenter (l’un pour l’en-tête, l’autre pour le contenu), l’élément ContentPresenter dans l’en-tête doit être explicitement défini à la classe du contrôle. Pour cela, attribuez à la propriété ContentSource de l’élément ContentPresenter (dans le nœud Border du modèle) la valeur Header.

• L’élément ToggleButton utilise un modèle séparé nommé ExpanderToggleButton. 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. L’élément ToggleButton est connecté au reste du contrôle Expander par un lien entre IsChecked sur l’élément ToggleButton et IsExpanded sur le contrôle Expander. Pour que cette propriété soit correctement mise à jour, vous devez conserver cette liaison (la liaison bidirectionnelle vous permet de développer par programme le contrôle Expander).

• Par défaut, la zone ExpandSite est réduite et rendue visible par un déclencheur. Comme le déclencheur fait référence à l’élément ExpandSite par nom, vous devez également mettre à jour le déclencheur IsExpanded si vous changez ou remplacez l’élément ExpandSite.

Haut de la page