Créer un habillage pour les contrôles de votre projet

Vous pouvez personnaliser l’apparence des contrôles en utilisant des ressources statiques pour définir des modèles appliqués aux contrôles. Par exemple, vous pouvez créer un modèle pour un bouton qui utilise des images au lieu de rectangles pour créer l’apparence du bouton.

Pour créer un aspect commun parmi plusieurs modèles de contrôles ou parmi différents contrôles utilisateur, vous pouvez convertir des propriétés individuelles en ressources statiques, puis les appliquer aux modèles et contrôles utilisateur. Par exemple, vous pouvez convertir la couleur de bordure d’un modèle de bouton en une ressource, puis l’appliquer à la propriété de bordure d’un modèle de case à cocher ou d’un contrôle utilisateur personnalisé.

Pour réutiliser vos modèles et ressources dans d’autres projets, vous pouvez déplacer les ressources dans un fichier du dictionnaire de ressources, puis ajouter ce fichier à d’autres projets. Le fichier du dictionnaire de ressources devient un référentiel pour l’apparence de votre application.

Pour créer un modèle d’un contrôle

• Pour personnaliser le modèle de tout contrôle, vous pouvez utiliser les procédures dans Modifier l’apparence d’un contrôle système dans différents états et Modifier la durée de transition entre les changements d’états.

  Le modèle devient une ressource, qui apparaît dans le panneau Ressources.

  Pour plus d'informations sur la manière de modifier une ressource après l'avoir créée, voir Modifier une ressource.

Pour créer un contrôle utilisateur

• Pour créer entièrement un contrôle utilisateur personnalisé, vous pouvez utiliser les procédures dans Créer un contrôle utilisateur dans votre projet.

Pour convertir une propriété en ressource statique

1. Sélectionnez sur la planche graphique un objet qui a une valeur de propriété que vous voulez réutiliser dans d’autres contrôles.

2. Dans la vue de propriétés du panneau Propriétés, recherchez la propriété à réutiliser.

   Conseil :
   Vous pouvez utiliser la zone de texte Rechercher du panneau Propriétés pour trouver rapidement une propriété en recherchant des caractères dans le nom de la propriété. Le texte que vous tapez va permettre de filtrer la liste des propriétés. Pour restaurer le panneau Propriétés, cliquez sur le bouton Effacer  en regard de la zone de texte Rechercher.

3. Effectuez l’une des opérations suivantes :

   • Si vous voulez réutiliser un pinceau, cliquez sur Options avancées  en regard de la propriété de pinceau (comme Fill ou Background ), puis cliquez sur Convertir en nouvelle ressource.

   • Si vous voulez réutiliser une couleur appliquée à un pinceau, sélectionnez le pinceau s’il s’agit d’un Pinceau de couleur unie , ou sélectionnez le point de dégradé  pour la couleur à réutiliser si le pinceau est un Pinceau de dégradé . Cliquez ensuite sur le bouton Convertir la couleur en ressource .

     

   • Si vous voulez réutiliser une valeur numérique ou un autre type de valeur, cliquez sur le bouton Options avancées  en regard de la propriété, puis cliquez sur Convertir en nouvelle ressource.

     

4. Dans la boîte de dialogue qui s’affiche (nommée Créer la ressource <type>), tapez un nom significatif pour votre ressource, puis cliquez sur OK.

   La ressource est créée et apparaît dans le panneau Ressources.

   

   Pour plus d'informations sur la manière de modifier une ressource après l'avoir créée, voir Modifier une ressource.

Pour appliquer une ressource à une autre propriété

Il existe de nombreuses façons pour appliquer une ressource à une propriété.

Pour appliquer une ressource en la faisant glisser depuis le panneau Ressources

1. À partir du panneau Ressources, faites glisser une ressource sur un contrôle de la planche graphique.

   Déplacement d'une ressource de famille de polices sur un contrôle de case à cocher

   

2. Dans le menu déroulant qui s’affiche, sélectionnez la propriété du contrôle à laquelle appliquer la ressource.

   Application d’une ressource de famille de polices à la propriété FontFamily de la case à cocher

   

Pour appliquer une ressource à l’aide du menu Options avancées

1. Dans la vue de propriétés  du panneau Propriétés, recherchez la propriété à définir pour une ressource.

2. Cliquez sur le bouton Options avancées , pointez sur Ressource locale et sélectionnez le nom de la ressource dans la liste déroulante affichée.

Pour appliquer une ressource pinceau

1. Dans la vue de propriétés  du panneau Propriétés, sélectionnez le pinceau à définir pour une ressource.

2. Dans l’onglet Ressources de pinceau , sélectionnez le nom de la ressource.

   

Pour appliquer une ressource de couleur

1. Dans la vue de propriétés  du panneau Propriétés, sélectionnez le pinceau dont vous voulez définir la couleur pour une ressource. Si le pinceau est un Pinceau de dégradé , sélectionnez le point de dégradé  pour la couleur.

2. Sous l’onglet Ressources de couleur, sélectionnez le nom de la ressource.

   

Pour appliquer un modèle à un autre contrôle de même type

Il existe de nombreuses façons d’appliquer des modèles à des contrôles.

Pour appliquer un modèle en le sélectionnant dans le panneau Composants et en dessinant un nouveau contrôle

1. Dans le panneau Outils, cliquez sur Composants .

2. Dans la catégorie Styles du panneau Composants, sélectionnez le modèle créé.

3. Sur la planche graphique, utilisez le pointeur pour dessiner un rectangle englobant.

   Un nouveau contrôle correspondant au modèle sélectionné est tracé, et le modèle est automatiquement appliqué.

Pour appliquer un modèle en le faisant glisser depuis le panneau Ressources

1. À partir du panneau Ressources, faites glisser une ressource de modèle sur un contrôle de la planche graphique.

2. Depuis la liste déroulante qui apparaît, sélectionnez la propriété Style.

Pour appliquer un modèle à l’aide du menu Options avancées

1. Sélectionnez l’objet auquel appliquer un modèle.

2. Dans la vue de propriétés  du panneau Propriétés, recherchez la propriété  Style .

3. En regard de la propriété  Style , cliquez sur le bouton Options avancées , pointez sur Ressource locale, puis sélectionnez le nom du modèle dans la liste déroulante affichée.

Pour déplacer des ressources vers le fichier App.xaml

• Si vous n’avez pas défini vos ressources dans le fichier App.xaml lors de leur création, vous pouvez déplacer vos ressources vers le fichier App.xaml en les faisant glisser dans le panneau Ressources.

  Conseil :
  Si vous ne voyez pas vos ressources, vous devrez peut-être développer les nœuds sous le nœud du document (généralement Page.xaml).

Pour copier des ressources dans d’autres projets

1. Depuis le panneau Projets, double-cliquez sur le fichier App.xaml pour l’ouvrir sur la planche graphique.

2. Le fichier App.xaml ne peut pas être affiché en mode Création. Sélectionnez l’onglet XAML du côté droit de la planche graphique.

3. Les ressources sont définies entre des balises <Application.Resources>.

   <Application.Resources>
   </Application.Resources>
   

   Entre ces balises, les ressources de propriétés sont définies dans des balises qui représentent leur type de propriété. L’attribut Key représente le nom donné à la ressource.

     <FontFamily x:
       Key="ApplicationFont"
     >Segoe UI</FontFamily>
     <LinearGradientBrush x:
       Key="BorderBrush"
      EndPoint="0.5,1" StartPoint="0.5,0">
       <GradientStop Color="#FF000000"/>
       <GradientStop Color="#FFC64545" Offset="1"/>
     </LinearGradientBrush>
   

   Les modèles sont définis entre des balises <Style>. L’attribut Key représente le nom donné au modèle.

     <Style x:
       Key="ImageButton"
      TargetType="Button">
       <Setter Property="Background" Value="#FF1F3B53"/>
       <Setter Property="Template">
         ...
       </Setter>
     </Style>
   

4. Mettez en surbrillance le XAML qui représente les ressources à déplacer vers un autre projet, puis appuyez sur Ctrl+C pour les copier.

5. Ouvrez l’autre projet dans Expression Blend, ouvrez le fichier App.xaml sur la planche graphique en mode XAML, insérez le pointeur juste après la balise <Application.Resources> et appuyez sur Ctrl+V pour coller les ressources.

6. Vérifiez qu’aucun nom de clé n’est dupliqué dans une ressource préexistante.

7. Générez le projet (Ctrl+Maj+B) pour vérifier que les nouvelles ressources ont été copiées correctement.

   Conseil :
   Vous pouvez aussi copier le fichier App.xaml entier dans un nouveau projet puis simplement remplacer le nom dans l’attribut x:Class par le nom du nouveau projet. <Application xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" x:Class="ProjectName.App" ...

Étapes suivantes

• Vous pouvez regarder comment créer une apparence de contrôle pour un bouton et une case à cocher dans les vidéos de procédure sur le site Web de la communauté d’Expression .

Voir aussi

Concepts

Conseils de conception de styles pour les contrôles Silverlight courants
Conseils d'utilisation des styles simples WPF

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