Conseils d'utilisation des styles simples 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 constituent un ensemble de ressources de style personnalisées et prêtes à l’emploi pour un ensemble de contrôles système, comme les contrôles Button et ListBox. Expression Blend fournit ces ressources de style simple car la modification du style d’un contrôle système nécessite une bonne connaissance des styles et des modèles WPF (Windows Presentation Foundation) pour ne pas altérer 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 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 Composants 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
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 |
Bouton |
|
SimpleCheckBox |
CheckBox |
|
SimpleComboBox |
ComboBox |
|
SimpleComboBoxItem |
ComboBoxItem |
|
SimpleExpander |
Expander |
|
SimpleLabel |
Étiquette |
|
SimpleListBox |
ListBox |
|
SimpleListBoxItem |
ListBoxItem |
|
SimpleMenu |
Menu |
|
SimpleMenuItem |
MenuItem |
|
SimpleProgressBar |
ProgressBar |
|
SimpleRadioButton |
RadioButton |
|
SimpleRepeatButton |
RepeatButton dans un contrôle ListBox |
|
SimpleScrollBar |
ScrollBar [ScrollBar] |
|
SimpleScrollBarRepeatButtonStyle |
RepeatButton dans un contrôle ScrollBar |
|
SimpleScrollViewer |
ScrollViewer |
|
SimpleSeparator |
Séparateur dans un contrôle ListBox, Menu ou ToolBar |
|
SimpleSlider |
Slider |
|
SimpleSliderThumb |
Thumb dans un contrôle Slider |
|
SimpleTabControl |
TabControl |
|
SimpleTabItem |
TabItem dans un contrôle TabControl |
|
SimpleTextBox |
TextBox |
|
SimpleThumbStyle |
Thumb dans un élément ScrollBar dans un contrôle ListBox |
|
SimpleTreeView |
TreeView |
|
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
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
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 de l’élément SimpleTextBox contient un élément Grid, qui contient un élément Border, qui lui-même contient un élément ScrollViewer nommé PART_ContentHost. L’élément ScrollViewer affiche le contenu du contrôle TextBox lorsque le style SimpleTextBox est appliqué à un contrôle 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
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. 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 Définition d'un style pour 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.