SimpleTabControl et SimpleTabItem

Le contrôle Tab est un contrôle d’éléments qui affiche du contenu dans des onglets. Généralement, les éléments enfants d’un contrôle Tab sont des éléments Tab, qui sont des contrôles de contenu avec en-tête, dont chacun peut avoir un élément d’en-tête et un élément de contenu. Vous pouvez placer des éléments dans un contrôle Tab dans Microsoft Expression Blend en cliquant avec le bouton droit sur le contrôle Tab sous Objets et chronologie, puis en cliquant sur Ajouter SimpleTabItem pour ajouter des éléments individuels à la collection, ou en cliquant sur Lier ItemsSource aux données pour générer la collection d’éléments Tab à partir d’une source de données. .

Vous pouvez modifier le texte de l’élément Tab en cliquant dessus avec le bouton droit sous Objets et chronologie, et en cliquant ensuite sur Modifier le texte, ou vous pouvez activer l’élément Tab en double-cliquant dessus et en y faisant glisser un contrôle.

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

Composition du modèle de contrôle

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

• Un panneau de disposition Grille, qui sert à contenir les multiples éléments enfants dans le contrôle Tab. 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 ligne du haut de la grille utilise le dimensionnement automatique de façon à changer la hauteur selon la taille de l’élément Tab le plus grand. La ligne du bas utilise un dimensionnement astérisque (*) de façon à prendre l’espace restant pour afficher le contenu de l’élément Tab (PART_SelectedContentHost).

• Un élément TabPanel nomméHeaderPanel, qui est un panneau de disposition personnalisé qui sait organiser les éléments Tab.

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

• Un élément nommé ContentPresenter PART_SelectedContentHost, qui sert à afficher la propriété Content du contrôle Tab auquel ce modèle est appliqué.

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

• Un panneau de disposition Grille, qui sert à contenir les multiples éléments enfants dans le contrôle Tab. 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. Ce panneau de grille utilise le concept de partage de taille, permettant à chaque élément Tab d’être de la même largeur que tous les autres éléments Tab du contrôle Tab.

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

• Un élément ContentPresenter nommé ContentSite, qui est lié à la propriété Header de l’élément Tab auquel ce modèle est appliqué. La liaison est définie dans la propriété ContentSource de l’élément ContentSite.

  Liste d’objets : parties de base (modèle) d’un contrôle SimpleTabControl (gauche) et d’un contrôle SimpleTabItem (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 de l’élément Tab, le déclencheur pour IsSelected définit la propriété ZIndex sur l’élément Tab, qui impose son positionnement au premier plan. Ce déclencheur doit donc être conservé pour permettre le bon fonctionnement de l’élément Tab. Le déclencheur IsSelected définit également une propriété BorderThickness plus épaisse et changent la couleur d’arrière-plan pour montrer que l’élément est sélectionné.

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 SimpleTabControl et SimpleTabItem :

• La propriété Background du contrôle Tab est définie à l’aide de l’élément WindowBackgroundBrush lorsqu’aucun déclencheur n’est actif.

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

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

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

• La propriété BorderBrush de l’élément Border de l’élément Tab est définie à l’aide de l’élément SolidBorderBrush, et est définie à l’aide de l’élément DisabledBorderBrush si IsEnabled a la valeur False.

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

En outre, les modèles utilisent des liaisons à des couleurs système qui permettent aux contrôles d’utiliser les valeurs système par défaut. Dans de nombreux cas, vous pouvez changer ces pinceaux afin de pouvoir créer une conception unique. Vous pouvez le faire en modifiant les déclencheurs qui définissent les couleurs système.

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.

• L’élément TabPanel nommé HeaderPanel dans le modèle est dans le panneau de disposition spécifique utilisé pour TabControl. Un élément TabPanel sait comment disposer des éléments sur plusieurs lignes, et comment les superposer lorsqu’un élément Tab est sélectionné. Vous pouvez utiliser un conteneur de disposition différent pour l’objet HeaderPanel, mais vous devez attribuer à sa propriété IsItemsHost la valeur True.

• Pour modifier le modèle SimpleTabItem, cliquez sur le bouton Modifier la ressource en regard du style SimpleTabItem dans le panneau Ressources. Puis, 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.

• Le modèle de contrôle du contrôle système TabControl est considérablement plus complexe que le contrôle SimpleTabControl. Il permet à l’objet TabPanel d’être amarré dans différentes directions en fonction de la propriété Orientation du contrôle TabControl. Le contrôle SimpleTabControl ignore la propriété Orientation par souci de simplicité, mais si vous souhaitez que l’objet TabPanel soit placé à un autre emplacement, vous pouvez modifier les lignes et les colonnes de la grille.

• Il ne faut pas changer le nom de l’élément ContentPresenter PART_SelectedContentHost car la classe du contrôle utilise ce nom pour positionner l’élément Tab.

Haut de la page

Voir aussi

Concepts

Essayez ! Personnaliser le contrôle SimpleTabItem à l’aide d’un effet bitmap