Conseils de conception de styles pour les styles simples WPF dans Blend

Blend for Visual Studio 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’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 ressources de style personnalisées prêtes à être utilisée pour un ensemble de contrôles système communs, comme les contrôles Button et ListBox. Blend fournit ces ressources de style simple car le fait de modifier le style d'un contrôle système requiert une certaine connaissance des styles et des modèles de Windows Presentation Foundation (WPF) afin de ne pas compromettre la fonctionnalité du contrôle. Vous pouvez utiliser les styles simples dans 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 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	Button
SimpleCheckBox	CheckBox
SimpleComboBox	ComboBox
SimpleComboBoxItem	ComboBoxItem
SimpleExpander	Expander
SimpleLabel	Label
SimpleListBox	ListBox
SimpleListBoxItem	ListBoxItem
SimpleMenu	Menu
SimpleMenuItem	MenuItem
SimpleProgressBar	ProgressBar
SimpleRadioButton	RadioButton
SimpleRepeatButton	RepeatButton dans un contrôle ListBox
SimpleScrollBar	ScrollBar
SimpleScrollBarRepeatButtonStyle	RepeatButton dans un contrôle ScrollBar
SimpleScrollViewer	ScrollViewer
SimpleSeparator	Separator dans un contrôle ListBox, Menu, ou ToolBar
SimpleSlider	Slider
SimpleSliderThumb	Thumb dans un contrôle Slider
SimpleTabControl	TabControl
SimpleTabItem	TabItem dans un TabControl
SimpleTextBox	TextBox
SimpleThumbStyle	Thumb dans un 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 avoir ajouté un style simple à la planche graphique 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 dans Blend.

  Choisir de modifier une ressource pinceau dans le panneau Ressources

  

• **Changer le style  ** Vous pouvez utiliser le style d’un contrôle dans 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 modifier un des styles simples dans le panneau Ressources, sélectionnez Styles.xaml simple puis le bouton Modifier la ressource en regard du style simple à modifier.

• 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

  

  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 dans Blend.

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, consultez Appliquer une ressource de style dans Blend.

Pour plus d’informations sur les ressources, voir Création de ressources réutilisables dans Blend.