Essayez ! créer un contrôle WPF personnalisé

Microsoft Expression Blend fournit un certain nombre de contrôles système et de styles simples que vous pouvez utiliser dans vos applications Windows Presentation Foundation (WPF). Cependant, si ces contrôles ou styles ne répondent pas à vos besoins spécifiques, vous pouvez créer un contrôle personnalisé en créant une classe Microsoft .NET qui hérite de l’une des classes System.Windows.Controls.

Remarque :

Cette rubrique contient des informations concernant les applications Windows Presentation Foundation. Pour plus d’informations sur Microsoft Silverlight 1.0, voir Vue d’ensemble de Silverlight 1.0 et le centre de formation Silverlight. Consultez également les exemples Silverlight 1.0 qui accompagnent Expression Blend 2, certains d’entre eux utilisant des classes JavaScript pour définir des objets réutilisables. Dans le menu Aide (?), cliquez sur Écran d’accueil, puis sélectionnez l’onglet Exemples. Les exemples MagnifyingGlass, ButtonGallery et BlendPlayer sont des exemples Silverlight 1.0.

Les procédures suivantes montrent comment créer un contrôle bouton personnalisé qui inclut une nouvelle propriété contenant le chemin d’accès d’un fichier image afin d’afficher une image. Pour consulter un exemple de création de contrôle utilisateur sans utiliser de code, et par conséquent sans propriétés personnalisées, voir Essayez ! Créer un contrôle utilisateur WPF.

Pour plus d’informations sur les contrôle personnalisés, y compris les exemples de code et XAML, voir Vue d’ensemble de la création de contrôles et DependencyProperty, classe dans la section Windows Presentation Foundation sur MSDN.

Pour définir un contrôle personnalisé

1. Dans le panneau Projet, localisez le fichier Window1.xaml et développez-le pour révéler le fichier code-behind de votre projet, qui se nomme Window1.xaml.cs. Si vous avez choisi Microsoft Visual Basic comme langage lors de la création de votre projet, le fichier code-behind se nomme Window1.xaml.vb. Double-cliquez sur le fichier code-behind pour l’ouvrir pour modification.

   Remarque :

   Le fichier code-behind s’ouvre dans Microsoft Visual Studio 2008 si ce programme est installé. Sinon, le fichier code-behind s’ouvre dans l’application mappée à l’extension de fichier du fichier code-behind. Par exemple, si vous avez ouvert un fichier .cs ou .vb dans le Bloc-notes, Expression Blend ouvre le fichier dans le Bloc-notes. Pour obtenir de l’aide sur l’ouverture des fichiers code-behind, voir Modifier un fichier code-behind.

2. Dans le fichier Window1.xaml.cs, collez le code source de définition de classe suivant juste avant la dernière accolade fermante (}) du fichier. (Pour Visual Basic, collez le code approprié juste avant End Namespace ou juste après le dernier End Class.)

   public class ImageButton : Button 
   { 
     public ImageSource Source 
     { 
       get { return base.GetValue(SourceProperty) as ImageSource; } 
       set { base.SetValue(SourceProperty, value); } 
     } 
     public static readonly DependencyProperty SourceProperty = 
       DependencyProperty.Register("Source", typeof(ImageSource), typeof(ImageButton)); 
   }
   

   Class ImageButton
     Inherits Button
     Public Property Source() As ImageSource
       Get
         Return CType(MyBase.GetValue(SourceProperty), ImageSource)
       End Get
       Set(ByVal value As ImageSource)
         MyBase.SetValue(SourceProperty, value)
       End Set
     End Property
     Public Shared ReadOnly SourceProperty As DependencyProperty = DependencyProperty.Register("Source", GetType(ImageSource), GetType(ImageButton))
   End Class
   

