Exporter (0) Imprimer
Développer tout

Création de nouveaux contrôles Visual Basic .NET

Billy Hollis

Téléchargement du fichier exemple VBNET UserControls.exe à partir du Code Center de MSDN leave-msdn france Site en anglais. Veuillez noter que les commentaires du programmeur sont en anglais dans les fichiers exemple du programme mais sont traduits dans l'article pour plus de clarté.

Résumé : ce mois-ci, Billy Hollis vous montre comment créer entièrement un contrôle visuel qui rend sa propre interface.

Je n'ai jamais été sérieusement tenté de devenir programmeur C++ car je suis trop paresseux pour travailler aussi dur. Mais je dois admettre que j'enviais souvent ceux qui l'étaient pour une raison toute simple : leur capacité à écrire des contrôles visuels.

Les contrôles dans Visual Basic® versions 6.0 et antérieures se limitaient à des contrôles composites (c'est-à-dire des contrôles réalisés à partir d'autres contrôles), appelés UserControls. Écrire un contrôle qui correspondait à sa propre représentation visuelle à l'écran dans Visual Basic 6.0 était une épreuve qui se situait entre le difficile et l'impossible.

Passons maintenant aux bonnes nouvelles ! Visual Basic .NET est capable d'écrire à peu près tous les types de contrôle. Les UserControls composites existent toujours et vous pouvez également hériter d'un contrôle existant tel que TextBox et l'améliorer avec de nouvelles possibilités. Plus précisément, vous pouvez écrire un contrôle visuel à partir de rien et rendre sa propre interface.

Dans cet article, je démontrerai cette dernière possibilité en créant un contrôle visuel complet du début à la fin. Le contrôle est un feu de circulation (Traffic Light) : un rectangle avec des cercles pour les ampoules rouge, orange et verte. La figure 1 vous montre à quoi ressemble le contrôle lorsque chaque ampoule est allumée et avec, en couleur d'arrière-plan, la couleur système ControlDark.

Formulaire avec trois contrôles TrafficLight, un par couleur allumée

Figure 1. Formulaire avec trois contrôles TrafficLight, un par couleur allumée.

Nous nommerons le contrôle TrafficLight et lui donnerons la possibilité de changer l'ampoule active, que ce soit via le code ou par un clic de l'utilisateur sur le cercle correspondant.

TrafficLight étant un contrôle Windows Forms visuel, il héritera de la classe Control dans l'espace de noms System.Windows.Forms. Du coup, il bénéficiera d'un certain nombre de propriétés, méthodes et événements prédéfinis. Parmi ceux-ci se trouvent les propriétés d'apparence du contrôle telles que ForeColor, BackColor, Size et Location, et des événements tels que MouseOver et Click. Vous pouvez consulter la documentation .NET pour obtenir une liste complète des membres de la classe Control.

Le feu aura également besoin des propriétés et événements spéciaux suivants :

Propriété Status Détermine la couleur qui est active. Il doit s'agir de l'une des trois valeurs suivantes :
  • StatusRed : le feu est rouge
  • StatusYellow : le feu est orange
  • StatusGreen : le feu est vert
Propriété BorderWidth Largeur de la bordure autour du feu.
Événement StatusChanged Se déclenche lorsque la propriété Status change de valeur ou lorsque l'utilisateur clique sur une autre ampoule.

Ces membres ne font pas partie de la classe Control de base : nous devrons donc intégrer du code complet pour les traiter. Il nous faudra écrire du code également pour dessiner le feu de circulation à l'écran en traçant la bordure et les trois cercles avec les couleurs appropriées. Enfin, nous devrons traiter des clics de l'utilisateur sur un cercle pour changer l'ampoule active et faire en sorte que la propriété Status change lorsque cela se produit.

