Dvelopper son propre contrle utilisateur WinForms

Par Chiheb2012 et Maxime Jumelle (L1ne)

www.siteduzero.com

Licence Creative Commons 4 2.0 Dernire mise jour le 2/11/2012

2/22

Sommaire
Sommaire ........................................................................................................................................... 2 Dvelopper son propre contrle utilisateur WinForms ....................................................................... 3
Prambule ......................................................................................................................................................................... 4 Cration du contrle .......................................................................................................................................................... 4
La partie Design .......................................................................................................................................................................................................... 5 La partie code .............................................................................................................................................................................................................. 6

vnements .................................................................................................................................................................... 10
Crons nos propres vnements .............................................................................................................................................................................. 11 Les gestionnaires d'vnements ............................................................................................................................................................................... 12

Fonctionnalits supplmentaires ..................................................................................................................................... 14

Les Descriptions et Catgories ................................................................................................................................................................................. Les Designer Verbs ................................................................................................................................................................................................... Les SmartTags .......................................................................................................................................................................................................... Afficher une icne dans la boite outils .................................................................................................................................................................... 14 14 17 19

Q.C.M. ............................................................................................................................................................................. 20
Partager ..................................................................................................................................................................................................................... 21

www.siteduzero.com

Sommaire

3/22

Dvelopper son propre contrle utilisateur WinForms

Par

Maxime Jumelle (L1ne) et

Chiheb2012

Mise jour : 02/11/2012 Difficult : Intermdiaire

Dure d'tude : 2 heures

160 visites depuis 7 jours, class 484/797 N'avez vous jamais t frustr de vous apercevoir qu'il manque, dans votre boite outils, un contrle utilisateur que vous utilisiez auparavant avec un autre framework ? Ds lors, une rponse surgit lors de cette infme dcouverte : crons notre propre contrle utilisateur. Oui, mais comment ?

Heureusement pour nous, il nous est possible de crer notre propre contrle utilisateur grce une classe dj toute faite, et tout est entirement personnalisable. Nous allons, pas pas, crer un contrle utilisateur spcialement conu pour nous, les Zros : une zCheckBox ! Dans ce tutoriel, je n'utilise que le C# pour crer le contrle utilisateur, mais vous pouvez le raliser en VB.NET !

Contrle utilisateur dvelopp par moi-mme

Contrle utilisateur que nous dvelopperons dans ce tutoriel Afin d'tre l'aise dans la comprhension des codes, il est vivement conseill d'avoir lu le tutoriel de nico.pyright sur le langage C#.NET, notamment vers la partie 3. Je vous conseille de lire entirement le tutoriel sans sauter d'tapes, sinon vous risquerez d'tre trs rapidement perdu. Je tiens remercier Chiheb2012 pour le gros travail de relecture et de correction orthographique qu'il a effectu. Je remercie galement Orwell pour son travail de validation ainsi que ses remarques qui ont permis d'amliorer ce tutoriel. Sommaire du tutoriel :

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

4/22

Prambule Cration du contrle vnements Fonctionnalits supplmentaires Q.C.M.

Prambule
Comme je l'ai annonc plus haut dans l'introduction, nous allons ensemble crer un contrle utilisateur : une case cocher. C'est tout ? Je m'attendais quelque chose de plus impressionnant !

Oui, mais ne vaut-il pas mieux commencer par quelque chose de simple sur un sujet inconnu ? Il se peut que certains manipulent dj les contrles utilisateurs et savent en crer sans problme. Mais lorsqu'on est dbutant, c'est pas toujours facile de vouloir crer nos contrles avec un dploiement parfait. C'est d'ailleurs pour cette raison que j'ai cr ce tutoriel. Le tutoriel est un peu spcial, car il s'agit d'un TP intgr au cours. Tout au long du tutoriel, nous allons crer une case cocher nomme zCheckBox ayant un autre style visuel que celui du framework .NET. L'intrt de celui-ci sera surtout de crer une case cocher plus belle que celles fournies par dfaut. Mais rassurez-vous, j'ai adapt le cours votre situation : tout est expliqu, chaque morceau de code est dcortiqu de faon ce que vous compreniez les lments essentiels. Et comme je suis gentil, je vous ai fourni l'outil plus les sources et le projet la fin du tutoriel. V oici ce que nous crerons l'issue de ce tutoriel :

J'utilise Visual Studio 2010, et je suis sous le framework .NET 4.0. Si vous utilisez un autre IDE (par exemple MonoDevelop) ou une autre version du framework, il peut y avoir quelques diffrences, mais cela devrait fonctionner sans gros soucis.

Cration du contrle
Nous allons prsent crer notre contrle. Ouvrez Visual Studio C#, crez un nouveau projet, et slectionnez Bibliothque de classes.

Une classe par dfaut nous est offerte. Supprimez-la, et en faisant un clic droit sur votre projet dans l'explorateur de solutions, ajoutez-y un lment Contrle utilisateur que vous nommerez par exemple zCheckBox.cs :

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

5/22

