Vue d'ensemble des styles et modèles

Vous pouvez personnaliser les contrôles Windows Presentation Foundation (WPF) et Silverlight 2 de différentes façons, y compris en créant un jeu de modèles et styles pour les contrôles, ce qui entraîne un aspect unique et cohérent pour votre application.

Remarque :

Les styles et modèles ne sont pas pris en charge dans les projets Microsoft Silverlight 1.0, mais vous pouvez créer des classes JavaScript pour définir des contrôles réutilisables. Pour obtenir un exemple, voir la classe Button de l’exemple ButtonGallery disponible sous l’onglet Exemples dans l’Écran d’accueil (dans le menu ? (Aide)). Pour plus d’informations, voir le centre de formation Silverlight.

Les modèles et les styles définissent respectivement les composants d’un contrôle et le comportement par défaut de ce dernier. Vous créez des modèles et des styles en effectuant des copies des styles et des modèles système par défaut d’un contrôle (parce que vous ne pouvez pas modifier des styles et des modèles système). La modification des modèles et des styles permet de créer facilement de nouveaux contrôles dans le mode Design d'Microsoft Expression Blend, sans devoir utiliser de code.

Différence entre styles et modèles

Le tableau suivant fournit une comparaison détaillée des styles et des modèles pour vous aider à déterminer s’il convient de modifier le style ou le modèle d’un contrôle, ou les deux.