Pour que cet exemple soit aussi proche que possible d'un code prêt à la production, nous allons inclure du code permettant à ce contrôle de mieux fonctionner avec l'IDE Visual Studio® .NET. Nous lui attribuerons une icône appropriée pour la boîte à outils et ajouterons une logique afin que les propriétés s'intègrent bien aux fenêtres Propriétés.

Allons-y.

Étape 1 : création du type de projet approprié

Pour créer une bibliothèque contenant les contrôles Windows Forms, démarrez un nouveau projet dans Visual Basic .NET et sélectionnez le type de projet Bibliothèque de contrôles Windows. Nommez le projet MyControls.

Le projet résultant peut en fait contenir plusieurs contrôles Windows Forms, chacun dans sa propre classe. Cependant, nous allons en créer un seul.

Étape 2 : changement de classe de base

La classe créée automatiquement dans la bibliothèque de contrôles est nommée UserControl1 et elle hérite par défaut de la classe UserControl. Si nous devions créer un contrôle composite, cela conviendrait et nous pourrions tout simplement faire glisser d'autres contrôles de la boîte à outils vers la surface de conception.

Toutefois, comme nous voulons créer notre propre contrôle à partir de rien, nous devons faire quelques modifications. Changez le nom de la classe du contrôle de UserControl1 en TrafficLight. Puis modifiez la ligne suivante :

Inherits System.Windows.Forms.UserControl

comme suit :

Inherits System.Windows.Forms.Control

La classe de base devient ainsi la classe Control, qui est plus générique. Vous pouvez alors noter que la surface de conception n'est plus disponible et qu'elle a été remplacée par une surface de conception de composant.

Pour garder la cohérence de notre code, renommez également le fichier de code UserControl1.vb en TrafficLight.vb. Vous pouvez pour cela utiliser l'Explorateur de solutions en cliquant avec le bouton droit de la souris sur le nom du fichier de code et en sélectionnant Renommer.

Nous devons également ajouter deux lignes de code en haut de notre module de classe. Nous allons définir Option Strict sur On et importer un espace de noms contenant des attributs que nous utiliserons ultérieurement. Voici les deux lignes à placer tout en haut du code :

Option Strict On
Imports System.ComponentModel

Étape 3 : implémentation de nos propriétés et événements

Pour implémenter la propriété Status, nous devons tout d'abord créer une énumération des valeurs possibles pour la propriété. Insérez les lignes suivantes juste au-dessous de la ligne qui commence par Inherits :

Public Enum TrafficLightStatus
 statusRed = 1
 statusYellow = 2
 statusGreen = 3
End Enum

Cette énumération est publique, ce qui signifie que les formulaires utilisant le contrôle peuvent y avoir accès.

Juste après ces lignes, placez les trois lignes suivantes :

Dim mStatus As TrafficLightStatus = TrafficLightStatus.statusGreen
Dim msngBorderWidth As Single = 1.0!
Public Event StatusChanged(ByVal NewStatus As TrafficLightStatus)

Les deux variables des deux premières lignes fournissent les emplacements de stockage des valeurs pour les propriétés Status et BorderWidth et définissent en outre la valeur par défaut pour ces propriétés. La variable contenant BorderWidth doit être de type Single car il s'agit du type requis dans l'instruction graphique qui dessinera la bordure. Le point d'exclamation dans la valeur par défaut signifie également que nous avons affaire à une variable Single. La dernière ligne de cet ensemble déclare l'événement StatusChanged.

Passons maintenant à l'écriture du code pour la propriété BorderWidth. Insérez les lignes suivantes juste au-dessous de la zone de code libellée Code généré par le Concepteur Windows Form :

<DefaultValue(1.0!), _
Description("Largeur de la bordure autour du feu")> _
Public Property BorderWidth() As Single
 Get
 Return msngBorderWidth
 End Get
 Set(ByVal Value As Single)
 If msngBorderWidth <> Value Then
 msngBorderWidth = Value
 Me.Invalidate()
 End If
 End Set
End Property

Les deux premières lignes incluent des attributs qui font que la propriété fonctionne bien avec l'IDE. L'attribut DefaultValue permet de pouvoir réinitialiser la valeur de la propriété sur la valeur par défaut dans les fenêtres Propriétés (je reviendrai sur ce sujet un peu plus tard). L'attribut Description correspond au texte qui apparaît en bas de la fenêtre Propriétés lorsque la propriété est sélectionnée.

L'attribut DefaultValue gère également une autre astuce géniale. Si vous placez le contrôle TrafficLight sur un formulaire et que vous laissez la propriété BorderWidth définie sur sa valeur par défaut, le concepteur de formulaire ne générera pas une ligne de code pour définir la valeur de la propriété. Ce contrôle agirait alors comme les autres contrôles Windows Forms. Si vous regardez le code généré par le concepteur pour un contrôle typique tel que TextBox, vous verrez que les lignes de code ne concernent que les propriétés qui sont définies sur autre chose que leur valeur par défaut. Nous donnons à notre contrôle TrafficLight la même possibilité.

Property Get est explicite. La clause Property Set inclut une logique très répandue dans les propriétés des contrôles visuels. Lorsque vous définissez la propriété, il est important de préciser que le contrôle doit être recoloré si la nouvelle valeur de la propriété modifie l'apparence du contrôle. Ainsi, la clause Set contrôle si la nouvelle valeur transmise est différente de la valeur existant dans la propriété. Si elle ne l'est pas, aucune action n'est entreprise. Dans le cas contraire, elle est acceptée et un accès se fait à la méthode Invalidate du contrôle. Cette méthode signifie que la zone visuelle du contrôle n'est plus d'actualité et que le contrôle doit être recoloré.

La propriété Status doit être définie un peu différemment car il s'agit d'une valeur énumérée. L'attribut DefaultValue n'offre pas la possibilité de réinitialiser automatiquement une propriété énumérée. DefaultValue ne parvient pas non plus dans ce cas à indiquer au concepteur quand il doit laisser le code définir la valeur de la propriété. C'est pourquoi notre implémentation de la propriété Status laisse de côté l'attribut DefaultValue. Voici le code pour la propriété Status :

<Description("État (couleur) du feu de circulation")> _
Public Property Status() As TrafficLightStatus
 Get
 Status = mStatus
 End Get
 Set(ByVal Value As TrafficLightStatus)
 If mStatus <> Value Then
 mStatus = Value
 RaiseEvent StatusChanged(mStatus)
 Me.Invalidate()
 End If
 End Set
End Property

Cela ressemble beaucoup à l'implémentation de la propriété BorderWidth, avec un ajout. Lorsque la propriété Status change, l'événement StatusChanged est déclenché en plus d'une recoloration forcée du contrôle.

Pour gérer la réinitialisation automatique de la propriété dans les fenêtres Propriétés, une méthode spéciale s'impose. Notre propriété étant nommée Status, la méthode de réinitialisation doit être nommée ResetStatus. La méthode de réinitialisation rétablit uniquement la propriété sur sa valeur par défaut. Voici le code :

Public Sub ResetStatus()
 Me.Status = TrafficLightStatus.statusGreen
End Sub

Pour aiguiller le concepteur et lui indiquer quand il doit inclure une ligne de code pour définir la propriété Status, nous devons en outre inclure une méthode nommée ShouldSerializeStatus. Cette méthode renvoie la valeur booléenne True lorsqu'une ligne de code est requise pour la propriété, et False dans le cas contraire. Voici le code :

Public Function ShouldSerializeStatus() As Boolean
 If mStatus = TrafficLightStatus.statusGreen Then
 Return False
 Else
 Return True
 End If
End Function

Étape 4 : coloration de l'apparence du contrôle

Pour donner au contrôle une apparence visuelle, nous devons définir une logique pour l'événement Paint. Cette logique sera ensuite exécutée chaque fois que le contrôle devra actualiser son apparence visuelle.

La logique de Paint dans les Windows Forms utilise des classes provenant de la partie de .NET appelée GDI+. En gros, ces classes sont des wrappers (enveloppes) des fonctions graphiques d'API Windows. À l'instar de .NET, elles sont beaucoup plus faciles à utiliser que l'API. Néanmoins, il y a deux points essentiels à comprendre sur leur fonctionnement.

Dans l'API Windows, les opérations graphiques requièrent un gestionnaire de fenêtre, parfois appelé hWnd. Dans GDI+, celui-ci est remplacé par un objet Graphics qui représente la zone de dessin tout en fournissant les opérations (méthodes) à réaliser dans cette zone.

Par exemple, l'objet Graphics comporte les méthodes suivantes que vous pouvez utiliser pour dessiner différents éléments à l'écran :

  • DrawCurve
  • DrawEllipse
  • DrawLine
  • DrawPolygon
  • DrawRectangle
  • DrawString
  • FillEllipse
  • FillPolygon

Celles-ci parlent d'elles-mêmes et ne constituent qu'un échantillon des méthodes disponibles. Certaines méthodes plus complexes autorisent des actions telles que la rotation d'objets. Nous utiliserons les méthodes DrawRectangle pour dessiner notre bordure et FillEllipse pour dessiner nos cercles colorés.

La plupart des méthodes de dessin requièrent un objet Pen ou Brush. Un objet Pen permet de dessiner une ligne et d'en déterminer la couleur et l'épaisseur. Un objet Brush permet de remplir des zones et en détermine la couleur, ainsi que tous les effets spéciaux, tels que le remplissage d'une zone par un bitmap. Nous utiliserons un effet spécial Brush pour ternir la couleur des ampoules non allumées.

Voici le code qui prend en charge l'événement Paint pour le contrôle :

Protected Overrides Sub OnPaint(ByVal pe As _ 
 System.Windows.Forms.PaintEventArgs)
 MyBase.OnPaint(pe)

 Dim grfGraphics As System.Drawing.Graphics
 grfGraphics = pe.Graphics

 ' Dessiner d'abord trois cercles pour les ampoules.
 ' L'une d'elles sera "allumée". Les autres seront ternes.
 DrawLight(TrafficLightStatus.statusGreen, grfGraphics)
 DrawLight(TrafficLightStatus.statusYellow, grfGraphics)
 DrawLight(TrafficLightStatus.statusRed, grfGraphics)

 ' Dessiner maintenant le contour autour du feu tricolore
 ' Un objet Pen est nécessaire pour tracer le contour. Prenons du noir.
 Dim penDrawingPen As New _
 System.Drawing.Pen(System.Drawing.Color.Black, msngBorderWidth)

 ' Dessiner le contour du feu tricolore sur le contrôle. 
 ' Définir tout d'abord un rectangle à dessiner. 
 Dim rectBorder As System.Drawing.Rectangle

 rectBorder.X = 1
 rectBorder.Y = 1
 rectBorder.Height = Me.Height - 2
 rectBorder.Width = Me.Width - 2
 grfGraphics.DrawRectangle(penDrawingPen, rectBorder)

 ' Mettre à disposition les objets de dessin
 penDrawingPen.Dispose()
 grfGraphics.Dispose()

End Sub

Nous allons autoriser la classe de base à colorer, ce qui a pour effet de colorer l'arrière-plan selon la couleur d'arrière-plan du contrôle. L'objet Graphics du contrôle est ensuite obtenu à partir des arguments d'événement.

Après cela, une fonction est utilisée pour dessiner chacun des trois cercles. Nous traiterons de cette fonction plus loin. Notez que nous devons transmettre une référence de l'objet Graphics à la fonction, ainsi qu'une indication sur le cercle à tracer (rouge, orange ou vert).

Ensuite vient le code pour dessiner le contour. Un rectangle de position et de taille appropriées est déclaré puis transmis à la méthode DrawRectangle de l'objet Graphics.

Enfin, les objets du dessin voient leur méthode Dispose activée. Lorsque vous utilisez GDI+, il est judicieux de mettre à disposition (Dispose) les objets du dessin dès que vous en avez fini avec ceux-ci. Cela permet de "nettoyer" les ressources utilisées par le système d'exploitation pour le dessin. Si votre contrôle est destiné à être utilisé dans Windows® 98 ou dans Windows Me, il est particulièrement important de gérer vos ressources graphiques car ces systèmes d'exploitation comportent moins de capacité pour ces ressources.

Voici la fonction permettant de dessiner les cercles :

Private Sub DrawLight(ByVal LightToDraw As TrafficLightStatus, _
 ByVal grfGraphics As Graphics)

 Dim nCircleX As Integer
 Dim nCircleY As Integer
 Dim nCircleDiameter As Integer
 Dim nCircleColor As Color

 ' Rechercher la coordonnée X et le diamètre pour tous les cercles
 nCircleX = CInt(Me.Size.Width * 0.02)
 nCircleDiameter = CInt(Me.Size.Width * 0.96)
 Select Case LightToDraw
 Case TrafficLightStatus.statusRed
 If LightToDraw = Me.Status Then
 nCircleColor = Color.OrangeRed
 Else
 nCircleColor = Color.Maroon
 End If
 nCircleY = CInt(Me.Size.Height * 0.01)
 Case TrafficLightStatus.statusYellow
 If LightToDraw = Me.Status Then
 nCircleColor = Color.Yellow
 Else
 nCircleColor = Color.Tan
 End If
 nCircleY = CInt(Me.Size.Height * 0.34)
 Case TrafficLightStatus.statusGreen
 If LightToDraw = Me.Status Then
 nCircleColor = Color.LimeGreen
 Else
 nCircleColor = Color.ForestGreen
 End If
 nCircleY = CInt(Me.Size.Height * 0.67)

 End Select
 Dim bshBrush As System.Drawing.Brush
 If LightToDraw = Me.Status Then

 bshBrush = New SolidBrush(nCircleColor)
 Else
 bshBrush = New SolidBrush(Color.FromArgb(60, nCircleColor))
 End If

 ' Dessiner le cercle pour l'ampoule 
 grfGraphics.FillEllipse(bshBrush, nCircleX, nCircleY, nCircleDiameter, nCircleDiameter)

 ' Mettre l'objet Brush à disposition
 bshBrush.Dispose()

End Sub

Il s'agit là du seul dessin complexe de l'ensemble du contrôle. Pour dessiner une ellipse dans GDI+, vous devez spécifier les coordonnées X et Y du coin supérieur gauche du rectangle dans lequel l'ellipse rentre, ainsi que la hauteur et la largeur du rectangle. Les coordonnées X et Y sont respectivement appelées nCircleX and nCircleY. Comme nous dessinons un cercle, la hauteur et la largeur du rectangle sont identiques et la variable nCircleDiameter est utilisée pour stocker cette valeur.

La propriété nCircleX est définie de sorte à se trouver juste à l'intérieur du contrôle (largeur du contrôle multipliée par 0,02). nCircleY dépend de l'ampoule dessinée et elle est définie soit proche du haut du contrôle (rouge), soit à environ un tiers vers le bas (orange), soit à deux tiers vers le bas (vert). Le diamètre, nCircleDiameter, est défini à 96 % de la largeur du contrôle.

Le seul paramètre qu'il nous reste à définir pour dessiner une ellipse pleine concerne la couleur à utiliser. La couleur sera déterminée en fonction (1) de l'ampoule dessinée et (2) du fait que l'ampoule est allumée ou non. Les couleurs des ampoules allumées sont choisies plus brillantes que les couleurs des ampoules éteintes.