3. Enregistrez le fichier code-behind modifié, puis fermez Visual Studio ou toute autre application utilisée pour modifier le fichier.

   Conseil :

   La classe ImageButton illustre le modèle propriété de dépendance. De façon externe, la classe expose la propriété nommée Source de l’environnement CLR (Common Language Runtime, c’est-à-dire .NET), qui est de type ImageSource. La classe enregistre et expose également un champ de propriété de dépendance en lecture seule nommé SourceProperty, et met en œuvre les accesseurs CLR pour la propriété Source dans les termes de la propriété de dépendance. Renforcer une propriété CLR avec une propriété de dépendance enregistrée signifie que WPF peut fournir une multitude de services à votre propriété. Ces services incluent l’intégration des styles, la liaison des données, l’héritage des valeurs, les valeurs par défaut et l’animation. WPF comporte également la fonction liaison de modèle permettant de lier la valeur d’une propriété à partir d’un modèle de contrôle. Ce didacticiel illustre la liaison de modèle en action.

   Conseil :

   Si vous préférez conserver votre code source de définition de classe de contrôle personnalisé dans un fichier de code source distinct, vous pouvez le faire. En remplacement des deux étapes précédentes, vous pouvez créer un nouveau fichier nommé ImageButton.cs, coller le code source dans ce fichier avec la déclaration d’espace de noms et le même ensemble de directives using à partir du fichier code-behind de votre document, puis ajouter le nouveau fichier à votre projet (dans le menu Projet, cliquez sur Ajouter un élément).

4. Vous devez maintenant construire votre projet de façon que le nouveau contrôle ImageButton apparaisse dans la Bibliothèque de composants. Dans le menu Projet d’Expression Blend, cliquez sur Générer le projet (ou appuyez sur Ctrl+Maj+B). Vérifiez que la génération s’est terminée sans erreur.

5. Revenez à l’édition de Window1.xaml dans Expression Blend.

6. Dans la Boîte à outils à gauche d’Expression Blend, cliquez sur Bibliothèque de composants .

   Cela ouvre la Bibliothèque de composants et vous montre tous les contrôles, panneaux et éléments que vous pouvez placer dans votre document.

7. Dans l’onglet Contrôles personnalisés, sélectionnez le contrôle ImageButton dans la liste.

   L’icône Boîte à outils au-dessus du bouton Bibliothèque de composants correspond maintenant à votre contrôle ImageButton, et est déjà sélectionnée pour vous permettre de faire glisser le contrôle sur la planche graphique.

   Remarque :
   Les contrôles personnalisés n’apparaissent dans l’onglet Contrôles personnalisés de la Bibliothèque de composants que si vous avez ajouté le code source à votre projet et effectué une génération (Ctrl+Maj+B).

8. L’icône ImageButton étant sélectionnée dans la boîte à outils, dessinez un contrôle ImageButton en cliquant sur la planche graphique et en dessinant un rectangle englobant à l’intérieur du document.

   Le contrôle ImageButton s’affiche sur la planche graphique et un élément ImageButton nommé [ImageButton] "ImageButton" est répertorié comme élément enfant de LayoutRoot sous Objets et chronologie dans le panneau Interaction.

Haut de la page

Pour modifier le style de votre contrôle personnalisé

1. Pour créer un modèle de contrôle pour tous les éléments ImageButton, cliquez avec le bouton droit sur le nouveau contrôle ImageButton, cliquez sur Modifier des parties du contrôle (Modèle), puis sur Modifier une copie.

   La boîte de dialogue Créer la ressource Style apparaît.

2. Dans le champ Nom de la ressource (clé) de la boîte de dialogue Créer la ressource Style, dans la zone de texte en regard de la première case d’option, tapez ImageButtonStyle.

   Cela définit un nom pour votre modèle dans le dictionnaire de ressources afin que vous puissiez le définir comme modèle pour tout élément ImageButton.

   Remarque :
   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.

3. Dans le champ Définir dans, sélectionnez la case d’option Ce document et assurez-vous que Window: Window est sélectionné dans la liste déroulante.

   Le champ Définir dans indique le dictionnaire de ressources dans lequel le nouveau modèle doit être défini. Si vous sélectionnez Window: Window, le modèle sera visible par tous les contrôles ImageButton de la fenêtre.