La partie Design
V ous accdez alors la page Design de votre contrle. Tout comme dans le Designer d'une fentre, nous allons placer les lments dj fournis dans la boite outils pour crer notre case cocher. Nous avons donc besoin de deux composants : PictureBox : Ce composant va nous permettre d'afficher la case ainsi que la croix Vrai Label : Comme dans un CheckBox , le texte de la case cocher Disposez-les de faon reconnatre larchitecture d'une case cocher : la case gauche et le texte droite. Mais on doit crer nous mme nos images ?

Oui, et c'est justement l l'intrt de crer une case cocher, nous allons pouvoir lui donner nos propres styles. Dans chaque style, nous avons 3 tats pour la case cocher : NoEvent , lorsque la souris ninteragit pas avec la case OnHover, lorsque la souris est sur le composant OnClick , lorsque l'utilisateur clique sur la case Il s'agit bien videmment d'vnements que nous crerons pour dfinir l'tat du contrle. Il y aura aussi un quatrime vnement, OnRelease, lorsque le bouton de la souris est relch, mais qui ne fait pas office d'tat pour l'instant, car aucun effet visuel ne sera rajout pour cet vnement. Et pour chaque tat, il y a une image. J'ai ralis cinq styles de case cocher ci-dessous que nous utiliserons (et que vous pourrez utiliser dans vos futurs programmes, si vous en avez le courage ). De gauche droite, l'tat est dfini par NoEvent , OnHover, OnClick puis le symbole Checked. Basic Lighted Ubuntu Kubuntu System

Utilisons les ressources

Sachez que le rsultat final sera gnr sous la forme d'un fichier DLL (Dynamic Link Library) pour tre directement utilis dans un autre programme. Seulement, pour notre case cocher, on va devoir utiliser des images, et ces images doivent se situer quelque part sur votre disque dur ! On pourrait trs bien mettre les images en mme temps que le fichier DLL, mais a peut

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

6/22

devenir vite encombrant et lassant s'il faut copier chaque fois les images ! Heureusement, les ressources sont l pour rectifier le tir. En plus d'tre simples utiliser, elles vont tre directement incluses dans notre fichier DLL, on pourra alors distribuer notre fichier librement sans problme de fichiers supplmentaires. Pour importer des ressources, je vous renvoie au tutoriel officiel de Hankerspace sur l'annexe Les ressources. Pour utiliser nos ressources en C#, en revanche, on n'utilisera pas les mmes classes (et un langage diffrent entre autres ). Toutes les images que je vous ai fournies (mis part les symboles) ont pour taille 14*14 pixels. Seulement, si vous avez aperu l'image dans la partie prcdente, le symbole est un peu dcal vers la droite : c'est pour donner un style (comme sur Mac par exemple). Notre PictureBox devra donc faire plus que 14 pixels en largeur. Je compte une largeur pour les symboles ayant au maximum 17 pixels en largeur, la PictureBox aura donc une taille de 14 pixels en hauteur et 17 pixels en largeurs (facile jusque-l). Je vais l'appeler pb_case. Pour le Label , c'est trs simple, il suffit juste de le placer droite de la case. Je lappellerai txt_texte. C'est tout ce dont nous avons besoin pour la partie graphique du contrle. L'intrt ici, c'est comme dit prcdemment de crer un style plus beau que celui propos par le framework .NET. V oici ce que j'obtiens avec le designer Visual Studio :

La partie code
Enfin nous allons coder ! Et pas qu'un peu. Dans la partie design, appuyez sur F7 pour dvoiler le code. Je vous conseille, dans chaque code, de mettre une entte qui dfinit l'auteur, l'utilisation de cette classe, la date de cration, etc... permettant d'obtenir plus d'informations sur la classe qu'on lit, et c'est toujours bon de savoir quand elle a t cre. Si vous regardez, on remarque que notre classe hrite de UserControl : Code : C# public partial class zCheckBox : UserControl

En effet, il faut prciser que notre classe est un contrle utilisateur, pour qu'elle hrite de ses fonctions, ses vnements, mais surtout que notre classe soit utilisable en tant que contrle. Pensez utiliser le mot-cl #region pour organiser votre code !

Ce mot-cl magique permet de faire des blocs de code, autrement dit des rgions pouvant tre diminues ou rtablies par le biais de petits carrs sur votre gauche. Je les utilise souvent pour rendre le code plus clair, et lorsque l'on veut rechercher par exemple une proprit, on sait dj dans quelle partie la rechercher. Personnellement, j'ai horreur (pour des fichiers finaux) d'avoir des variables vers la fin, vers le milieu, un peu partout. Plus un code est organis, plus il est comprhensible. Code : C# #region Dclaration des variables // Toutes les variables ici et pas ailleurs #endregion

J'ai mis 7 #region dans mon code, quelques-unes peuvent tre supprimes, mais je fais a pour avoir une lisibilit optimale (attention tout de mme ne pas en mettre une cinquantaine). Commenons par dfinir les styles. Nous devrons donc crer une numration publique que je vais nommer CheckBoxStyle pour dfinir les diffrents styles disponibles : Code : C# public enum CheckBoxStyle {

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

Basic, Lighted, Ubuntu, Kubuntu, System

