Définition d'un style pour un contrôle prenant en charge les modèles

Vous pouvez personnaliser les contrôles Windows Presentation Foundation (WPF) et Microsoft Silverlight en créant et en modifiant des modèles et des styles de contrôles. Ceci donne un aspect unique et cohérent à votre application.

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 Création 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 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 : ContentPresenter   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. ItemsHost   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 IsItemsHost = 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 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 Dans le panneau 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 l'élément actuel (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 un style. Utilisation du panneau Ressources (pour modifier un style existant) Dans le panneau Ressources, recherchez le style, puis cliquez sur le bouton Modifier la ressource en regard 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 style, voir Créer un style.	Vous pouvez accéder au mode d’édition d’un modèle de contrôle des manières suivantes : À l’aide du menu Dans le panneau Objets et chronologie, sélectionnez le contrôle. Effectuez l’une des opérations suivantes : Dans le menu Objet, pointez sur Modifier le modèle. Cliquez avec le bouton droit sur le contrôle, pointez sur Modifier le modèle. Cliquez sur Modifier l'élément actuel (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 l'élément actuel 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. 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. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur les éléments Style, pointez sur Modifier le modèle puis cliquez sur Modifier l'élément actuel. 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 l'élément actuel 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 deux fois sur Étendue supérieure  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.
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 Dans le panneau 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 du panneau Composants pour dessiner un contrôle stylisé sur la planche graphique Ouvrez le panneau Composants en cliquant sur Composants . Effectuez l’une des opérations suivantes : Si votre style a été créé dans le document dans lequel vous travaillez, cliquez sur la catégorie Styles. Si votre style a été créé dans un dictionnaire de ressources, développez la catégorie Styles, puis cliquez sur le nom du 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 Dans le panneau 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 modèle dans la liste déroulante qui apparaît. La liste déroulante affiche uniquement les modèles accessibles par le contrôle sélectionné. Par exemple, vous ne pouvez pas appliquer un modèle de zone de texte à un bouton. Utilisation du panneau Composants pour dessiner un contrôle basé sur un modèle sur la planche graphique Les modèles sont contenus dans les styles. Pour appliquer un modèle à un contrôle sur la planche graphique, utilisez la même méthode que pour l'application de styles.

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 la section « Styles simples et dictionnaires de ressources », plus loin dans cette rubrique.

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, 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 des 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.

Méthodes conseillées

Lorsque vous modifiez des styles ou des modèles, veillez à utiliser les méthodes conseillées qui suivent :

• É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 un surlignage jaune autour de la propriété ou par un bouton Options de propriétés avancées jaune . 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é.

Attention :
Lors de la modification de styles et de modèles, il est important de garder à l'esprit les points suivants pour ne pas altérer la fonctionnalité du contrôle système auquel le style ou le modèle est appliqué.

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, WPF utilise un thème pour les applications WPF qui s'exécutent sur 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).

Styles simples et dictionnaires de ressources

Remarque :
Les styles simples ne sont pas pris en charge dans les projets Silverlight.

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 dans la catégorie Styles du panneau 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 plus d'informations sur la procédure à suivre pour gérer des ressources, voir Création de ressources réutilisables.

Voir aussi

Concepts

Conseils d'utilisation des styles simples WPF

Conseils de conception de styles pour les contrôles Silverlight courants