Caractéristique	Styles	Modèles
Objet	À l’aide de styles, vous pouvez modifier les valeurs par défaut des propriétés qui sont définies sur le contrôle auquel le style est appliqué. Par exemple, vous pouvez spécifier les couleurs par défaut de l’arrière-plan, de la bordure et du premier plan d’un contrôle, tel qu’un bouton. Ces propriétés de style peuvent être remplacées par les valeurs qui sont définies sur le contrôle proprement dit lorsqu’il est dessiné sur la planche graphique. Par exemple, si vous choisissez le bleu pour la couleur d’arrière-plan dans le style d’un bouton, le bouton apparaît bleu lorsqu’il est dessiné sur la planche graphique, mais vous pouvez en changer la couleur. Vous pouvez uniquement définir des propriétés préexistantes dans le style. Par exemple, vous ne pouvez pas définir une valeur par défaut pour une propriété appartenant à une nouvelle partie que vous avez ajoutée au modèle. Enfin, vous pouvez utiliser des styles pour spécifier le comportement par défaut d’un contrôle. Par exemple, dans le style d’un bouton, vous pouvez spécifier un déclencheur de telle sorte que lorsque l’utilisateur positionne le pointeur de la souris au-dessus du bouton, la couleur d’arrière-plan change. Ces changements de propriété sont instantanés (ils ne peuvent pas être graduellement animés).	À l’aide de modèles, vous pouvez modifier la structure du contrôle auquel le modèle est appliqué. Vous pouvez modifier un modèle de contrôle afin de réorganiser, ajouter ou supprimer des éléments (ou parties) dans le contrôle. Par exemple, vous pouvez ajouter une image d’arrière-plan ou une conception à un contrôle, tel qu’un bouton. Vous pouvez également modifier les valeurs des propriétés (par exemple la couleur d’arrière-plan) qui sont définies sur le contrôle auquel le style est appliqué. Ces propriétés de style peuvent être remplacées par les valeurs qui sont définies sur le contrôle proprement dit lorsqu’il est dessiné sur la planche graphique. Vous pouvez toutefois utiliser la liaison de modèle pour définir les propriétés d’un modèle en fonction des valeurs des propriétés du contrôle lorsqu’il est dessiné sur la planche graphique. Lors de la modification d’un modèle, vous avez accès à un plus grand nombre de parties d’un contrôle que lors de la modification d’un style. Par exemple, vous pouvez changer le mode d’affichage de la liste contextuelle dans une zone de liste déroulante, ou vous pouvez changer l’aspect du bouton qui déclenche la liste contextuelle dans la zone de liste déroulante en modifiant le modèle d’éléments. Certains modèles comprennent les éléments suivants : Zone de contenu   Une zone de contenu est un espace réservé dans le modèle de contrôle permettant d’afficher le contenu du contrôle auquel le modèle est appliqué. Ce peut être la valeur d’une propriété de contenu (dans un bouton par exemple), ou d’une propriété de texte (dans une zone de texte). En-tête   Certains contrôles possèdent plusieurs propriétés comportant du contenu. Dans ce cas, une zone de contenu supplémentaire est employée dans le modèle en tant qu’espace réservé pour le type de contenu qui est utilisé comme en-tête. Un exemple de contrôle avec en-tête est un contrôle d’élément Tab où l’en-tête est l’étiquette sur l’onglet et où le contenu est affiché sous l’en-tête. Hôte d’éléments   Un hôte d’éléments sert d’espace réservé pour les éléments enfants d’un contrôle. La partie hôte d’éléments d’un modèle est identifiée par Is_Items_Host = True dans le panneau Propriétés. ItemContainerTemplate   Un modèle de conteneur d’éléments est appliqué à un contrôle qui contient des éléments, tel qu’un contrôle Menu ou List. Ce modèle est utilisé lors de l’ajout d’éléments à la liste. Enfin, vous pouvez spécifier à l’aide de déclencheurs le comportement des nouvelles parties et des parties existantes d’un modèle. Par exemple, vous pouvez spécifier un déclencheur de telle sorte que lorsque l’utilisateur positionne le pointeur de la souris au-dessus d’un bouton, la couleur de l’une des parties change. Ces changements de propriétés peuvent être instantanés ou animés pour produire une transition douce. Remarque : Une animation est impossible de la valeur d’une propriété liée à un modèle ou d’une ressource de couleur à une autre valeur. Lors de l’utilisation d’animations dans des déclencheurs, utilisez des valeurs de propriétés spécifiques.
Procédure de modification	Vous pouvez accéder au mode d’édition d’un style des manières suivantes : À l’aide du menu Sous Objets et chronologie, sélectionnez le contrôle. Dans le menu Objet, pointez sur Modifier le style. Effectuez l’une des opérations suivantes : Cliquez sur Modifier le style (si vous souhaitez modifier le style actuellement appliqué au contrôle) Cliquez sur Modifier une copie (pour simultanément créer une copie du style actuellement appliqué au contrôle et appliquer le nouveau style au contrôle). L’option Modifier le style n’est pas disponible si le style système est appliqué au contrôle. Pour obtenir un exemple, voir Créer une ressource de style. Utilisation du panneau Ressources (pour modifier un style existant) Remarque : Les styles et les modèles sont des ressources pouvant être appliquées à des contrôles de différentes manières et stockées à différents emplacements dans votre application. Pour obtenir un exemple de création de style, voir Créer une ressource de style.	Vous pouvez accéder au mode d’édition d’un modèle de contrôle des manières suivantes : À l’aide du menu Sous Objets et chronologie, sélectionnez le contrôle. Effectuez l’une des opérations suivantes : Dans le menu Objet, pointez sur Modifier des parties du contrôle (Modèle). Cliquez avec le bouton droit sur le contrôle, pointez sur Modifier des parties du contrôle (Modèle). Cliquez sur Modifier le modèle (si vous souhaitez modifier le modèle actuellement appliqué au contrôle) ou cliquez sur Modifier une copie (pour simultanément créer une nouvelle copie du modèle actuellement appliqué au contrôle et appliquer le nouveau modèle au contrôle). L’option Modifier le style n’est pas disponible si le modèle système est appliqué au contrôle. Pour obtenir un exemple, voir Créer ou modifier un modèle de contrôle. Utilisation du panneau Ressources (pour modifier un style existant) Dans le panneau Ressources, recherchez le style qui contient le modèle, puis cliquez sur le bouton Modifier la ressource en regard du style. Sous Objets et chronologie, cliquez avec le bouton droit sur les éléments Style, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle. Conseil : Les modèles de contrôle sont encapsulés dans des styles de telle sorte que le style qui est appliqué à un contrôle inclut l’apparence (parties) et le comportement du contrôle. C’est pourquoi vous cliquez sur Modifier le modèle et non sur Modifier une copie, car la copie du style inclut le modèle.Pour revenir à l'étendue de modification de votre document principal, vous devez cliquer sur le bouton Étendue supérieure  à deux reprises, car le premier clic vous fait revenir dans le mode de modification du style. Remarque : Les styles et les modèles sont des ressources pouvant être appliquées à des contrôles de différentes manières et stockées à différents emplacements dans votre application. Pour obtenir un exemple de création de modèle, voir Créer ou modifier un modèle de contrôle.
Procédure d’application	Vous pouvez appliquer un style existant à un contrôle sur la planche graphique des manières suivantes : À l’aide du menu Sous Objets et chronologie, sélectionnez le contrôle. Dans le menu Objet, pointez sur Modifier le style, sur Appliquer la ressource, puis sélectionnez le style dans la liste déroulante qui apparaît. La liste déroulante affiche uniquement les styles accessibles par le contrôle sélectionné. Par exemple, vous ne pouvez pas appliquer un style de zone de texte à un bouton. Utilisation de la Bibliothèque de composants pour dessiner un contrôle stylisé sur la planche graphique Ouvrez la Bibliothèque de composants . Effectuez l’une des opérations suivantes : Si votre style a été créé dans le document dans lequel vous travaillez, cliquez sur l’onglet Styles locaux. Si votre style a été créé dans un dictionnaire de ressources (WPF uniquement), cliquez sur l’onglet Contrôles, puis sélectionnez le dictionnaire. Sélectionnez le style souhaité, puis dessinez-le sur la planche graphique.	Vous pouvez appliquer un modèle existant à un contrôle sur la planche graphique des manières suivantes : À l’aide du menu Sous Objets et chronologie, sélectionnez le contrôle. Effectuez l’une des opérations suivantes : Dans le menu Objet, pointez sur Modifier des parties du contrôle (Modèle). Cliquez avec le bouton droit sur le contrôle, puis pointez sur Modifier des parties du contrôle (Modèle). Cliquez sur Modifier le modèle (si vous souhaitez modifier le modèle actuellement appliqué au contrôle) ou cliquez sur Modifier une copie (pour simultanément créer une nouvelle copie du modèle actuellement appliqué au contrôle et appliquer le nouveau modèle au contrôle). L’option Modifier le style n’est pas disponible si le modèle système est appliqué au contrôle. Pour obtenir un exemple, voir Créer ou modifier un modèle de contrôle. Utilisation du panneau Ressources (pour modifier un style existant) Dans le panneau Ressources, recherchez le style qui contient le modèle, puis cliquez sur le bouton Modifier la ressource en regard du style. Sous Objets et chronologie, cliquez avec le bouton droit sur les éléments Style, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle. Pour revenir à l'étendue de modification de votre document principal, vous devez cliquer sur le bouton Étendue supérieure  à deux reprises, car le premier clic vous fait revenir dans le mode de modification du style.