4. Cliquez sur OK.

   Vous avez maintenant copié le modèle de contrôle par défaut de tous les éléments ImageButton et vous avez enregistré la copie sous un nouveau modèle ControlTemplate nommé ImageButtonStyle. Le nouveau modèle a été placé dans le dictionnaire de ressources, que vous pouvez consulter dans le nœud Window du panneau Ressources.

   Avec la création d’un nouveau modèle, Expression Blend entre dans un mode dans lequel vous pouvez afficher et modifier le nouveau modèle. Sous Objets et chronologie dans le panneau Interaction, le mot Modèle au-dessus de la nouvelle arborescence d’éléments indique l’étendue actuelle d’édition. Le modèle inclut un élément ContentPresenter qui affiche automatiquement la valeur de la propriété Content du contrôle ImageButton utilisant ce modèle.

   Conseil :

   Pour quitter le mode d’édition de modèle et revenir à l’étendue de votre document, cliquez sur le bouton Étendue supérieure , qui se trouve au-dessus de l’arborescence d’éléments en regard du mot ImageButtonStyle. Pour revenir au mode d’édition de modèle pour un modèle existant, cliquez avec le bouton droit sur l’élément dont vous souhaitez modifier le modèle sous Objets et chronologie dans le panneau Interaction (dans ce cas, l’élément [ImageButton] "ImageButton"), cliquez sur Modifier des parties du contrôle (Modèle), puis cliquez sur Modifier le modèle.

5. Sous Objets et chronologie, cliquez avec le bouton droit sur l’objet ContentPresenter, pointez sur Grouper, puis cliquez sur Grid.

   L’objet ContentPresenter devient un élément enfant d’un nouvel objet Grid. Sans l’objet Grid, vous ne pourriez pas ajouter un second élément enfant au modèle parce que l’élément ButtonChrome ne peut contenir qu’un élément enfant.

6. L’objet Grid étant sélectionné sous Objets et chronologie, localisez les propriétés Width et Height dans la catégorie Disposition du panneau Propriétés. Cliquez sur le bouton Options de propriétés avancées  en regard de chacune des propriétés, puis cliquez sur Rétablir.

7. Pour diviser la grille en deux colonnes, double-cliquez sur l’objet Grid sous Objets et chronologie afin d’activer la grille, puis à l’aide de l’outil Sélection  sélectionné dans la Boîte à outils, déplacez le pointeur de la souris sur la zone de règle bleue épaisse en haut de la Grille sur la planche graphique. Une règle de colonne orange suit le pointeur de souris pour indiquer à quel endroit un nouveau diviseur de colonnes sera placé si vous cliquez.

   Cliquez pour créer un nouveau diviseur de colonnes au milieu de la Grille.

   Un diviseur de colonne bleu apparaît à l’intérieur de la Grille.

8. Sélectionnez l’outil Image  dans l’onglet Contrôles de la Bibliothèque de composants (activez la case à cocher Afficher tout). L’élément Grid étant toujours activé sous Objets et chronologie dans le panneau Interaction, dessinez un nouveau contrôle Image à l’intérieur de la colonne droite de l’élément Grid. 

9. Le nouvel élément Image étant sélectionné sous Objets et chronologie, regardez sous Propriétés communes dans le panneau Propriétés. Cliquez sur le bouton Options de propriétés avancées  à droite de la propriété Source, pointez sur Liaison de modèle et cliquez sur Source.

   Vous venez de lier par modèle la propriété Source du contrôle Image à la propriété Source du contrôle ImageButton utilisant ce modèle.

10. Vous avez maintenant terminé l’édition du modèle. Pour quitter l’étendue de l’élément racine, cliquez sur Étendue supérieure sous Objets et chronologie.

11. Votre contrôle ImageButton étant sélectionné sous Objets et chronologie, localisez la propriété Source dans la catégorie Divers du panneau Propriétés, et attribuez-lui comme valeur le chemin d’accès d’un fichier image sur votre ordinateur.

    L’image s’affiche du côté droit du contrôle ImageButton.

Haut de la page

Pour appliquer le style à un autre contrôle personnalisé

1. Dans l’onglet Contrôles personnalisés de la Bibliothèque de composants, sélectionnez le contrôle ImageButton. Dessinez un nouveau contrôle ImageButton sur la planche graphique.

2. Cliquez avec le bouton droit sur le nouveau contrôle ImageButton, cliquez sur Modifier des parties du contrôle (Modèle), cliquez sur Appliquer la ressource, puis sur le nom de votre style, ImageButtonStyle.

   Le style ImageButtonStyle est appliqué à votre nouveau contrôle ImageButton. Localisez la propriété Source dans la catégorie Divers du panneau Propriétés, puis attribuez-lui comme valeur le chemin d’accès d’un fichier d’image sur votre ordinateur.

   Remarque :
   Vous pouvez également ajouter un contrôle ImageButton à la planche graphique qui est déjà stylisé au moyen de votre modèle. Dans l’onglet Styles locaux de la Bibliothèque de composants, sélectionnez ImageButtonStyle, puis dessinez le contrôle ImageButton stylisé sur la planche graphique.