7/22

};

prsent, nous allons crer les variables de notre case cocher. V ous remarquerez que je n'hrite pas mon zCheckBox d'une CheckBox du framework .NET, car je prfre avoir mes propres proprits et fonctions. La seconde raison vient aussi du fait que l'hritage multiple, prsent en C++, n'est pas support en C#. Le moyen permettant de contourner cette limitation serait de crer et d'implmenter des interfaces, mais ne compliquons pas le tutoriel. Et comme nous n'hritons pas notre zCheckBox, il faut donc crer toutes les variables d'une case cocher basique : Code : C# private bool _isChecked = false, _activeClick = true; // Le premier, l'tat du zCheckBox, le second sera utilis pour les vnements private CheckBoxStyle _style; // Le style de la case cocher private Image _currentBg, _currentHover, _currentClick, _currentTrue; // Les images selon le style dfini private string _text = "Texte"; // Le texte de la case cocher

Pour les proprits en revanche, je ne vais pas toutes vous les taler, car le principe est trs simple : un getter, un setter, nous avons notre proprit. V oici, par exemple, la proprit Checked : Code : C# /// <summary> /// Obtient ou dfinit la valeur boolenne de la case cocher /// </summary> public bool Checked { get { return _isChecked; } set { _isChecked = value; } }

Ici, j'ai cr une proprit pour une variable, mais on pourrait trs bien crer seulement la proprit. Ainsi, la variable _ isChecked pourrait tre supprime, mais cette variable nous sera utile dans la suite du tutoriel. Crez deux/trois proprits supplmentaires telles que Text (pour le texte) ou Style (pour le style).

Les mthodes
Dans notre classe, toutes les mthodes seront prives afin de ne pas embrouiller le futur dveloppeur et qu'il fasse une confusion avec une quelconque proprit. Nous avons donc un total de 5 mthodes : Nom SetCheckState SetText Arguments bool state string texte Fonction Modifie l'tat boolen de la case cocher Modifie le texte de la case cocher Affiche l'image "Vrai" Cache l'image "Vrai"

ShowTruePicture Aucun HideTruePicture ChangeStyle Aucun

CheckBoxStyle styleToChange Change le style graphique de la case cocher

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

8/22

Mais puisque l'on cre une mthode spcifique pour une proprit, il va falloir changer le setter des trois proprits. Du coup, le setter de la proprit Checked devient : Code : C# set { SetCheckState(value); }

Faites de mme pour les proprits CheckBoxText (SetText(value)) et CheckBoxStyle (ChangeStyle(value)).

