Dans un souci de capitalisation ou encore d’industrialisation, nous avons souvent besoin de développer des custom control réutilisables. Dans ce post nous allons voir comment :
- Créer un custom control simple
- Le tester dans une application Silverlight
- Le personnaliser
Création du custom control
Nous allons maintenant créer un custom control, pour ce faire nous allons tout d’abord créer un nouveau projet de type “Silverlight class library” et le nommer “MyCircleControl”. Dans ce projet, renommez le fichier class1.cs à MyCircle.cs et répondez “oui” quand visual studio vous demande si vous voulez faire un refactor sur la classe. Ouvrez le fichier MyCircle.cs et faites hériter la classe MonCustomControl de control. Dans ce fichier, nous allons définir la logique du contrôle et les propriétés qu’il va exposer à ces utilisateurs.
Créez ensuite un répertoire nommé Themes à la racine du projet et créez dedans un fichier texte et nommez le generic.xaml. Dans ce fichier, nous allons pouvoir définir nos ressources à savoir les styles ou encore les valeurs pour les propriétés de notre contrôle. Une propriété intéressante à définir est la propriété “Template” que la classe MonCustomControl a hérité de la classe Control et qui va nous permettre de définir l’aspect visuel du contrôle. Voici la solution visual studio que vous devriez avoir.
Click droit sur le fichier generic.xaml et cliquer sur “Propriétés”, modifier les deux propriétés suivantes :
- Effacer le contenu de la propriété “Custom Tool”
- Modifier la propriété “Build Action” à “Resource”
Pour l’instant nous allons créer un custom control qui contiendra un cercle de couleur bleu.
Pour cela, ouvrez le fichier generic.xaml et placez y le code suivant :
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:custom="clr-namespace:MyCircleControl;assembly=MyCircleControl"
>
<Style TargetType="custom:MyCircle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="custom:MyCircle">
<Grid>
<Ellipse x:Name="ACircle" Width="100" Height="100" Stroke="Blue"></Ellipse>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Quelques explications s’imposent :
La balise ResourceDictionary indique que ce fichier est un dictionnaire de ressources. Nous définissons un style avec la balise “Style” qui va s’appliquer à notre contrôle MyCircle. Dans cette balise nous allons définir le contenu visuel de notre contrôle, pour cela nous allons définir la propriété Template que notre contrôle a hérité de “Control” et dessiner un cercle de couleur bleu.
Testons le contrôle
Pour tester notre contrôle, nous allons créer un projet de type “Silverlight Application” dans la même solution, nommez le “MyCircleApplication”. Lorsque Visual studio vous demande si vous voulez créer un projet web pour héberger l’application Silverlight cliquez sur “OK” sans faire de changements
Vous devriez maintenant avoir une solution qui ressemble à ça :
Il ne nous reste plus qu’à :
- Ajouter la référence vers le projet MyCircleCOntrol dans le projet “MyCircleApplication”
- Ouvrez le fichier “MainPage.xaml” et inclure le namespace de mon contrôle en rajoutant cette propriété à la balise “UserControl”
xmlns:circle="clr-namespace:MyCircleControl;assembly=MyCircleControl"
Puis dans la balise “Grid” nous allons ajouter notre contrôle de la manière suivante :
<Grid x:Name="LayoutRoot">
<circle:MyCircle></circle:MyCircle>
</Grid>
Compilez maintenant la solution et lancez la page MyCircleApplicationTestPage.html vous devriez voir une page blanche avec un cercle bleu au milieu.
Personnalisation du control
Ce cercle est bien beau :) mais un peu trop rigide à mon goût, supposons qu’on veuille rendre notre contrôle un peu plus personnalisable en donnant la possibilité de changer sa couleur de remplissage. Pour cela nous allons créer une Depenedency Property de type Brush au sein de notre classe MyCircle que nous allons appeler FillColor.
public Brush FillColor
{
get { return (Brush)GetValue(FillColorProperty); }
set { SetValue(FillColorProperty, value); }
}
// Using a DependencyProperty as the backing store for FillColor. This enables animation, styling, binding, etc...
public static readonly DependencyProperty FillColorProperty =
DependencyProperty.Register("FillColor", typeof(Brush), typeof(MyCircle), null);
Cette propriété pourra désormais être définie lors de l’ajout de ce contrôle de la manière suivante :
<circle:MyCircle FillColor="Chocolate"></circle:MyCircle>
Mais pour l’instant même si notre propriété FillColor est remplie, elle ne peut agir d’aucune manière sur la couleur de fond de notre cercle. Pour cela nous allons lier la propriété Fill de l’Ellipse à notre propriété FillColor de telle manière que chaque fois que FillColor change la propriété Fill de l’Ellipse est modifiée automatiquement, voici la balise Ellipse modifiée dans le fichier generic.xaml:
<Ellipse x:Name="ACircle" Stroke="Blue" Width="100" Height="100" Fill="{TemplateBinding FillColor}"></Ellipse>
Voilà tout, maintenant définissez la propriété FillColor à “Chocolate” (ou à une autre couleur), recompilez la solution et lancez la page MyCircleApplicationTestPage.html vous devriez voir ceci :