Haut de la page

Avancé : appliquer des descriptions à votre propriété personnalisée

1. Dans le haut du fichier code-behind (Window1.xaml.cs), ajoutez une référence à l’espace de noms System.ComponentModel.

   Les attributs Description et Category utilisés ci-dessous sont définis dans cet espace de noms.

2. Collez la ligne suivante (en gras) avant la définition de classe :

   [Description("Represents a custom button control that responds to a Click event. Displays an image using a custom Source property if the Source property is bound to an Image in the template.")]
   public class ImageButton : Button
   

   <Description("Represents a custom button control that responds to a Click event. Displays an image using a custom Source property if the Source property is bound to an Image in the template.")> _
   Class ImageButton
   

3. Collez la ligne suivante (en gras) avant la définition de propriété personnalisée :

   [Description("The image displayed in the button if there is an Image control in the template whose Source property is template-bound to the ImageButton Source property."), Category("Common Properties")] 
       public ImageSource Source
   

   <Description("The image displayed in the button if there is an Image control in the template whose Source property is template-bound to the ImageButton Source property."), Category("Common Properties")> _ 
       Public Property Source() As ImageSource
   

   L’attribut Category configure l’emplacement d’affichage de la propriété dans le panneau Properties.

4. Régénérez votre projet (Ctrl+Maj+B).

   Maintenant, la propriété Source du contrôle ImageButton apparaît dans la catégorie Propriétés communes du panneau Propriétés, et les descriptions apparaissent dans des info-bulles lorsque vous positionnez le pointeur de souris au-dessus de la propriété et du contrôle dans la Bibliothèque de composants.

Haut de la page

Avancé : configurer votre contrôle pour afficher une image par défaut

Vous pouvez ajouter du code au constructeur de n’importe quel contrôle personnalisé qui définit une propriété à une valeur par défaut lorsque votre contrôle est dessiné sur la planche graphique, et par conséquent en mode Création. La définition d’une propriété à l’aide de la procédure suivante affecte uniquement ce que vous voyez sur la planche graphique, mais pas ce que vous voyez lorsque votre application est en cours d’exécution. Cela est pratique lorsque du contenu n’est pas disponible pour votre contrôle en mode Design, mais le sera au moment de l’exécution de votre application, par exemple lorsque le contenu provient d’une base de données ou d’un service Web. Dans ce cas, la propriété Source d’un contrôle ImageButton sur la planche graphique prend le même nom qu’un fichier image dans votre projet jusqu’à ce qu’il soit explicitement défini.

1. Dans le fichier code-behind (Window1.xaml.cs), collez les lignes de code suivantes (en gras) après la définition de la propriété :

   Remarque :
   Changez le nom de fichier (Sunset.jpg) dans le code en nom d’un fichier image dans votre projet. Pour ajouter un fichier image à votre projet, cliquez avec le bouton droit sur votre projet sous Fichiers dans le panneau Projet, puis cliquez sur Ajouter un élément existant.

   public static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source", typeof(ImageSource), typeof(ImageButton));
   
   // Constructor:public ImageButton(){   if (DesignerProperties.GetIsInDesignMode(this))   {      this.Source = new BitmapImage(new Uri("Sunset.jpg", UriKind.Relative));   }}
   

   Public Shared ReadOnly SourceProperty As DependencyProperty = DependencyProperty.Register("Source", GetType(ImageSource), GetType(ImageButton))
   
   Public Sub New()    If DesignerProperties.GetIsInDesignMode(Me) Then        Me.Source = New BitmapImage(New Uri("Sunset.jpg", UriKind.Relative))    End IfEnd Sub
   

2. Régénérez votre projet (Ctrl+Maj+B).

   Maintenant, lorsque vous ajoutez un contrôle ImageButton à la planche graphique qui utilise le style que vous avez créé, une image par défaut apparaît dans le bouton.

   Remarque :
   Vous ne pourrez pas attribuer à la propriété Source une autre valeur tant que vous serez en mode Design.

Haut de la page