Pour afficher l’article en anglais, activez la case d’option Anglais. Vous pouvez aussi afficher la version anglaise dans une fenêtre contextuelle en faisant glisser le pointeur de la souris sur le texte.
Traduction
Anglais

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 créer un contrôle utilisateur

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 JJ169938.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(fr-fr,VS.120).png du panneau Propriétés, recherchez la propriété à réutiliser.

    Conseil 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é.

    JJ169938.a1e4026a-4e48-4f0c-8898-3783121e57fa(fr-fr,VS.120).png

    Le texte que vous tapez va permettre de filtrer la liste des propriétés.

    JJ169938.c286ad76-70a6-41f7-bed6-d6d4ad69e549(fr-fr,VS.120).png

    Pour restaurer le panneau Propriétés, cliquez sur le bouton Effacer JJ169938.1d1f5548-6c7a-46bd-9d93-591edc576888(fr-fr,VS.120).png 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 JJ169938.12e06962-5d8a-480d-a837-e06b84c545bb(fr-fr,VS.120).png 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 JJ169938.3a66ec96-47bb-47fc-8876-6b9456feec3a(fr-fr,VS.120).png, ou sélectionnez le point de dégradé JJ169938.a3c9e482-e99b-4504-8a02-9507487d1791(fr-fr,VS.120).png pour la couleur à réutiliser si le pinceau est un Pinceau de dégradéJJ169938.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(fr-fr,VS.120).png. Cliquez ensuite sur le bouton Convertir la couleur en ressource JJ169938.6bf68607-add8-4d87-b6f4-100c8f05dd17(fr-fr,VS.120).png.

      JJ169938.89203705-cf66-46e0-b153-52a23cd744f7(fr-fr,VS.120).png
    • Si vous voulez réutiliser une valeur numérique ou un autre type de valeur, cliquez sur le bouton Options avancées JJ169938.12e06962-5d8a-480d-a837-e06b84c545bb(fr-fr,VS.120).png en regard de la propriété, puis cliquez sur Convertir en nouvelle ressource.

      JJ169938.3f69215a-f522-4347-88fb-f6b219f5419e(fr-fr,VS.120).png
  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.

    JJ169938.97203920-a26b-4bb5-b0ed-9c71ae6973d3(fr-fr,VS.120).png

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

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 sur un bouton de contrôle

    JJ169938.8290ff37-d8e8-479f-89f3-a04118ab186b(fr-fr,VS.120).png
  2. Dans le menu qui s’affiche, sélectionnez la propriété du contrôle à laquelle appliquer la ressource.



    Application d'une ressource à la propriété d'arrière-plan du bouton

    JJ169938.2063f03b-e8ad-46cb-9f12-7898b6bc1f43(fr-fr,VS.120).png

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

  1. Dans la vue de propriétés JJ169938.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(fr-fr,VS.120).png du panneau Propriétés, recherchez la propriété à définir pour une ressource.

  2. Cliquez sur le bouton Options avancées JJ169938.12e06962-5d8a-480d-a837-e06b84c545bb(fr-fr,VS.120).png, 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 JJ169938.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(fr-fr,VS.120).png du panneau Propriétés, sélectionnez le pinceau à définir pour une ressource.

  2. Sous l’onglet Ressources de PinceauJJ169938.415db740-5a54-48d2-8678-245ccfa7ee8b(fr-fr,VS.120).png, sélectionnez le nom de la ressource.

    JJ169938.af28e5e4-4861-45ac-b02d-e65386520ed7(fr-fr,VS.120).png

Pour appliquer une ressource de couleur

  1. Dans la vue de propriétés JJ169938.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(fr-fr,VS.120).png 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é JJ169938.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(fr-fr,VS.120).png, sélectionnez le point de dégradé JJ169938.a3c9e482-e99b-4504-8a02-9507487d1791(fr-fr,VS.120).png pour la couleur.

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

    JJ169938.5cb88f90-c17a-4dad-be87-b6be7d74f410(fr-fr,VS.120).png

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 ComposantsJJ169938.0d8b8d29-1af9-418f-8741-be3097d76eab(fr-fr,VS.120).png.

  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 JJ169938.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(fr-fr,VS.120).png 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 JJ169938.12e06962-5d8a-480d-a837-e06b84c545bb(fr-fr,VS.120).png, 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 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 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+Shift+B) pour vérifier que les nouvelles ressources ont été copiées correctement.

    Conseil 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    x:Class="ProjectName.App" ...

Regardez 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.

Afficher: