Partager via


Créer ou modifier un modèle de contrôle

Cette page s’applique à WPF et Silverlight 2

Le modèle d’un contrôle dans un projet Microsoft Expression Blend 2 définit son aspect en déterminant les contrôles enfants qui sont contenus dans le contrôle. Par exemple, le modèle d’un contrôle TextBox contient un élément Border nommé Bd, 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 modèle de contrôle est appliqué à un contrôle TextBox sur la planche graphique.

Modification du modèle d’un contrôle TextBox

Cc294908.5b3d19c3-460f-4cd1-8a35-262f8b3005b1(fr-fr,Expression.10).png

Le modèle de contrôle par défaut utilise un thème dynamique qui change l’aspect de votre contrôle selon que votre application s’exécute sur un ordinateur Microsoft Windows XP ou sur un ordinateur Windows Vista. Vous pouvez modifier les éléments (parties d’un contrôle) dans un modèle de contrôle, par exemple pour les réorganiser ou en dessiner de nouveaux dans le contrôle. Cependant, si vous modifiez un modèle pour un contrôle système, votre contrôle aura le même aspect sous Windows XP et sous Windows Vista. Pour plus d’informations, voir la section « Thèmes et styles simples » dans Vue d'ensemble des styles et modèles.

Les modèles de contrôle sont enregistrés sous forme de ressource de style que vous pouvez appliquer à d’autres contrôles du même type.

Cc294908.alert_note(fr-fr,Expression.10).gifRemarque :

Dans un modèle de contrôle, vous pouvez configurer des déclencheurs qui répondent à des changements de propriétés (par exemple IsMouseOver). Vous pouvez notamment créer un déclencheur de propriété pour un contrôle TextBox qui modifie la couleur de l’arrière-plan lorsque le curseur de la souris passe au-dessus du contrôle TextBox.

Si vous souhaitez créer un déclencheur d’événements qui répond à un événement en changeant des propriétés ou en démarrant une animation, vous devez le créer dans un style. Pour plus d’informations, voir Modifier un style.

Cc294908.alert_caution(fr-fr,Expression.10).gifAttention :

Le changement du modèle d’un contrôle peut compromettre la fonctionnalité du contrôle. Au lieu de modifier le modèle d'un contrôle système, vous pouvez utiliser un contrôle simple à style prédéfini qui vous donne une liberté totale sur la conception du modèle. Pour plus d’informations, voir Utilisation des styles simples.

Si aucun des styles simples ne répond à vos besoins et si vous souhaitez modifier le modèle d’un contrôle système, n’oubliez pas de prendre les précautions suivantes :

  • Évitez de changer les déclencheurs existants sauf si vous changez simplement les pinceaux.

  • Ne renommez pas ou ne modifiez pas les éléments dont le nom commence par « PART_ » car il est fait référence à ces éléments dans le code qui implémente le contrôle.

  • Ne réinitialisez pas ou ne changez pas de liaisons dans le panneau Propriétés. Celles-ci sont identifiées par une surbrillance jaune autour de la propriété ou par un bouton jaune Options de propriétés avancées.

  • Si le modèle inclut un élément ContentPresenter ou Presenter (tel qu’un élément ContentPresenter ou ItemsPresenter), assurez-vous de conserver cet élément dans le modèle. Les éléments Presenter affichent du contenu défini dans le contrôle qui utilisera le modèle.

Pour créer un modèle de contrôle

  1. Sous Objets et chronologie ou sur la planche graphique, sélectionnez l’objet à partir duquel vous souhaitez créer un modèle de contrôle et effectuez l’une des opérations suivantes :

    • Dans le menu Objet, pointez sur Modifier des parties du contrôle (Modèle).

    • Cliquez avec le bouton droit sur l’objet sous Objets et chronologie, puis pointez sur Modifier des parties du contrôle (Modèle).

  2. Pointez sur Modifier le modèle, puis effectuez l’une des opérations suivantes :

    • Pour créer un nouveau modèle vide, cliquez sur Créer un élément vide.

    • Pour créer un nouveau modèle basé sur le modèle actuellement utilisé par l’élément sélectionné (qu’il s’agisse du modèle par défaut de l’objet, ou d’un modèle personnalisé précédemment créé), cliquez sur Modifier une copie.

      Cc294908.alert_note(fr-fr,Expression.10).gifRemarque :

      Si l’option Modifier le modèle est activée, un modèle est déjà appliqué à cet objet. Vous pouvez choisir de modifier ce modèle.

    La boîte de dialogue Créer la ressource Style apparaît. Ceci s’explique par le stockage des modèles de contrôles dans une ressource de style.

  3. Sous Nom de la ressource (Clé), effectuez l’une des opérations suivantes :

    • Pour créer un nouveau style nommé pour l’élément, entrez un nom de clé. C’est le nom par lequel d’autres éléments peuvent faire référence au style, appliquant ainsi le modèle.

    • Pour créer un style qui sera utilisé par tous les éléments de ce type, sélectionnez Appliquer à tout.

      Cc294908.alert_tip(fr-fr,Expression.10).gifConseil :

      Dans le code XAML de l’élément de style qui sera créé, un attribut nommé TargetType sera défini au type d’élément pour lequel vous créez le style. Un attribut x:Key sera défini seulement si vous avez entré un nom de clé (la première option ci-dessus). La présence d’un attribut x:Key permet uniquement d’appliquer le style aux éléments qui spécifient le style par le nom de clé. En l’absence d’un attribut x:Key, le style s’applique à tous les éléments de ce type. Par exemple, l’élément de style ci-dessous ne sera pas appliqué à tous les boutons sur la planche graphique.

      <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"...

  4. Sous Définir dans, sélectionnez le nom de l’emplacement où vous souhaitez définir le style :

    • Pour que le style soit disponible dans tout document de votre application, sélectionnez Application.

    • Pour que le style soit disponible seulement dans le document actuel, sélectionnez Ce document (Window: Window)

    • Pour définir le style dans un fichier de dictionnaire de ressources pouvant être réutilisé dans d’autres projets, sélectionnez Dictionnaire de ressources. Vous pouvez ensuite sélectionner un fichier de dictionnaire de ressources existant ou en créer un nouveau.

      Cc294908.alert_note(fr-fr,Expression.10).gifRemarque :

      Les dictionnaires de ressources ne sont pas pris en charge dans Silverlight 2.

  5. Cliquez sur OK pour quitter la boîte de dialogue et ouvrir le style pour modification.

    Cc294908.alert_tip(fr-fr,Expression.10).gifConseil :

    En fait, vous créez ainsi une nouvelle ressource de modèle dans un style. Celle-ci deviendra une ressource locale pouvant être affichée et modifiée aisément à l’aide du panneau Ressources.

  6. Notez le nouveau chemin de navigation Expression Blend 2 en haut de la planche graphique.

    Chemin de navigation avec mode de modification de modèle sélectionné

    Cc294908.eb50efd9-44c6-41f9-8f50-7d40f6c42e61(fr-fr,Expression.10).png

    En cliquant sur les boutons du chemin de navigation, vous pouvez facilement vous déplacer entre le mode de modification de modèle, le mode de modification de style et l’étendue de modification d’objet de l’objet sélectionné. Le chemin de navigation apparaît pour n’importe quel objet sélectionné qui possède un style ou un modèle personnalisé qui lui a été appliqué.

  7. Modifiez votre modèle en ajoutant ou en réorganisant des éléments enfants ou en ajoutant vos déclencheurs de propriétés dans le panneau Interaction. Suivez les recommandations indiquées ci-dessus si vous modifiez le modèle d’un contrôle système.

  8. Pour quitter l’étendue de modification du style, cliquez sur le bouton Étendue supérieureCc294908.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(fr-fr,Expression.10).png sous Objets et chronologie. Vous revenez à l’étendue de modification du document.

    Cc294908.alert_tip(fr-fr,Expression.10).gifConseil :

    Notez qu’une fois que vous avez créé ou appliqué une ressource de style à un objet, une mise en surbrillance verte apparaît dans le panneau Propriétés pour la propriété Style de l’objet sélectionné, afin d’indiquer que l’objet est maintenant lié à cette ressource de style.

Cc294908.7e183f1f-37d8-4dcb-980c-19a5d61ca087(fr-fr,Expression.10).gifHaut de la page

Pour modifier le modèle d’un objet dessiné sur la planche graphique

  • Sur la planche graphique ou sous Objets et chronologie, cliquez sur un objet pour le sélectionner, puis effectuez l’une des opérations suivantes :

    • Dans le menu Objet, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle.

    • Cliquez avec le bouton droit sur l’objet sous Objets et chronologie, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle.

    • Dans le panneau Propriétés, cliquez sur la propriété Style (elle devrait être mise en surbrillance en vert, car vous avez précédemment appliqué un style à cet élément), puis cliquez sur Modifier la ressource dans le menu contextuel. Une fois dans l’étendue de modification du style, cliquez avec le bouton droit sur l’objet Style sous Objets et chronologie, pointez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle.

    Cc294908.alert_note(fr-fr,Expression.10).gifRemarque :

    Si l’option Modifier le modèle est désactivée, aucun modèle n’a été appliqué à l’objet.

    Microsoft Expression Blend entre dans l'étendue de modification du modèle.

Cc294908.7e183f1f-37d8-4dcb-980c-19a5d61ca087(fr-fr,Expression.10).gifHaut de la page

Pour modifier une ressource de modèle

  • Dans le panneau Ressources, localisez votre nom de ressource, puis cliquez sur le bouton Modifier la ressource en regard du nom.

    Expression Blend entre dans l'étendue de modification du modèle.

Cc294908.7e183f1f-37d8-4dcb-980c-19a5d61ca087(fr-fr,Expression.10).gifHaut de la page

Pour modifier un modèle

  1. Dans l’étendue de modification d’un modèle, ajoutez vos déclencheurs de propriétés dans le panneau Interaction, ou ajoutez des éléments enfants au modèle. Suivez les recommandations indiquées ci-dessus si vous modifiez le modèle d’un contrôle système.

  2. Pour quitter l’étendue de modification du modèle, cliquez sur le bouton Étendue supérieureCc294908.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(fr-fr,Expression.10).png sous Objets et chronologie.

    Vous revenez à l’étendue de modification du document.

    Cc294908.alert_tip(fr-fr,Expression.10).gifConseil :

    Notez qu’une fois que vous créez une ressource de modèle ou que vous l’appliquez à un objet, une mise en surbrillance verte apparaît dans le panneau Propriétés, pour la propriété Style de l’objet sélectionné, afin d’indiquer que l’objet est maintenant lié à cette ressource de style.

Cc294908.7e183f1f-37d8-4dcb-980c-19a5d61ca087(fr-fr,Expression.10).gifHaut de la page

Voir aussi

Concepts

Utilisation des styles simples

Essayez ! Créer un bouton à l’aide d’effets bitmap