La couleur est utilisée pour créer un objet Brush pour le dessin. Si l'ampoule dessinée est allumée, la couleur est utilisée telle quelle. En revanche, si elle est éteinte, nous utilisons une manière différente pour instancier l'objet Brush. Voici la ligne de code pour un outil Brush léger (ampoule éteinte) :

bshBrush = New SolidBrush(Color.FromArgb(60, nCircleColor))

La méthode FromArgB ne correspond pas au nom de méthode le mieux choisi dans .NET, mais elle permet la chose suivante : elle crée un outil Brush qui ternit la couleur en la combinant avec la couleur d'arrière-plan. Le nombre utilisé comme premier argument est compris entre 0 et 255 et plus le nombre est bas, plus la couleur se fond dans l'arrière-plan. Nous utilisons une valeur de 60, ce qui ternit considérablement la couleur de l'ampoule éteinte. Vous souhaiterez peut-être essayer d'autres valeurs (ou en faire une propriété définissable) pour obtenir des effets différents.

Enfin, la méthode DrawEllipse de l'objet Graphics dessine le cercle, ce qui clôt la fonction. Rappelez-vous que la fonction est appelée trois fois (une fois par cercle).

Étape 5 : activation du contrôle pour qu'il réponse à l'utilisateur

Pour permettre à l'utilisateur de changer la couleur du feu, le clic de souris de l'utilisateur doit être détecté. Il existe de nombreuses méthodes pour cela, comme le sait n'importe quel développeur Visual Basic. Nous utilisons ici l'une des plus simples, à savoir la détection de l'événement MouseUp. Voici le code permettant de détecter le clic de l'utilisateur et de modifier la propriété Status en conséquence :

Private Sub TrafficLight_MouseUp(ByVal sender As Object, _
 ByVal e As System.Windows.Forms.MouseEventArgs) _
 Handles MyBase.MouseUp
 Dim nMidPointX As Integer = CInt(Me.Size.Width * 0.5)
 Dim nCircleRadius As Integer = nMidPointX
 If Distance(e.X, e.Y, nMidPointX, CInt(Me.Size.Height / 6)) _ 
 < nCircleRadius Then
 Me.Status = TrafficLightStatus.statusRed
 Exit Sub
 End If
 If Distance(e.X, e.Y, nMidPointX, CInt(Me.Size.Height / 2)) _ 
 < nCircleRadius Then
 Me.Status = TrafficLightStatus.statusYellow
 Exit Sub 
 End If
 If Distance(e.X, e.Y, nMidPointX, CInt((5 * Me.Size.Height) / 6)) _ 
 < nCircleRadius Then
 Me.Status = TrafficLightStatus.statusGreen
 End If

End Sub

Private Function Distance(ByVal X1 As Integer, _ 
 ByVal Y1 As Integer, _ 
 ByVal X2 As Integer, _ 
 ByVal y2 As Integer) As Integer
 Return CInt(System.Math.Sqrt((X1 - X2) ^ 2 + (Y1 - y2) ^ 2))
End Function

La gestion d'événement est explicite. La distance entre l'endroit du clic de souris et le centre de chaque cercle est contrôlé. (Notez que les centres des cercles seront respectivement à 1/6, 1/2 et 5/6 vers le bas du contrôle. Si cela ne vous semble pas clair, vérifiez en le dessinant sur une feuille de papier.) Si la distance calculée est inférieure au rayon du cercle, alors la propriété Status est modifiée.

La fonction Distance calcule la distance à l'aide de la formule que vous avez probablement apprise en cours d'algèbre. Notez que la fonction de racine carrée provient de l'espace de noms System.Math, où les fonctions mathématiques classiques sont stockées.

Étape 6 : nettoyage

Il reste deux autres opérations à traiter pour que le contrôle fonctionne avec fluidité. Par exemple, le contrôle doit être recoloré lorsqu'il est redimensionné. En outre, pour conserver les proportions du contrôle, nous devons permettre une détection des événements qui affectent sa taille et forcer la largeur à correspondre à un tiers de la hauteur. Voici les routines de gestion des événements qui prennent en charge ces deux tâches :

Private Sub TrafficLight_Resize(ByVal sender As Object, _
 ByVal e As System.EventArgs) Handles MyBase.Resize
 Me.Invalidate()
End Sub

Private Sub TrafficLight_Layout(ByVal sender As Object, _
 ByVal e As System.Windows.Forms.LayoutEventArgs) _
 Handles MyBase.Layout
 Select Case e.AffectedProperty
 Case "Bounds"
 Me.Width = CInt(Me.Height * 0.3333)
 Case Else
 ' Ne rien faire
 End Select
End Sub

Définissons enfin l'icône qui sera utilisée pour le contrôle dans la boîte à outils. Le contrôle possède déjà une icône par défaut qui ressemble à un levier de vitesse, mais nous allons utiliser une icône livrée avec Visual Studio .NET et qui ressemble à un feu tricolore.

L'icône de boîte à outils pour un contrôle est définie par un attribut correspondant à la classe nommée, en l'occurrence et en toute logique, ToolboxBitmap. Insérez la ligne suivante juste au-dessous de la ligne qui commence par Public Class :

<ToolboxBitmap("C:\Program Files\Microsoft Visual Studio 
.NET\Common7\Graphics\icons\Traffic\TRFFC09.ICO")> _

Remarque :   cela doit être placé sur une seule ligne mais nous avons inséré un retour chariot après Studio pour plus de lisibilité. Lorsque vous collez ce code, assurez-vous qu'il se tient sur une seule ligne, qu'il n'y a qu'un espace entre Studio et .NET, et que le retour chariot a été supprimé. Ce code va définir l'attribut sur une icône située dans le répertoire Visual Studio, en supposant que vous avez installé Visual Studio .NET dans son emplacement par défaut. Dans le cas contraire, modifiez le nom de chemin de l'icône en conséquence.

Étape 7 : création et test du contrôle

Le contrôle TrafficLight est désormais terminé. Sélectionnez Build | Build MyControls pour créer la bibliothèque de contrôles terminée.

Pour tester le contrôle, nous avons besoin d'un projet Windows Forms. Pour cela vous pouvez utiliser une solution distincte mais il est plus facile de le faire dans la même solution que celle qui a été utilisée pour développer le contrôle. Dans le menu, sélectionnez Fichier | Ajouter un projet | Nouveau projet. Sélectionnez le type de projet Application Windows et nommez le projet TestTrafficLight. Cliquez sur OK pour accéder à l'application Windows de test.

Avant de pouvoir faire glisser le contrôle TrafficLight sur le formulaire vierge Form1 pour tester l'application, vous devrez placer le contrôle TrafficLight dans la boîte à outils. Cliquez avec le bouton droit de la souris sur l'onglet Windows Forms de la boîte à outils et sélectionnez Personnaliser la boîte à outils. Sélectionnez l'onglet Composants .NET Framework et cliquez sur Parcourir. Allez jusqu'au dossier de votre projet MyControls , puis dans le sous-répertoire /bin du projet. Sélectionnez le composant MyControls.dll et cliquez sur OK. La boîte de dialogue doit alors correspondre à celle de la figure 2.

Vérification du contrôle TrafficLight dans la boîte de dialogue Personnaliser la boîte à outils

Figure 2. Vérification du contrôle TrafficLight dans la boîte de dialogue Personnaliser la boîte à outils.

Vous devriez voir une coche à côté du contrôle TrafficLight. Cliquez sur le bouton OK : le contrôle TrafficLight apparaît alors en bas de la liste des contrôles sous l'onglet Windows Forms de la boîte à outils. La figure 3 montre une boîte à outils avec le contrôle TrafficLight en bas.

Contrôle TrafficLight en bas de la boîte à outils

Figure 3. Contrôle TrafficLight en bas de la boîte à outils

Vous pouvez maintenant faire glisser un contrôle TrafficLight sur le formulaire vierge Form1 dans TestTrafficLight. Il sera nommé TrafficLight1 par défaut. Vous pouvez redimensionner le contrôle et définir ses propriétés, y compris la propriété Status qui comporte un menu déroulant avec les trois valeurs possibles pour la propriété. Notez qu'à mesure que vous redimensionnez le contrôle ou que vous en modifiez les propriétés, celui-ci s'actualise dans le concepteur.

Pour voir la réinitialisation d'une propriété à sa valeur par défaut, définissez la propriété Status en statusRed. Cliquez ensuite avec le bouton droit de la souris sur la propriété Status dans la fenêtre Propriétés et sélectionnez Réinitialiser, comme le montre la figure 4. La propriété se rétablit alors sur statusGreen. L'astuce de réinitialisation fonctionne également avec la propriété BorderWidth si elle est définie sur une valeur autre que 1.

Option Réinitialiser pour la propriété Status dans la fenêtre Propriétés. Notez la description de la propriété Status en bas de la fenêtre

Figure 4. Option Réinitialiser pour la propriété Status dans la fenêtre Propriétés. Notez la description de la propriété Status en bas de la fenêtre.

Si vous le souhaitez, vous pouvez également insérer un événement StatusChanged pour le contrôle. Vous pouvez alors voir l'état modifié avec la ligne de code suivante dans cet événement :

MsgBox("Le nouvel état est " & NewStatus.ToString)

Pour tester le contrôle en action, vous devez démarrer le projet TestTrafficLight. À ce moment-là, il ne s'agit pas du projet de démarrage pour la solution. Vous devez donc y remédier. Dans l'Explorateur de solutions, cliquez avec le bouton droit de la souris sur le nom Solution (il s'agit de la toute première ligne). Sélectionnez Propriétés puis changez le paramètre Projet de démarrage unique de MyControls en TestTrafficLight, et cliquez sur OK.

Appuyez maintenant sur F5 pour démarrer le projet. Vous voyez alors le formulaire s'afficher, avec le contrôle TrafficLight dessus. Testez le contrôle en clIquant sur les différentes ampoules et eN contrôlant qu'elles s'Allument. Vous pouvez également tester la propriété BorderWidth et essayer de définir la propriété Status de l'ampoule dans le code.

Conclusion

Certes, TrafficLight est un contrôle simple (bien que j'aie rencontré un développeur qui en avait besoin pour un projet réel). Toutefois, il illustre tous les principes nécessaires au développement de contrôles plus sophistiqués, notamment pour :

  • ajouter des propriétés à un contrôle ;
  • autoriser les propriétés à se coordonner avec l'IDE Visual Studio à l'aide des valeurs et descriptions par défaut ;
  • insérer une logique dans l'événement Paint pour colorer le contrôle ;
  • utiliser GDI+ dans la logique de coloriage ;
  • définir un bitmap à afficher pour le contrôle dans la boîte à outils.

Les capacités de dessin de GDI+ vous permettront de vous familiariser plus en profondeur avec la création de contrôles plus sophistiqués. Si vous avez compris comment TrafficLight trace son contour et ses cercles colorés, vous avez fait un grand pas. Le point essentiel, c'est que même les programmeurs paresseux tels que moi créent des contrôles Windows Forms avancés à l'aide de Visual Basic .NET.



Dernière mise à jour le mardi 22 octobre 2002



Pour en savoir plus
Microsoft réalise une enquête en ligne pour recueillir votre opinion sur le site Web de MSDN. Si vous choisissez d’y participer, cette enquête en ligne vous sera présentée lorsque vous quitterez le site Web de MSDN.

Si vous souhaitez y participer,
Afficher:
© 2014 Microsoft