Expression Blend est livré avec un ensemble de styles simples et de modèles regroupés dans un dictionnaire de ressources dans des projets WPF. Les dictionnaires de ressources peuvent être utilisés pour concevoir un thème pour votre application. Pour plus d’informations, voir Simple styles and resource dictionaries.

Haut de la page

Modification des styles et modèles

Lorsque vous êtes dans l’étendue d’édition d’un style ou d’un modèle dans Expression Blend 2, un chemin de navigation apparaît dans le coin supérieur gauche de la planche graphique.

Chemin de navigation avec mode de modification de modèle sélectionné

En cliquant sur les boutons du chemin de navigation, vous pouvez basculer rapidement entre le mode d’édition de modèle, le mode d’édition de style et l’étendue d’édition d’objet pour l’objet sélectionné. Le chemin de navigation apparaît pour n’importe quel objet sélectionné qui possède un style ou un modèle personnalisé qui lui a été appliqué.

Pour informations sur la procédure à suivre pour modifier un style ou un modèle, voir Modifier un style et Créer ou modifier un modèle de contrôle. Lorsque vous modifiez des styles ou des modèles, assurez-vous d'adopter les Best practices qui suivent.

Haut de la page

Méthodes conseillées

Attention :
Lors de la modification de styles et de modèles, il y a quelques points à appliquer pour ne pas altérer la fonctionnalité du contrôle système auquel le style ou le modèle est appliqué :

• Évitez de changer les déclencheurs existants sauf si vous changez simplement les pinceaux de couleur.

• Ne renommez pas ou ne modifiez pas un élément dont le nom commence par « PART_ » car il est fait référence à ces éléments depuis le code mettant en œuvre le contrôle.

• Ne supprimez pas d'éléments auxiliaires, tels que TabPanel dans SimpleTabControl, ou Track dans SimpleScrollBar. Ces éléments doivent être présents pour préserver les possibilités du contrôle.

• Ne réinitialisez pas ou ne changez pas de liaisons dans le panneau Propriétés. Celles-ci sont identifiées par une surbrillance jaune autour de la propriété ou par un bouton jaune Options de propriétés avancées . La liaison de modèle est utilisée pour lier des propriétés du modèle aux propriétés du contrôle auquel le modèle est appliqué.