Mthode SetCheckState
Son fonctionne est assez simple comprendre : elle permet de modifier l'tat logique de la case cocher, savoir true ou false : Code : C# private void SetCheckState(bool state) { if (state) // Si l'tat cible a pour value true { _isChecked = true; ShowTruePicture(); // On affiche le symbole vrai } else { _isChecked = false; HideTruePicture(); // On masque le symbole vrai } }

Dans cette mthode, l'argument state, l'tat cible, est la nouvelle valeur que prendre la case cocher.

Mthode SetText
Tout comme la mthode ci-dessous, celle-ci permet quant elle de modifier le texte de la case cocher : Code : C# _text = texte; // On modifie la valeur de la variable membre txt_texte.Text = _text; // On modifie le texte du Label

Mthode ShowTruePicture
C'est l'une des mthodes les plus importantes, car c'est celle qui nous permettra de visualiser l'tat de la case cocher par l'intermdiaire d'images : Code : C# private void ShowTruePicture() { pb_case.Image = _currentTrue; // On met jour la nouvelle image }

Mthode HideTruePicture

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

Cette mthode permet l'inverse d'effacer le symbole "Vrai" : Code : C# private void HideTruePicture() { pb_case.Image = null; // Aucune valeur n'est affecte l'image de pb_case }

9/22

En affectant la valeur null mon pb_case, aucune image ne sera dessine sur la PictureBox . Mais dans ce cas, notre image de fond sera efface ?

Non justement, et c'est a l'avantage d'une PictureBox . Il y a deux proprits concernant le dessin d'image dans ce contrle : Image et BackgroundImage. Ainsi, j'utilise la seconde proprit pour dessiner le fond de ma case cocher, ce qui fait que ma proprit BackgroundImage n'est pas modifie si j'affecte la valeur null ma proprit Image.

Mthode ChangeStyle
Celle-ci va nous permettre de modifier tout moment le style de notre case cocher. J'utilise donc un switch qui me permet de modifier les variables qui seront utilises pour dessiner la case cocher : Code : C# private void ChangeStyle(CheckBoxStyle styleToChange) { switch (_styleToChange) // Selon le style changer { case CheckBoxStyle.Basic: // Cas du CheckBoxStyle.Basic, du ... _currentBg = Resources.checkbox_basic; // tat NoEvent _currentClick = Resources.checkbox_click; // tat OnClick _currentHover = Resources.checkbox_hover; // tat OnHover _currentTrue = Resources.checkbox_true; break; case CheckBoxStyle.Lighted: _currentBg = Resources.checkbox_2_basic; _currentClick = Resources.checkbox_2_click; _currentHover = Resources.checkbox_2_hover; _currentTrue = Resources.checkbox_2_true; break; case CheckBoxStyle.Ubuntu: _currentBg = Resources.checkbox_3_basic; _currentClick = Resources.checkbox_3_click; _currentHover = Resources.checkbox_3_hover; _currentTrue = Resources.checkbox_3_true; break; case CheckBoxStyle.Kubuntu: _currentBg = Resources.checkbox_4_basic; _currentClick = Resources.checkbox_4_click; _currentHover = Resources.checkbox_4_hover; _currentTrue = Resources.checkbox_4_true; break; case CheckBoxStyle.System: _currentBg = Resources.checkbox_5_basic; _currentClick = Resources.checkbox_5_click; _currentHover = Resources.checkbox_5_hover; _currentTrue = Resources.checkbox_5_true; break; }

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

style = styleToChange; // On met jour le style de la case cocher pb_case.BackgroundImage = _currentBg; // On affiche le nouveau style l'cran }

10/22

Pour connatre le contenu de toutes les mthodes, je vous invite tlcharger le code source dans le lien situ vers la fin du tutoriel.

vnements
Le code concernant la case cocher est maintenant termin. Nous allons ds maintenant nous proccuper des vnements privs et publics. Comme d'habitude, je vous fais un petit tableau rcapitulatif du gestionnaire d'vnement. Quelle est la diffrence entre un vnement et un gestionnaire d'vnement ?

Un vnement est une action produite par l'utilisateur ou par un programme afin de dclencher un traitement. Ainsi, tous les vnements sont raliss, quoiqu'il arrive (par exemple, un clic souris est un vnement). Mais si vous souhaitez raliser un traitement suite un vnement, vous devez associer une mthode (ou fonction) votre vnement, et cette mthode est nomme gestionnaire d'vnement. Gestionnaire d'vnement zCheckBox_MouseEnter zCheckBox_MouseLeave zCheckBox_MouseDown zCheckBox_MouseUp vnement Souris sur le composant Souris quitte le composant / hors du composant Clic souris sur le composant Relchement clic souris n'importe o

Associez ces quatre gestionnaires d'vnements dans la partie Designer de votre zCheckBox. Le problme, c'est que ce code n'est pas tout fait adapt notre situation. En effet, les gestionnaires d'vnements sont lis notre zCheckBox, donc il s'agit seulement du fond du composant. Et la PictureBox et le Label n'ont aucun gestionnaire d'vnement qui leur est associ. Prenez l'image suivante :

Chacun des composants est reprsent par une couleur. Gris : Il s'agit du zCheckbox. Ce composant possde la fois du code, mais aussi des gestionnaires aux vnements associs. Bleu : C'est la PictureBox . Il n'y a que du code, mais aucun gestionnaire d'vnement associ. Orange : C'est le Label . De mme, que du code, mais aucun gestionnaire d'vnement associ. Cela signifie que par exemple, lorsque la souris sera au-dessus du PictureBox , aucun gestionnaire d'vnement n'est associ au contrle, et donc aucune instruction ne sera excute. Il faut donc que tous les gestionnaires aux vnements pour chaque

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

contrle soient les mmes, et cela va se faire dans l'initialisation du contrle : Code : C# foreach (Control _control in this.Controls) { control.MouseEnter += new EventHandler(zCheckBox_MouseEnter); control.MouseLeave += new EventHandler(zCheckBox_MouseLeave); control.MouseDown += new MouseEventHandler(zCheckBox_MouseDown); control.MouseUp += new MouseEventHandler(zCheckBox_MouseUp); // J'abonne les mmes gestionnaires aux vnements de chaque contrle de mon zCheckBox, de manire tous les capter }

11/22

On utilise une boucle foreach, et donc ici, chaque contrle contenu dans notre classe (ici la PictureBox et le Label ) hrite des quatre vnements spcifis de celui-ci. Les vnements seront les mmes que ce soit pour n'importe quel contrle dans notre zCheckBox.

Crons nos propres vnements

Dans tous les contrles, il y a forcment des vnements, mais il arrive parfois que l'on veuille crer ses propres vnements. L'exemple sera de crer lvnement CheckedChanged , qui interviendra lorsque la valeur de la case cocher (vrai ou faux) change. Nous allons utiliser un dlgu existant pour crer notre vnement dans le cas o l'tat boolen de la case cocher changerait, le delegate EventHandler : Code : C# public delegate void EventHandler(Object sender, EventArgs e)

Bien sr, il ne faut pas insrer cette ligne de code dans le fichier, puisque le dlgu existe dj. Notre dlgu tant connu, nous pouvant crer l'vnement l'aide du mot cl event : Code : C# public event EventHandler CheckedChanged;

Enfin, il faut crer la fonction permettant de faire appel notre vnement : Code : C# public void OnCheckedChanged(EventArgs args) { if (CheckedChanged != null) { CheckedChanged(this, args); } }

