Utilisation des styles simples

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.

Remarque :

Les styles simples Expression Blend ne sont pas disponibles 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.

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.

Haut de la page

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

Les styles simples sont disponibles dans la Bibliothèque de composants, sous l’onglet Contrôles, en cliquant sur Styles simples. Activez la case à cocher Afficher tout pour voir tous les styles simples disponibles. Après la sélection d’un style simple dans la Bibliothèque de composants, l’icône du style simple apparaît au-dessus du bouton Bibliothèque de 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.

Si vous souhaitez que les styles simples soient appliqués aux outils disponibles dans les listes déroulantes de certains des outils de la boîte à outils, vous pouvez cliquer sur le bouton Utiliser par défaut dans la Bibliothèque de composants lorsque Styles simples est sélectionné dans l’onglet Contrôles.

La Bibliothèque de composants montrant les contrôles de style simple disponibles, et l’option pour en faire les styles par défaut

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

Haut de la page

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 de la boîte à 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 Vue d’ensemble sur l’apparence.

  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. Tout comme le style, vous pouvez définir des déclencheurs de propriété et d’événements dans le modèle de contrôle. Pour changer le modèle de contrôle d’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 sous Objets et chronologie, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle.

  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 le modèle.

Pour une comparaison détaillée entre styles et modèles, voir Styles et modèles. Pour obtenir des informations spécifiques sur les styles simples, ainsi que des exemples de modification des styles simples et des modèles de contrôle, voir les rubriques sous Référence et Essayez ! dans Styles simples.

Haut de la page

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 dans ce Guide de l’utilisateur. Pour plus d’informations sur les ressources, voir Vue d’ensemble des ressources dans ce Guide de l’utilisateur.

Haut de la page