Créer une apparence pour un contrôle dans un projet Silverlight 2

Vous pouvez personnaliser l’apparence des contrôles système dans Microsoft Silverlight 2 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 le fichier App.xaml, puis les coller dans le fichier App.xaml d’autres projets. En déplaçant vos ressources vers le fichier App.xaml, il 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 dans les contrôles système.

  Le modèle devient une ressource, qui apparaît dans le panneau Ressources. Pour des informations sur la procédure de modification d’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 Silverlight 2.

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, repérez la propriété que vous voulez réutiliser.

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

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

   • Si vous voulez réutiliser un Pinceau, sélectionnez le pinceau et cliquez sur le bouton Convertir le pinceau en 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 de propriétés avancées  en regard de la propriété, puis cliquez sur Convertir en une nouvelle ressource.

     

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

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

   

   Pour des informations sur la procédure à suivre pour 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 des ressources à 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 de propriétés avancées

1. Dans la vue de propriétés  du panneau Propriétés, repérez la propriété que vous voulez définir pour une ressource.

2. Cliquez sur le bouton Options de propriétés avancées , pointez sur Ressource locale et sélectionnez le nom de la ressource depuis 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 que vous voulez définir pour une ressource.

2. Sous 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 la Bibliothèque de composants et en dessinant un nouveau contrôle

1. Dans la boîte à outils, ouvrez la Bibliothèque de composants .

2. Dans l’onglet Styles locaux de la Bibliothèque de composants, sélectionnez le modèle créé.

3. Sur la planche graphique, utilisez le pointeur de votre souris 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 de propriétés 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, repérez la propriété Style.

3. En regard de la propriété Style, cliquez sur le bouton Options de propriétés 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 (éventuellement en anglais).