Procédure pas à pas : création d'un contrôle composite à l'aide de Visual Basic
Les contrôles composites offrent le moyen de créer et de réutiliser des interfaces graphiques personnalisées. Un contrôle composite est pour l'essentiel un composant doté d'une représentation visuelle. Il peut être constitué d'un ou de plusieurs contrôles Windows Forms, de composants ou de blocs de code, lesquels peuvent développer des fonctionnalités en validant des entrées de l'utilisateur, en modifiant des propriétés d'affichage ou en effectuant d'autres tâches imposées par le créateur du contrôle. Les contrôles composites peuvent être placés dans les Windows Forms de la même façon que les autres contrôles. Dans la première partie de cette procédure pas à pas, créez un simple contrôle composite appelé ctlClock. Dans la deuxième partie de la procédure, développez la fonctionnalité de ctlClock par l'intermédiaire de l'héritage.
Notes
Les boîtes de dialogue et les commandes de menu qui s'affichent peuvent être différentes de celles qui sont décrites dans l'aide, en fonction de vos paramètres actifs ou de l'édition utilisée. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Utilisation des paramètres.
Création du projet
Lorsque vous créez un projet, vous spécifiez son nom pour définir l'espace de noms racine, le nom de l'assembly ainsi que celui du projet pour avoir la garantie que le composant par défaut sera placé dans l'espace de noms adéquat.
Pour créer la bibliothèque de contrôles ctlClockLib et le contrôle ctlClock
Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Projet pour ouvrir la boîte de dialogue Nouveau projet.
Dans la liste de projets Visual Basic, sélectionnez le modèle de projet Bibliothèque de contrôles Windows, tapez ctlClockLib dans la zone Nom, puis cliquez sur OK.
Le nom de projet, ctlClockLib, est également assigné à l'espace de noms racine par défaut. L'espace de noms racine sert à qualifier le nom des composants de l'assembly. Par exemple, si deux assemblys contiennent des composants nommés ctlClock, vous pouvez spécifier votre composant ctlClock à l'aide de ctlClockLib.ctlClock. .
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur UserControl1.vb, puis cliquez sur Renommer. Remplacez le nom de fichier par ctlClock.vb. Cliquez sur le bouton Oui à la question de savoir si vous souhaitez renommer toutes les références à l'élément de code "UserControl1".
Notes
Par défaut, un contrôle composite hérite de la classe UserControl fournie par le système. La classe UserControl fournit les fonctionnalités requises par les contrôles composites et implémente des méthodes et des propriétés standard.
Dans le menu Fichier, cliquez sur Enregistrer tout pour enregistrer le projet.
Ajout de contrôles Windows et de composants au contrôle composite
L'interface visuelle est une partie essentielle de votre contrôle composite. Elle est implémentée par l'ajout d'un ou de plusieurs contrôles Windows à l'aire du concepteur. Dans la démonstration suivante, vous allez incorporer des contrôles Windows à votre contrôle composite et écrire du code pour implémenter ses fonctionnalités.
Pour ajouter un contrôle Label et un contrôle Timer à votre contrôle composite
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur ctlClock.vb, puis cliquez sur Concepteur de vues.
Dans la Boîte à outils, développez le nœud Contrôles communs, puis double-cliquez sur Étiquette.
Un contrôle Label nommé Label1 est ajouté à votre contrôle sur l'aire du concepteur.
Dans le concepteur, cliquez sur Label1. Dans la fenêtre Propriétés, définissez les propriétés suivantes.
Propriété
Remplacez par
Nom
lblDisplay
Texte
(espace)
TextAlign
MiddleCenter
Font.Size
14
Dans la boîte à outils, développez le nœud Composants, puis double-cliquez sur Minuterie.
Une Timer étant un composant, elle n'a pas de représentation visuelle au moment de l'exécution. Par conséquent, ce composant n'apparaît pas avec les contrôles sur l'aire du concepteur, mais plutôt dans le Concepteur de composants (sous forme de barre d'état au bas de l'aire du concepteur).
Dans le Concepteur de composants, cliquez sur Timer1, puis attribuez à la propriété Interval la valeur 1000 et à la propriété Enabled la valeur True.
La propriété Interval détermine la fréquence des graduations du composant Timer. À chaque graduation, le composant Timer1 exécute le code de l'événement Timer1_Tick. L'intervalle représente le nombre de millisecondes entre deux graduations.
Dans le Concepteur de composants, double-cliquez sur Timer1 afin d'accéder à l'événement Timer1_Tick de ctlClock.
Modifiez le code afin qu'il ressemble au code ci-après. N'oubliez pas de remplacer le modificateur d'accès Private par Protected.
[Visual Basic]
Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As _ System.EventArgs) Handles Timer1.Tick ' Causes the label to display the current time. lblDisplay.Text = Format(Now, "hh:mm:ss") End SubCe code provoque l'affichage de l'heure actuelle dans lblDisplay. Comme l'intervalle de Timer1 a été fixé à 1 000, cet événement se produit toutes les mille millisecondes, mettant ainsi à jour l'heure actuelle toutes les secondes.
Modifiez la méthode de telle manière qu'elle puisse être substituée. Pour plus d'informations, consultez la section « Héritage d'un contrôle utilisateur » ci-dessous.
[Visual Basic]
Protected Overridable Sub Timer1_Tick(ByVal sender As Object, ByVal _ e As System.EventArgs) Handles Timer1.TickDans le menu Fichier, cliquez sur Enregistrer tout pour enregistrer le projet.
Ajout de propriétés au contrôle composite
Le contrôle horloge intègre à présent un contrôle Label et un composant Timer, avec chacun leur propre jeu de propriétés inhérentes. Bien que les propriétés individuelles de ces contrôles ne seront pas accessibles pour les autres utilisateurs de votre contrôle, vous pouvez créer et exposer des propriétés personnalisées en écrivant les blocs de code appropriés. Dans la procédure suivante, vous ajouterez à votre contrôle des propriétés permettant à l'utilisateur de changer la couleur d'arrière-plan et le texte.
Pour ajouter une propriété à votre contrôle composite
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur ctlClock.vb, puis cliquez sur Afficher le code.
Vous voyez s'ouvrir l'éditeur de code de votre contrôle.
Recherchez l'instruction Public Class ctlClock. Sous cette ligne, tapez le code ci-dessous.
[Visual Basic]
Private colFColor as Color Private colBColor as ColorCes instructions créent les variables privées que vous utiliserez pour stocker les valeurs des propriétés que vous êtes sur le point de créer.
Insérez le code suivant sous les déclarations de variable de l'étape 2.
[Visual Basic]
' Declares the name and type of the property. Property ClockBackColor() as Color ' Retrieves the value of the private variable colBColor. Get Return colBColor End Get ' Stores the selected value in the private variable colBColor, and ' updates the background color of the label control lblDisplay. Set(ByVal value as Color) colBColor = value lblDisplay.BackColor = colBColor End Set End Property ' Provides a similar set of instructions for the foreground color. Property ClockForeColor() as Color Get Return colFColor End Get Set(ByVal value as Color) colFColor = value lblDisplay.ForeColor = colFColor End Set End PropertyLe code précédent met deux propriétés personnalisées, ClockForeColor et ClockBackColor, à la disposition des futurs utilisateurs du contrôle en appelant l'instruction Property. Les instructions Get et Set assurent le stockage et la récupération de la valeur de propriété ainsi que du code permettant d'implémenter les fonctionnalités appropriées à la propriété.
Dans le menu Fichier, cliquez sur Enregistrer tout pour enregistrer le projet.
Test du contrôle
Les contrôles ne sont pas des projets autonomes ; ils doivent être hébergés dans un conteneur. Testez le comportement à l'exécution de votre contrôle et essayez ses propriétés avec le conteneur de test UserControl. Pour plus d'informations, consultez Comment : tester le comportement d'un UserControl au moment de l'exécution.
Pour tester le contrôle
Appuyez sur F5 pour générer le projet et exécuter votre contrôle dans le conteneur de test UserControl.
Dans la grille des propriétés du conteneur de test, sélectionnez la propriété ClockBackColor, puis cliquez sur la flèche de déroulement pour afficher la palette de couleurs.
Choisissez une couleur en cliquant dessus.
La couleur d'arrière-plan du contrôle est remplacée par celle que vous avez sélectionnée.
Utilisez une séquence d'événements similaire pour vérifier que la propriété ClockForeColor fonctionne comme prévu.
Cliquez sur Fermer pour fermer le conteneur de test UserControl.
Dans cette section et les sections précédentes, vous avez vu comment les composants et les contrôles Windows pouvaient être associés à du code et à un empaquetage afin d'offrir des fonctionnalités personnalisées sous la forme d'un contrôle composite. Vous avez appris à exposer des propriétés dans votre contrôle composite et à tester ce dernier, une fois terminé. Dans la section suivante, vous allez apprendre à construire un contrôle composite hérité en utilisant ctlClock comme base.
Héritage d'un contrôle composite
Dans les sections précédentes, vous avez appris à associer des contrôles Windows, des composants et du code dans des contrôles composites réutilisables. Votre contrôle composite peut à présent être utilisé comme base pour construire d'autres contrôles. Le processus par l'intermédiaire duquel une classe est dérivée d'une classe de base est appelé héritage. Dans cette section, vous allez créer un contrôle composite nommé ctlAlarmClock. Ce contrôle sera dérivé de son contrôle parent, à savoir ctlClock. Vous allez apprendre à étendre les fonctionnalités de ctlClock en substituant les méthodes parentes et en ajoutant de nouvelles méthodes et propriétés.
La première étape de la création d'un contrôle hérité consiste à le dériver de son parent. Cette action crée un nouveau contrôle qui présente toutes les propriétés, méthodes et caractéristiques graphiques du contrôle parent, mais qui peut également servir de base pour l'ajout de fonctionnalités nouvelles ou modifiées.
Pour créer le contrôle hérité
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur ctlClockLib, pointez sur Ajouter, puis cliquez sur Contrôle utilisateur.
La boîte de dialogue Ajouter un nouvel élément s'ouvre.
Sélectionnez le modèle Contrôle utilisateur hérité.
Dans la zone Nom, tapez ctlAlarmClock.vb, puis cliquez sur Ajouter.
La boîte de dialogue Sélecteur d'héritage apparaît.
Sous Nom du composant, double-cliquez sur ctlClock.
Dans l'Explorateur de solutions, parcourez les projets en cours.
Notes
Un fichier appelé ctlAlarmClock.vb a été ajouté au projet actuel.
Ajout de propriétés d'alarme
Vous ajoutez des propriétés à un contrôle hérité de la même façon qu'à un contrôle composite. Vous allez maintenant utiliser la syntaxe de déclaration de propriété pour ajouter deux propriétés à votre contrôle : AlarmTime, qui stocke la valeur de date et d'heure à laquelle l'alarme se déclenche et AlarmSet, qui indique si l'alarme est activée ou non.
Pour ajouter des propriétés à votre contrôle composite
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur ctlAlarmClock, puis cliquez sur Afficher le code.
Recherchez la déclaration de classe du contrôle ctlAlarmClock qui apparaît sous la forme Public Class ctlAlarmClock. Dans la déclaration de classe, insérez le code ci-dessous.
[Visual Basic]
Private dteAlarmTime As Date Private blnAlarmSet As Boolean ' These properties will be declared as Public to allow future ' developers to access them. Public Property AlarmTime() As Date Get Return dteAlarmTime End Get Set(ByVal value as Date) dteAlarmTime = value End Set End Property Public Property AlarmSet() As Boolean Get Return blnAlarmSet End Get Set(ByVal value as Boolean) blnAlarmSet = value End Set End Property
Ajout d'éléments à l'interface graphique du contrôle
Votre contrôle hérité présente une interface visuelle identique à celle du contrôle hérité. Il possède les mêmes contrôles constituants que le contrôle parent, mais les propriétés de ces contrôles ne sont pas disponibles s'ils n'ont pas été exposés de manière spécifique. Vous pouvez ajouter des éléments à l'interface graphique d'un contrôle composite hérité comme vous le feriez pour n'importe quel contrôle composite. Pour modifier l'interface visuelle de votre alarme, vous allez ajouter un contrôle de type étiquette qui clignotera lors du déclenchement de l'alarme.
Pour ajouter le contrôle Label
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur ctlAlarmClock, puis cliquez sur Concepteur de vues.
Le Concepteur de ctlAlarmClock s'ouvre dans la fenêtre principale.
Cliquez sur lblDisplay (la partie affichage du contrôle) et visualisez la fenêtre Propriétés.
Notes
Toutes les propriétés sont affichées, mais grisées. Cela signifie que ces propriétés sont propres à lblDisplay et qu'elles ne peuvent pas être modifiées dans la fenêtre Propriétés. Par défaut, les contrôles contenus dans un contrôle composite sont de type Private et leurs propriétés ne sont accessibles par aucun moyen.
Notes
Si vous voulez permettre aux futurs utilisateurs de votre contrôle utilisateur d'accéder à ses contrôles internes, déclarez ceux-ci comme Public ou Protected. Cela vous permettra de définir et de modifier à l'aide du code approprié les propriétés des contrôles contenus dans le contrôle composite.
Ajoutez un contrôle Label à votre contrôle composite.
À l'aide de la souris, placez le contrôle Label immédiatement sous la zone d'affichage. Dans la fenêtre Propriétés, définissez les propriétés suivantes.
Propriété
Paramètre
Nom
lblAlarm
Texte
Alarme !
TextAlign
MiddleCenter
Visible
False
Ajout de la fonctionnalité d'alarme
Dans les procédures précédentes, vous avez ajouté des propriétés et un contrôle activant des fonctionnalités d'alarme dans votre contrôle composite. Dans cette procédure, vous ajouterez du code pour comparer l'heure actuelle avec celle de l'alarme et, si les heures sont identiques, déclencher une alarme à la fois sonore et clignotante. En substituant la méthode Timer1_Tick de ctlClock et en lui ajoutant le code supplémentaire, vous étendez la fonction de ctlAlarmClock tout en conservant toutes les fonctionnalités inhérentes de ctlClock.
Pour substituer la méthode Timer1_Tick de ctlClock
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur ctlAlarmClock.vb, puis cliquez sur Afficher le code.
Recherchez l'instruction Private blnAlarmSet As Boolean. Immédiatement sous cette instruction, tapez l'instruction ci-dessous.
[Visual Basic]
Dim blnColorTicker as BooleanRecherchez l'instruction End Class en bas de la page. Juste avant l'instruction End Class, ajoutez le code ci-dessous.
[Visual Basic]
Protected Overrides Sub Timer1_Tick(ByVal sender As Object, ByVal e _ As System.EventArgs) ' Calls the Timer1_Tick method of ctlClock. MyBase.Timer1_Tick(sender, e) ' Checks to see if the Alarm is set. If AlarmSet = False Then Exit Sub End If ' If the date, hour, and minute of the alarm time are the same as ' now, flash and beep an alarm. If AlarmTime.Date = Now.Date And AlarmTime.Hour = Now.Hour And _ AlarmTime.Minute = Now.Minute Then ' Sounds an audible beep. Beep() ' Sets lblAlarmVisible to True, and changes the background color based on the ' value of blnColorTicker. The background color of the label will ' flash once per tick of the clock. lblAlarm.Visible = True If blnColorTicker = False Then lblAlarm.BackColor = Color.PeachPuff blnColorTicker = True Else lblAlarm.BackColor = Color.Plum blnColorTicker = False End If Else ' Once the alarm has sounded for a minute, the label is made ' invisible again. lblAlarm.Visible = False End If End SubL'ajout de ce code permet d'effectuer plusieurs tâches. L'instruction Overrides ordonne au contrôle d'utiliser cette méthode à la place de celle qui a été héritée du contrôle de base. Lorsqu'elle est appelée, cette méthode appelle la méthode à laquelle elle se substitue en appelant l'instruction MyBase.Timer1_Tick, ce qui garantit que toutes les fonctionnalités incorporées au contrôle d'origine sont reproduites dans ce contrôle. Elle exécute ensuite du code supplémentaire afin d'intégrer la fonctionnalité d'alarme. Un contrôle Label clignotant apparaît lorsque l'alarme se produit et un signal sonore se fait entendre.
Notes
Du moment que vous substituez un gestionnaire d'événements hérité, vous n'êtes pas tenu de spécifier l'événement à l'aide du mot clé Handles. L'événement est déjà raccordé. Vous substituez en fait seulement l'implémentation du gestionnaire.
Le contrôle de l'alarme est quasiment terminé. Il ne reste plus qu'à implémenter un moyen de le désactiver. Pour réaliser cette opération, vous ajouterez le code à la méthode lblAlarm_Click.
Pour implémenter la méthode shutoff
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur ctlAlarmClock.vb, puis cliquez sur Concepteur de vues.
Dans le concepteur, double-cliquez sur lblAlarm. L'éditeur de code s'ouvre à la ligne Private Sub lblAlarm_Click.
Modifiez cette méthode afin qu'elle ressemble au code ci-dessous.
[Visual Basic]
Private Sub lblAlarm_Click(ByVal sender As Object, ByVal e As _ System.EventArgs) Handles lblAlarm.Click ' Turns off the alarm. AlarmSet = False ' Hides the flashing label. lblAlarm.Visible = False End SubDans le menu Fichier, cliquez sur Enregistrer tout pour enregistrer le projet.
Utilisation du contrôle hérité sur un formulaire
Vous pouvez tester votre contrôle hérité de la même façon que vous avez testé le contrôle de classe de base, ctlClock : appuyez sur F5 pour générer le projet et exécuter votre contrôle dans le conteneur de test UserControl. Pour plus d'informations, consultez Comment : tester le comportement d'un UserControl au moment de l'exécution.
Pour mettre votre contrôle en application, vous devrez l'héberger sur un formulaire. Comme dans le cas d'un contrôle composite standard, un contrôle composite hérité ne peut pas fonctionner de façon autonome et doit être hébergé dans un formulaire ou autre conteneur. Comme ctlAlarmClock présente une plus grande profondeur de fonctionnalités, un code supplémentaire est requis pour tester ce contrôle. Dans cette section, vous allez écrire un programme simple afin de tester les fonctionnalités de ctlAlarmClock. Vous allez écrire le code permettant de définir et d'afficher la propriété AlarmTime du contrôle ctlAlarmClock, puis tester ses fonctions inhérentes.
Pour générer et ajouter votre contrôle à un formulaire de test
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur ctlClockLib, puis cliquez sur Générer.
Dans le menu Fichier, pointez sur Ajouter, puis cliquez sur Nouveau projet.
Ajoutez un nouveau projet d'application Windows à la solution et nommez-le Test.
Le projet Test est ajouté à l'Explorateur de solutions.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nœud de projet Test, puis cliquez sur Ajouter une référence pour afficher la boîte de dialogue Ajouter une référence.
Cliquez sur l'onglet Projets. Le projet ctlClockLib est répertorié sous Nom du projet. Double-cliquez sur ctlClockLib pour ajouter la référence au projet de test.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur Test, puis cliquez sur Générer.
Dans la Boîte à outils, développez le nœud Composants ctlClockLib.
Double-cliquez sur ctlAlarmClock pour ajouter une instance de ctlAlarmClock à votre formulaire.
Dans la Boîte à outils, localisez DateTimePicker et double-cliquez dessus afin d'ajouter un contrôle DateTimePicker à votre formulaire, puis ajoutez un contrôle Label en double-cliquant sur Label.
À l'aide de la souris, placez les contrôles dans le formulaire à un endroit adéquat.
Définissez les propriétés de ces contrôles de la manière suivante.
Contrôle
Propriété
Valeur
label1
Texte
(espace)
Nom
lblTest
dateTimePicker1
Nom
dtpTest
Format
Dans le concepteur, double-cliquez sur dtpTest.
L'éditeur de code s'ouvre sur Private Sub dtpTest_ValueChanged.
Modifiez le code afin qu'il ressemble au code ci-dessous.
[Visual Basic]
Private Sub dtpTest_ValueChanged(ByVal sender As Object, ByVal e As _ System.EventArgs) Handles dtpTest.ValueChanged ctlAlarmClock1.AlarmTime = dtpTest.Value ctlAlarmClock1.AlarmSet = True lblTest.Text = "Alarm Time is " & Format(ctlAlarmClock1.AlarmTime, _ "hh:mm") End SubDans l'Explorateur de solutions, cliquez avec le bouton droit sur Test, puis cliquez sur Définir comme projet de démarrage.
Dans le menu Déboguer, cliquez sur Démarrer le débogage.
Le programme de test démarre. Notez que l'heure actuelle est mise à jour dans le contrôle ctlAlarmClock et que l'heure de démarrage est affichée dans le contrôle DateTimePicker.
Cliquez sur le contrôle DateTimePicker dans lequel sont affichées les minutes de l'heure.
À l'aide du clavier, définissez pour les minutes une valeur supérieure d'une minute à l'heure actuelle affichée dans ctlAlarmClock.
L'heure de définition de l'alarme apparaît dans lblTest. Attendez que l'heure affichée atteigne l'heure définie pour l'alarme. Lorsque l'heure affichée atteint celle à laquelle l'alarme est définie, le signal sonore se fait entendre et lblAlarm se met à clignoter.
Désactivez l'alarme en cliquant sur lblAlarm. Vous pouvez maintenant réinitialiser l'alarme.
Cette procédure pas à pas a illustré plusieurs concepts clés. Vous avez appris à créer un contrôle composite en associant des contrôles et des composants dans un conteneur de contrôle composite. Vous avez appris à ajouter des propriétés à votre contrôle et à écrire du code afin d'implémenter des fonctionnalités personnalisées. Dans la dernière section, vous avez appris à étendre les fonctionnalités d'un contrôle composite donné par l'intermédiaire de l'héritage, ainsi qu'à modifier les fonctionnalités des méthodes hôtes en substituant ces méthodes.
Voir aussi
Tâches
Comment : créer des contrôles composites
Comment : afficher un contrôle dans la boîte de dialogue Choisir des éléments de boîte à outils
Concepts
Variétés de contrôles personnalisés