• Si le modèle inclut un élément presenter (tel qu’un élément ContentPresenter ou ItemsPresenter), assurez-vous de conserver cet élément dans le modèle. Les éléments Presenter affichent du contenu qui est défini dans le contrôle auquel le modèle est appliqué.

Haut de la page

Thèmes

Un thème est un ensemble de styles et de modèles conférant un aspect cohérent à tous les contrôles d’interface utilisateur. Par exemple, Windows Presentation Foundation utilise un thème pour les applications WPF qui s'exécutent sur Microsoft Windows XP et un autre thème pour les applications WPF qui s'exécutent sur Windows Vista. C’est pourquoi le même bouton n’a pas le même aspect dans les deux systèmes d’exploitation.

Pour déterminer l’aspect d’un contrôle (par exemple un bouton), une application effectue une recherche aux emplacements suivants :

1. Propriétés qui sont définies sur un contrôle   Par exemple, si vous créez un bouton dans Expression Blend, puis changez la couleur d’arrière-plan directement sur le bouton. La définition d’une propriété directement sur un contrôle remplace toutes les valeurs définies ailleurs pour cette propriété.

2. Propriétés qui sont définies dans le style ou le modèle personnalisé utilisé par un contrôle   Par exemple, si vous créez un bouton dans Expression Blend, puis modifiez une copie du modèle pour définir la couleur d’arrière-plan dans le modèle. C’est la couleur d’arrière-plan qui sera utilisée pour le bouton si la propriété de l’arrière-plan n’est pas définie directement sur le bouton. Vous pouvez définir des ressources dans le document qui contient le contrôle, ou vous pouvez définir des ressources au niveau de l’application (rendant ainsi les ressources disponibles pour tous les documents dans l’application). Les ressources de niveau document remplacent les ressources de niveau application.

3. Propriétés qui sont définies sur le modèle système qui est utilisé par un contrôle   WPF détermine le modèle système en fonction du thème (en d’autres mots, en fonction du système d’exploitation).

Haut de la page

Styles simples et dictionnaires de ressources

Remarque :
Les styles simples et dictionnaires de ressources ne sont pas pris en charge dans les projets Silverlight 2.

Vous pouvez efficacement créer un thème en créant des ressources de propriété, de style et de modèle dans un fichier individuel nommé dictionnaire de ressources. Les dictionnaires de ressources permettent de réutiliser un thème entre plusieurs applications. Vous pouvez également créer des thèmes échangeables en définissant plusieurs dictionnaires de ressources fournissant les mêmes types de ressources avec des valeurs différentes. Par exemple, l’application Expression Blend utilise elle-même différents dictionnaires de ressources pour un thème Sombre et un thème Clair, interchangeables en cliquant sur Options dans le menu Outils, puis en changeant le Thème pour l’espace de travail.

Pour vos propres applications, Expression Blend fournit un dictionnaire de ressources prêt à l’emploi nommé SimpleStyles.xaml qui contient un ensemble de styles pour les contrôles courants, tels que les boutons, les zones de liste et autres contrôles. Vous pouvez accéder à ces styles sous Styles simples sur l’onglet Contrôles de la Bibliothèque de composants. Lorsque vous utilisez l’un des styles simples pour dessiner un contrôle sur la planche graphique, la version système du contrôle est simultanément créée et le style simple est appliqué. Par exemple, si vous créez un contrôle Button système sur la planche graphique, le code XAML (Extensible Application Markup Language) résultant est le suivant :

<Button Content="Button" ... />

Si vous créez un contrôle SimpleButton sur la planche graphique, le code XAML résultant inclut une référence au style SimpleButton :

<Button Content="Button" Style="{DynamicResource SimpleButton}" ... />

Après l’ajout d’un contrôle de style simple à la planche graphique, le fichier de dictionnaire de ressources SimpleStyles.xaml est ajouté à votre projet, et est lié au fichier app.xaml de telle sorte que les styles sont définis dans l’étendue de l’application. Vous pouvez afficher tous les styles dans le panneau Ressources.

Pour des exemples d'utilisation de styles simples, voir les rubriques sous Styles simples. Pour plus d'informations sur la procédure à suivre pour gérer des ressources, voir Vue d’ensemble des ressources.

Haut de la page