Essayez ! Créer un contrôle avec des propriétés personnalisées

Article
10/09/2014

Blend for Visual Studio fournit un certain nombre de contrôles système et de styles simples que vous pouvez utiliser dans vos applications. 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.

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 Créer un contrôle utilisateur vide dans Blend.

Pour plus d'informations sur les contrôles personnalisés, notamment XAML et les exemples de code, consultez Présentation de l'autorisation des contrôles et Classe DependencyProperty dans la section Windows Presentation Foundation sur MSDN.

Pour définir un contrôle personnalisé

Dans le panneau Projets, 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.

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), null); 
}

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), nothing)
End Class

Enregistrez le fichier code-behind modifié puis fermez 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é avec une propriété de dépendance enregistrée signifie que WPF or Silverlight 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.Il existe également une fonction appelée 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).
Vous devez maintenant construire votre projet de façon que le nouveau contrôle ImageButton apparaisse dans le panneau Composants. Dans le menu Projet de Blend, cliquez sur Générer le projet (ou appuyez sur Ctrl+Shift+B). Vérifiez que la génération s’est terminée sans erreur.
Revenez à l’édition de Window1.xaml dans Blend.
Dans le panneau Outils sur le côté gauche d’ Blend, cliquez sur Composants .

Cela ouvre le panneau Composants et vous montre tous les contrôles, panneaux et objets que vous pouvez placer dans votre document.
Dans l’onglet Projet, sélectionnez le contrôle ImageButton dans la liste.

L’icône du panneau Outils sous le bouton 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.

Notes

Les contrôles personnalisés n’apparaissent dans la catégorie Projet du panneau Composants que si vous avez ajouté le code source à votre projet et effectué une génération (Ctrl+Shift+B).
L’icône ImageButton étant sélectionnée dans le panneau 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 est rendu sur la planche graphique et un objet ImageButton nommé [ImageButton] "ImageButton" est répertorié en tant qu’objet enfant de LayoutRoot dans le panneau Objets et chronologie.

Pour modifier le style de votre contrôle personnalisé

Pour créer un modèle de contrôle pour tous les objets ImageButton, cliquez avec le bouton droit sur le nouveau contrôle ImageButton, cliquez sur Modifier le modèle, puis sur Modifier une copie.

La boîte de dialogue Créer la ressource Style apparaît.
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.

Notes

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.
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 définir votre nouveau modèle. Sélectionner Fenêtre: Fenêtre signifie que le modèle sera visible pour tous les contrôles ImageButton dans la fenêtre.
Cliquez sur OK.

Vous avez maintenant copié le modèle de contrôle par défaut de tous les objets ImageButton et vous avez enregistré la copie en tant que nouveau 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, Blend entre dans un mode dans lequel vous pouvez afficher et modifier le nouveau modèle. Dans le panneau Objets et chronologie, le mot Modèle au-dessus de la nouvelle arborescence d’objets indique l’étendue actuelle d’édition. Le modèle inclut un objet 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 Rétablir l’étendue à qui se trouve au-dessus de l’arborescence d’objets 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’objet dont vous souhaitez modifier le modèle dans le panneau Objets et chronologie (dans ce cas, l’objet [ImageButton] "ImageButton"), cliquez sur Modifier le modèle, puis cliquez sur Modifier le modèle actif.
Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur l’objet ContentPresenter, pointez sur Grouper, puis cliquez sur Grid.

L’objet ContentPresenter devient un objet enfant d’un nouvel objet Grid. Sans l’objet Grid, vous ne pourriez pas ajouter un second objet enfant au modèle parce que l’objet ButtonChrome ne peut contenir qu’un objet enfant.
L’objet Grid étant sélectionné dans le panneau Objets et chronologie, localisez les propriétés Width et Height dans la catégorie Disposition du panneau Propriétés. Cliquez sur Options avancées en regard de chacune des propriétés, puis cliquez sur Rétablir.
Pour diviser la grille en deux colonnes, double-cliquez sur l’objet Grid dans le panneau Objets et chronologie afin d’activer la grille, puis à l’aide de l’outil Sélection sélectionné dans le panneau Outils, déplacez le pointeur de la souris sur la zone de règle bleue épaisse en haut de la Grid 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 Grid.

Un diviseur de colonne bleu apparaît à l’intérieur de la Grid.
Sélectionnez Image dans la catégorie Contrôles du panneau Composants (cliquez sur la sous-catégorie Tout ). L’objet Grid étant toujours activé dans le panneau Objets et chronologie, dessinez une nouvelle Image à l’intérieur de la colonne droite de l’objet Grid.
Le nouvel élément Image étant sélectionné dans le panneau Objets et chronologie, regardez sous Propriétés communes dans le panneau Propriétés. Cliquez sur Options avancées à droite de la propriété Source, pointez sur Liaison de modèle, puis cliquez sur Source.

Vous venez de lier par modèle la propriété Source de l’objet Image à la propriété Source de l’objet ImageButton qui utilise ce modèle.
Vous avez maintenant terminé l’édition du modèle. Pour quitter l’étendue de l’objet racine, cliquez sur Étendue supérieure dans le panneau Objets et chronologie.
Votre contrôle ImageButton étant sélectionné dans le panneau 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.

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

Dans la catégorie Projet du panneau Composants, sélectionnez le contrôle ImageButton. Dessinez un nouveau contrôle ImageButton sur la planche graphique.
Cliquez avec le bouton droit sur le nouveau contrôle ImageButton, cliquez sur Modifier le modèle, cliquez sur Appliquer la ressource, puis cliquez 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 image sur votre ordinateur.

Conseil

Vous pouvez également ajouter un contrôle ImageButton à la planche graphique qui est déjà stylisé au moyen de votre modèle.Dans la catégorie Styles du panneau Composants, sélectionnez ImageButtonStyle, puis dessinez le contrôle ImageButton stylisé sur la planche graphique.

Pour appliquer des descriptions à votre propriété personnalisée

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.

Collez la ligne (en gras) suivante 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

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 Propriétés.

Régénérez votre projet (Ctrl+Shift+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 la souris au-dessus de la propriété et du contrôle dans le panneau Composants.

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.

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

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é :

Notes

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 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 If  
End Sub

Régénérez votre projet (Ctrl+Shift+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.

Notes

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