Mme si notre vnement est maintenant prt, il faut tout de mme savoir quand l'appeler. L'tat boolen de la case cocher change lorsque le bouton de la souris est relch. Il faut tout simplement appeler l'vnement la fin de la fonction MouseUp : Code : C# OnCheckedChanged(EventArgs.Empty); // On signale qu'un vnement "CheckedChanged" s'est produit avec aucun argument (nous n'avons pas besoin d'utiliser un argument)

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

12/22

Les gestionnaires d'vnements

Afin que l'utilisateur puisse interagir avec la case cocher, nous devons coder nos gestionnaires d'vnements pour savoir quelles actions doivent tre excutes.

Lorsque la souris rentre dans le composant

Le gestionnaire MouseEnter est utile dans notre cas, car il permet la fois de modifier l'arrire-plan de la PictureBox, mais aussi de modifier une variable qui indique que la souris est entre dans le composant. Autrement dit, cet instant, il sera possible d'effectuer un traitement lors du clic souris. Code : C# private void zCheckBox_MouseEnter(object sender, EventArgs e) { pb_case.BackgroundImage = _currentHover; // tat OnHover _activeClick = true; // On signale qu'il est possible de cliquer }

Lorsque la souris quitte le composant

l'inverse du prcdent gestionnaire, celui-ci s'excute lorsque la souris quitte le composant. Ainsi, l'image d'arrire-plan NoEvent sera remplace, et on indique qu'on ne peut plus effectuer de traitement si un clic souris se produit. Code : C# private void zCheckBox_MouseLeave(object sender, EventArgs e) { pb_case.BackgroundImage = _currentBg; // tat NoEvent _activeClick = false; // On signale qu'il n'est plus possible de cliquer }

Lorsque l'utilisateur clique sur le composant

