Share via


Conseils d'utilisation des styles simples WPF

Cette page s’applique uniquement aux projets WPF

Microsoft Expression Blend vous permet d’aller au-delà de la simple utilisation de contrôles par défaut ou système lors de la conception de l’interface utilisateur pour votre application. Vous pouvez plutôt personnaliser et styliser les contrôles selon votre préférence et au moyen de ressources d’Expression Blend pour leur conférer un aspect unique et attrayant permettant de différencier votre application des autres afin de fournir une expérience unique ou de créer une interface utilisateur cohérente dans toutes vos applications.

Qu’est-ce que les styles simples ?

Les styles simples sont un ensemble de ressources de style personnalisées et prêtes à l’emploi pour un ensemble de contrôles système communs, comme les contrôles Button et ListBox . Expression Blend propose ces ressources de style simples car la modification du style d’un contrôle système nécessite certaines connaissances des styles et modèles de Windows Presentation Foundation (WPF) afin de ne pas affecter la fonctionnalité du contrôle. Vous pouvez utiliser les styles simples dans Expression Blend comme un ensemble de ressources autonomes que vous pouvez rapidement modifier pour conférer à votre application un aspect unique, sans disposer d’une parfaite compréhension des styles et modèles de WPF.

Création d’un contrôle de style simple

Les styles simples sont disponibles dans le panneau Composants, dans la catégorie Styles, en cliquant sur Styles simples. Après la sélection d’un style simple dans le panneau Composants, l’icône du style simple apparaît sous le bouton ComposantsCc294894.0d8b8d29-1af9-418f-8741-be3097d76eab(fr-fr,Expression.40).png et est sélectionnée, prête à être dessinée sur la planche graphique. Lorsque vous dessinez un style simple (tel que SimpleButton ) sur la planche graphique, vous créez en fait une instance du contrôle système (tel que le contrôle Button ), mais en lui appliquant le style SimpleButton .

Le panneau Composants présentant les contrôles de style simple disponibles

Cc294894.7ac13e33-029a-4ce3-aa85-ca623b6b9caa(fr-fr,Expression.40).png

Le tableau suivant répertorie les styles simples disponibles et les contrôles auxquels ils s’appliquent.

Style simple Contrôle auquel il s’applique Icône

SimpleButton

Button

Cc294894.05df1779-a68f-436b-b834-a91b7995a3ec(fr-fr,Expression.40).png

SimpleCheckBox

CheckBox

Cc294894.91bc7bff-27d2-4dfe-93ab-844f2952186f(fr-fr,Expression.40).png

SimpleComboBox

ComboBox

Cc294894.b174a511-dd12-4a45-a986-034de7693de9(fr-fr,Expression.40).png

SimpleComboBoxItem

ComboBoxItem

SimpleExpander

Expander

Cc294894.a9e00db8-c14d-404f-88cb-5f37a41bc783(fr-fr,Expression.40).png

SimpleLabel

Label

Cc294894.a27042f1-4067-4239-b99a-8b2e4c223de0(fr-fr,Expression.40).png

SimpleListBox

ListBox

Cc294894.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(fr-fr,Expression.40).png

SimpleListBoxItem

ListBoxItem

SimpleMenu

Menu

Cc294894.015a263c-0b2b-4253-ac57-b86fcb8c9591(fr-fr,Expression.40).png

SimpleMenuItem

MenuItem

Cc294894.82c89430-1209-4aa1-b534-cf1cedac74c7(fr-fr,Expression.40).png

SimpleProgressBar

ProgressBar

Cc294894.1a4a4117-497e-4920-acaa-d84cb5a1ce83(fr-fr,Expression.40).png

SimpleRadioButton

RadioButton

Cc294894.33646a24-f5a1-4b74-9496-e0aaddb922c6(fr-fr,Expression.40).png

SimpleRepeatButton

RepeatButton dans un contrôle ListBox

SimpleScrollBar

ScrollBar

Cc294894.6513a026-499e-4296-8a67-7558b466bd33(fr-fr,Expression.40).png

SimpleScrollBarRepeatButtonStyle

RepeatButton dans un contrôle ScrollBar

SimpleScrollViewer

ScrollViewer

Cc294894.5ca26a94-31cd-4fda-83c5-a9564b5b019d(fr-fr,Expression.40).png

SimpleSeparator

Separator dans un contrôle ListBox , Menu , ou ToolBar

SimpleSlider

Slider

Cc294894.bf689d92-3c74-4218-815c-e98c930ac189(fr-fr,Expression.40).png

SimpleSliderThumb

Thumb dans un contrôle Slider

SimpleTabControl

TabControl

Cc294894.f13847cd-7fdf-4757-a648-d5ece98fcaea(fr-fr,Expression.40).png

SimpleTabItem

TabItem dans un TabControl

SimpleTextBox

TextBox

Cc294894.343296b4-5c7d-4145-84cc-91b08ba67a1b(fr-fr,Expression.40).png

SimpleThumbStyle

Thumb dans un ScrollBar dans un contrôle ListBox

SimpleTreeView

TreeView

Cc294894.39c99139-8723-49c9-a3e7-f99232d939cb(fr-fr,Expression.40).png

SimpleTreeViewItem

TreeViewItem dans un contrôle TreeView

SimpleTreeViewItemToggleButton

ToggleButton dans un contrôle TreeView

Modification de styles simples

Les ressources de style simple sont contenues dans un dictionnaire de ressources nommé SimpleStyles.xaml. Après l’ajout d’un style simple à la planche graphique à partir du panneau Outils, le dictionnaire de ressources SimpleStyles.xaml est ajouté à votre projet, et toutes les ressources de style simple sont visibles dans le panneau Ressources.

Le dictionnaire de ressources SimpleStyles.xaml inclut des ressources pinceau et d’autres modèles qui sont utilisés par les styles simples. Vous pouvez effectuer les modifications suivantes aux styles simples :

  • Changer les couleurs    Les couleurs qui sont utilisées par tous les styles simples sont stockées sous forme de ressources modifiables.

    Pour changer l’une des ressources de couleur, cliquez sur le bouton montrant une flèche vers le bas en regard de la ressource de couleur dans le panneau Ressources.

    Pour plus d’informations sur les pinceaux, voir Définition de couleurs, de pinceaux et de masques.

    Choisir de modifier une ressource pinceau dans le panneau Ressources

    Cc294894.64136c65-52bc-4225-a948-b1171634baca(fr-fr,Expression.40).png

  • **Changer le style  ** Vous pouvez utiliser le style d’un contrôle dans Expression Blend pour spécifier les propriétés et les déclencheurs qui seront utilisés par défaut par le contrôle auquel le style est appliqué. Les propriétés (telles que la couleur du pinceau d’arrière-plan) affectent l’aspect du contrôle, et les déclencheurs déterminent comment le contrôle répond aux changements de propriétés et aux événements. Par exemple, le style SimpleButton inclut un déclencheur pour la propriété IsMouseOver de telle sorte que l’aspect du bouton change lorsque l’utilisateur place le pointeur de la souris au-dessus du contrôle. Le déclencheur se produit lorsque la propriété IsMouseOver passe de False à True .

    Pour changer l’un des styles simples, cliquez sur le bouton Modifier la ressource en regard du style simple dans le panneau Ressources.

    Choisir de modifier une ressource pinceau dans le panneau Ressources

    Cc294894.a6080791-03cf-43ae-9476-22d33e9d8ce4(fr-fr,Expression.40).png

  • Changer le modèle du contrôle    Le modèle d’un contrôle définit son aspect en déterminant les contrôles enfants qui sont contenus dans le contrôle. Par exemple, le modèle de contrôle pour l’objet SimpleTextBox contient un objet Grid qui contient à son tour un objet Border qui contient un objet ScrollViewer nommé PART_ContentHost . L’objet ScrollViewer affiche le contenu de la TextBox lorsque le style SimpleTextBox est appliqué à une TextBox sur la planche graphique. A l'instar du style, vous pouvez définir des déclencheurs de propriétés et d'événements dans le modèle de contrôle.

    Pour modifier le modèle de contrôle pour un style simple, cliquez sur le bouton Modifier la ressource en regard du style simple dans le panneau Ressources cliquez avec le bouton droit sur l'élément Style qui apparaît dans le panneau Objets et chronologie, pointez sur Modifier le modèle, puis cliquez sur Modifier l'élément actuel.

    Choisir de modifier le modèle de contrôle lors d’un démarrage à partir de l’étendue d’édition du style

    Cc294894.a64c8f57-1243-4482-87ad-b9d5aac62867(fr-fr,Expression.40).png

    tip noteConseil :

    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. Il est important de s’en souvenir lors du choix entre Modifier une copie et Modifier l'élément actuel.

Pour une comparaison détaillée entre styles et modèles, voir Application d’un style à un contrôle prenant en charge les modèles.

Application d’une ressource de style à un contrôle existant sur la planche graphique

Les styles simples sont des ressources pouvant être appliquées et gérées comme toute autre ressource.

Pour obtenir un exemple, voir Appliquer une ressource de style.

Pour informations sur les ressources, voir Création de ressources réutilisables.

Copyright © 2011 Microsoft Corporation. Tous droits réservés.