Ds que l'utilisateur clique sur le composant, on modifie l'image d'arrire-plan mais seulement si l'utilisateur a l'autorisation de cliquer. Code : C# private void zCheckBox_MouseDown(object sender, MouseEventArgs e) { if (_activeClick) // S'il est possible de cliquer { pb_case.BackgroundImage = _currentClick; // tat OnClick } }

Pourquoi on ne modifie par l'tat de la case cocher maintenant ?

Une CheckBox du framework .NET change d'tat lors du relchement du clic souris . J'ai, dans le cas de la zCheckBox, respect cette convention, mais vous pouvez trs bien placer votre changement d'tat ici.

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

13/22

Lorsque l'utilisateur relche le clic souris

C'est donc dans ce gestionnaire d'vnement que nous allons effectuer le changement d'tat : Code : C# private void zCheckBox_MouseUp(object sender, MouseEventArgs e) { pb_case.BackgroundImage = _currentHover; // tat OnHover SetCheckState(!_isChecked); // L'tat prend sa valeur inverse OnCheckedChanged(EventArgs.Empty); // On signale qu'un vnement "CheckedChanged" s'est produit avec aucun argument (nous n'avons pas besoin d'utiliser un argument) }

Comme dans les prcdents gestionnaires, l'arrire-plan sera modifi, et on signale la production de l'vnement CheckedChanged . La seconde ligne est trs pratique pour allger le code. Pour que l'tat de la case cocher change, nous devons lui donner sa valeur inverse : c'est--dire que si la case cocher avait pour valeur False, elle passerait True et rciproquement. Le point d'exclamation (!) signifie NON, comme celle que l'on utilise dans les tests de condition, sauf qu'ici elle s'applique sur un argument. Le code suivant permet de raliser la mme chose : Code : C# if (_isChecked) // Si la case tait l'tat "Vrai" { SetCheckState(false); // On met l'tat "Faux" } else { SetCheckState(true); // On met l'tat "Vrai" }

Il serait donc prfrable de choisir la premire solution, puisque l'on conomise quelques lignes de code. Notre zCheckBox est maintenant finie. Seulement, vous ne pouvez toujours pas en profiter. Nous allons donc ajouter notre zCheckBox notre boite outils. Commencez par gnrer la solution l'aide de la touche F6 . Ensuite, ouvrez une nouvelle instance de Visual Studio C#, et crez cette fois-ci un projet Windows Forms quelconque. Dans votre boite outils, vous pouvez apercevoir plusieurs onglets. Crons notre onglet spcifique notre zCheckBox. Faites clic droit, puis cliquez sur Ajouter un onglet. Nommez le comme bon vous semble, puis, refaites clic droit et cliquez sur Choisir les lments . Et l, c'est le drame ! Si vous avez un ordinateur un peu lent, ne pensez pas que Visual Studio C# a plant. Non, c'est juste qu'il y a vraiment beaucoup d'lments afficher, et que donc VC# freeze (ne rponds pas). Mais ne vous inquitez pas, pour un ordinateur normalement constitu, cela ne dure pas plus d'une minute. Une fois la fentre ouverte, cliquez sur le bouton Parcourir, et dirigez-vous dans le dossier Release de votre projet pour y trouver le fameux fichier DLL. Ds que vous l'avez, cliquez sur OK. zCheckBox apparat alors dans l'onglet que vous avez cr, et vous pouvez l'utiliser normalement comme s'il s'agissait d'un contrle quelconque. Et voil un rsultat concluant tous nos efforts :

Tout notre code reposant sur le principe d'une case cocher est termin. Nous allons voir ensemble quelques fonctionnalits supplmentaires pouvant tre utiles.

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

14/22

Fonctionnalits supplmentaires Les Descriptions et Catgories

V ous avez remarqu qu'une fois notre contrle fini, le futur utilisateur ne saura pas quoi servent les proprits que nous avons cres (Style par exemple). Nous allons dcrire ces proprits grce des attributs dans notre classe zCheckBox. Dans un premier temps, nous allons donner une description la proprit Style par l'intermdiaire de l'attribut Description. Dans notre exemple, le code rajouter est le suivant : Code : C# [Description("Change le style de la case cocher.")] // Ajouter cette ligne au-dessus de la proprit Style

V ous remarquerez alors que dans la fentre des proprits, la description s'affiche en bas lorsque vous avez slectionn la proprit Style. Toujours dans la fentre des proprits, vous avez deux choix d'affichage en haut gauche : Par catgorie : les proprits sont classes par catgorie (Texte, Comportement, ...). Par ordre alphabtique : les proprits sont classes par ordre alphabtique. Comme nous n'avons pas assign de catgories nos proprits, celles-ci se retrouvent dans la catgorie par dfaut Divers. N'tant pas un grand admirateur du nom de cette catgorie, je propose que nous placions une catgorie appele zCategory pour toutes nos proprits. Nous utiliserons l'attribut Category (pas trs dpaysant ) pour dfinir nos catgories ( noter que les catgories sont cres automatiquement si celles-ci ne sont pas dj fournies) : Code : C# [Category("zCategory")] // Ajouter cette ligne au-dessus de chaque proprit

L'ordre des attributs n'a pas d'importance : ils seront tous traits de la mme manire. De plus, vous pouvez sauter des lignes entre l'attribut et sa mthode ou proprit associe. Il existe aussi l'attribut Browsable, qui ressemble beaucoup Enabled. Cet attribut permet de savoir si la proprit peut-tre modifiable dans la fentre des proprits. Dans le cas contraire, la proprit sera invisible. Utile pour les proprits en lecture seule : Code : C# [Category("zCategory"), Description("Change le style de la case cocher."), Browsable(false)]

Il existe une dernire proprit, DesignerSerializationVisibility, qui permet d'ajouter des lments une collection dans le Designer de Visual Studio.

Les Designer Verbs

Les Designer Verbs sont des sortes de liens de commande qui apparaissent en bas de la fentre des proprits :

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

15/22

Quelques fois, ces liens peuvent ne pas tre visibles. Pour les afficher, faites clic droit dans la fentre des proprits, puis activez Commandes :

Mais avant de vous lancer dans la cration d'une classe zDesignerVerbs afin de crer vos propres verbs, vous devez avant tout ajouter la rfrence System.Design votre projet. Pour ce faire, faites clic droit sur votre projet dans l'explorateur de solutions, puis cliquez sur Ajouter une rfrence ...

Enfin, pensez rajouter les deux lignes suivantes pour pouvoir utiliser les espaces de noms dont nous aurons besoin : Code : C# using System.Windows.Forms.Design; using System.ComponentModel.Design;

Mais l, vous avez deux jolis petits avertissements, dont un qui nous intresse beaucoup :

Pour l'instant, il n'est pas gnant. Mais vous verrez que par la suite, il le sera. Pour corriger ce problme, faites clic droit sur votre projet dans l'explorateur de solution, puis cliquez sur Proprits . Dans l'onglet Application, retrouvez l'option Framework cible. Normalement cette option vaut .NET Framework 4.0 Client Profile. Et bien le voil notre problme, c'est ce Client Profile qui nous gne. Choisissez celui qui est juste au-dessus, celui sans le Client Profile :

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

16/22

Une boite de dialogue vous demandera votre autorisation pour changer le framework cible et redmarrera votre projet. Tout est bon, plus d'avertissements, on peut continuer tranquillement. Mais alors il sert quoi le Client Profile ?

Il est utilis pour avoir un dploiement le plus rapide possible. Il utilise donc le minimum d'assemblys pour excuter notre projet. System.Design ne fait pas partie des ces assemblys pris en charge par le Client Profile. Plus d'informations sur le Framework .NET Profile Client. Comme je l'ai annonc plus haut, nous allons crer une classe nomme zDesignerVerbs qui hritera de la classe ControlDesigner. Nos Designer Verbs seront exposs par la proprit Verbs de cette classe sous la forme d'une collection de type DesignerVerbCollection, que nous devons remplir avant de renvoyer. Code : C# public override DesignerVerbCollection Verbs { get { DesignerVerbCollection verbs = new DesignerVerbCollection(); // On cre une nouvelle collection de Designer Verbs verbs.Add(new DesignerVerb("Visiter le Site du Zro", new EventHandler(VisitSdz))); // Add permet d'ajouter un Designer verb la liste return verbs; // On retourne la valeur au getter } }

Utilisez tout simplement la mthode Add pour ajouter chaque Designer Verb cette collection. Le premier paramtre de la classe DesignerVerb est son nom, le second est le gestionnaire d'vnement excuter lorsque l'utilisateur cliquera dessus. Pensez bien mettre le mot-cl override devant la proprit, car il s'agit d'une substitution de la proprit virtuelle Verbs dfinie par la classe ComponentDesigner. Utilisez l'explorateur d'objets si vous souhaitez en savoir plus. Pour que la compilation fonctionne, nous devons dfinir ici le gestionnaire d'vnement VisitSdz, simple mthode qui nous lancera le Site du Zro aprs un clic : Code : C# private void VisitSdz(object sender, EventArgs e) { Process.Start("http://siteduzero.com"); }

N'oubliez pas d'importer l'espace de nom System.Diagnostics pour pouvoir utiliser la classe Process !

La dernire action ncessaire pour faire apparatre nos Designer Verbs dans l'diteur est de dcorer notre classe zCheckBox avec l'attribut Designer en faisant rfrence notre nouvelle classe : Code : C#

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

[Designer(typeof(zDesignerVerbs))] public partial class zCheckBox : UserControl { ... }

17/22

Comme pour tout l'heure, lancez votre zCheckBox dans une Windows Forms pour admirer le rsultat. Mais vous n'tes pas encore au bout de vos peines. Car effectivement, lors de la compilation pour lancer votre projet Windows Forms , vous avez plusieurs erreurs correspondantes votre zCheckBox et un avertissement assez bizarre qui plombe l'ambiance :

Encore la mme erreur ! Il m'est dit que le problme vient de System.Design, alors on le supprime ?

Non ! Puisque votre DLL est cibl pour un .NET Framework 4.0 , il faut que votre projet Windows Forms (et dans les autres projets) soit lui aussi cibl sur le .NET Framework 4.0 , car actuellement, il est cibl sur le .NET Framework 4.0 Client Profile ! V ous pouvez prsent admirer vos beaux Designer Verbs et proposer des actions bien plus complexes que celle-ci.

Les SmartTags
Les SmartTags (Balises Actives en Franais) sont des petits menus qui apparaissent en haut droite de votre contrle lorsque vous cliquez sur une petite flche pour l'ouvrir :

Avouez, a donne envie. Inutile ici de crer une nouvelle classe : en effet, pour le SmartTag , il faut utiliser une classe drive de DesignerActionList, tout comme nous l'avons fait avec ControlDesigner pour les DesignerVerbs . On peut donc par exemple renommer la classe zDesignerVerbs en zCheckBoxControlDesigner. Ainsi, nous utiliserons la fois les DesignerVerbs et le SmartTag dans la mme classe. Pour dfinir le contenu du SmartTag nous allons devoir implmenter une nouvelle classe drive de DesignerActionList : Code : C# public class zSmartTagElements : DesignerActionList

Son constructeur ncessite par ailleurs un paramtre de type IComponent, transmettre au constructeur parent : Code : C# public zSmartTagElements(IComponent component) : base(component) { }

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

Cette classe joue globalement le rle de passerelle entre le SmartTag et le contrle zCheckBox. Elle permet de prendre correctement en charge les fonctionnalits "Annuler" (undo ) et "Rtablir" (redo ) par exemple. Avant de commencer dfinir nos lments qui seront affichs dans notre SmartTag , nous allons tout d'abord le cre par l'intermdiaire de la proprit ActionsList : Code : C# public override DesignerActionListCollection ActionLists { get { DesignerActionListCollection list = new DesignerActionListCollection(); // On crer une nouvelle collection pour nos actions zSmartTagElements designList = new zSmartTagElements(this.Control); // On rcupre toutes les proprit s list.Add(designList); // On ajoute toutes nos proprits par l'intermdiaire de designList } return list;

18/22

Cette proprit nous permet ainsi d'afficher les lments du SmartTag tout comme nous le faisions avec les Designer Verbs . Pour chaque proprit de notre zCheckBox que l'on veut pouvoir dfinir via le SmartTag, il faut donc crer une proprit quivalente dans notre nouvelle classe zSmartTagElements . Ces proprits sont implmenter d'une manire un peu particulire : il faudra ici utiliser un casting pour le getter et la rflexion (un TypeDescriptor en particulier) pour le setter. Concrtement, a ressemble a : Code : C# public bool Checked { get { return ((zCheckBox)this.Component).Checked; } // On obtient la valeur de la proprit Checked de la zCheckBox par casting set { PropertyDescriptor prop = TypeDescriptor.GetProperties(this.Component)["Checked"]; // On utilise la reflection pour accder la proprit Checked de la zCheckBox. prop.SetValue(this.Component, value); // On dfinit la valeur de proprit Checked } }

Faites de mme avec les autres proprits que vous souhaitez inclure dans votre SmartTag . Il nous reste une chose faire dans cette classe zSmartTagElements : nous devons substituer sa mthode GetSortedActionItems() afin de lui faire renvoyer la liste des lments actionnables que l'on souhaite faire apparatre dans le SmartTag. Code : C# public override DesignerActionItemCollection GetSortedActionItems() { DesignerActionItemCollection items = new DesignerActionItemCollection(); // On cre une collection d'items pour notre SmartTag

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

// Utilisez Add() pour ajouter chaque lment items.Add(new DesignerActionHeaderItem("zOptions")); items.Add(new DesignerActionPropertyItem("Checked", "tat par dfaut")); items.Add(new DesignerActionPropertyItem("CheckBoxText", "Texte de la case cocher :")); items.Add(new DesignerActionPropertyItem("Style", "Style de la case cocher :")); } return items; // On renvoie cette collection remplie

19/22

V ous pouvez ajouter quatre types d'lments : DesignerActionPropertyItem : Affiche ou modifie les proprits indiques. DesignerActionHeaderItem : Cre un groupe de proprits. DesignerActionTextItem : Affiche un texte. DesignerActionMethodItem : Appelle une mthode. N'oubliez pas de mettre jour l'attribut prsent l'entte de la classe zCheckBox pour que vos Designer Verbs et vos SmartTags s'affichent en mme temps. Code : C# [Designer(typeof(zCheckBoxControlDesigner))] // Affiche les DesignerVerbs et les SmartTags public partial class zCheckBox : UserControl { ... }

V ous devriez maintenant apercevoir vos DesignerVerbs et votre SmartTag dans le concepteur de vues.

Afficher une icne dans la boite outils

Comme vous avez pu le remarquer, beaucoup de contrles de votre boite outils disposent d'une icne afin d'tre plus facilement identifiables. Et bien sachez que vous pouvez faire de mme grce l'attribut ToolboxBitmap. Il existe plusieurs dfinitions : Type des arguments String Type Type, String Chemin de l'icne Assembly dont l'icne voulue y est incluse en tant que ressource incorpore. Assembly dont l'icne voulue y est incluse en tant que ressource incorpore et chemin de l'icne. Rle des arguments

Pour cet exemple, nous utiliserons la troisime dfinition. prsent, nous allons ajouter l'icne souhaite dans le projet Visual Studio. Pour ce faire, vous devez utiliser un fichier .bmp ou .ico pour l'icne, et celle-ci doit avoir une taille de 16 * 16 pixels. Dans le cas prsent, j'utilise une image dj prsente dans notre contrle, mais j'ai modifi sa taille et enregistr celle-ci sous une autre image dont le nom est zCheckBox_ico.ico :

Avant d'ajouter l'attribut permettant d'afficher l'icne, nous allons devoir commencer par ajouter l'image notre projet. Pour ce faire, faites clic droit sur le nom du projet puis Ajouter -> lment existant ... Choisissez ensuite votre icne puis cliquez sur valider. Mme si notre image est prsente dans le projet, nous ne pouvons toujours pas l'utiliser : en effet, afin d'avoir toujours accs l'icne, vous devez l'ajouter en tant que ressource incorpore, sans quoi vous n'aurez pas accs l'image. Pour ce faire,

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

20/22

vous avez juste slectionnez votre icne puis choisir l'option Ressource incorpore dans la proprit Action de gnration :

prsent, notre icne est bien prsente dans notre projet, et sera incorpore dans la DLL lors de la gnration de celle-ci. Ds maintenant, ajoutons l'attribut pour associer l'image au contrle : Code : C# [ToolboxBitmap(typeof(zCheckBox), "zCheckBox_ico.ico")]

Ce fut aussi simple que cela

.V ous pouvez donc admirer l'icne associe notre contrle dans la boite outils :

Tlcharger le contrle utilisateur zCheckBox (*.dll) Tlcharger le code source + projet Visual C# Express (*.zip)
Q.C.M.
Le premier QCM de ce cours vous est offert en libre accs. Pour accder aux suivants Connectez-vous Inscrivez-vous Quel framework cible choisissez vous pour dployer vos projets en utilisant l'espace de nom System.Design ?
.NET Framework 5.0 .NET Framework 4.0 Client .NET Framework 4.0 Client Profile .NET Framework 4.0

Quel attribut permet de spcifier si une proprit doit tre visible dans la fentre des proprits ?

Enabled Browsable

www.siteduzero.com

Dvelopper son propre contrle utilisateur WinForms

Visible Showed

21/22

Qu'est ce qu'un gestionnaire d'vnement ?

Un vnement personnalis Une mthode associe un vnement Un vnement priv Un vnement associ un autre

Correction !
Statistiques de rponses au Q CM

V ous pouvez voir que crer un contrle utilisateur peut-tre trs facile, et surtout trs utile dans certains cas. Mme si on passe la moiti du temps pendant le tutoriel crer une case cocher, cela vous permet de comprendre comment fonctionne un contrle utilisateur. Il est possible de crer d'autres contrles qui n'existent pas dans le framework .NET. J'avais pens crer une RangeTrackBar, mais j'ai ensuite compris que c'tait beaucoup trop long crer, et donc beaucoup trop de code. J'ai prfr faire quelque chose de simple, pour un sujet simple. patez-moi, postez vos belles crations sur les forums et partagez-les !

Partager

www.siteduzero.com