Comment créer un contrôle utilisateur (Windows Forms .NET)
Cet article explique comment ajouter un contrôle utilisateur à votre projet, puis ajouter ce contrôle utilisateur à un form. Vous allez créer un contrôle utilisateur réutilisable qui est visuellement attrayant et fonctionnel. Le nouveau contrôle regroupe un TextBox contrôle avec un Button contrôle. Lorsque l’utilisateur sélectionne le buttontexte, le texte de la zone de texte est effacé. Pour plus d’informations sur les contrôles utilisateur, consultez vue d’ensemble du contrôle utilisateur.
Ajouter un contrôle utilisateur à un projet
Après avoir ouvert votre projet Windows Forms dans Visual Studio, utilisez les modèles Visual Studio pour créer un contrôle utilisateur :
Dans Visual Studio, recherchez la fenêtre Explorateur de projets. Cliquez avec le bouton droit sur le projet et choisissez Ajouter un>contrôle utilisateur (Windows Forms).
Définissez le nom du contrôle sur ClearableTextBox, puis appuyez sur Ajouter.
Une fois le contrôle utilisateur créé, Visual Studio ouvre le concepteur :
Concevoir la zone de texte pouvant être effacée
Le contrôle utilisateur est constitué de contrôles constituants, qui sont les contrôles que vous créez sur l’aire de conception, tout comme la façon dont vous concevez un form. Procédez comme suit pour ajouter et configurer le contrôle utilisateur et ses contrôles constituants :
Une fois le concepteur ouvert, l’aire de conception du contrôle utilisateur doit être l’objet sélectionné. Si ce n’est pas le cas, cliquez sur l’aire de conception pour la sélectionner. Définissez les propriétés suivantes dans la fenêtre Propriétés :
Propriété Valeur MinimumSize 84, 53
Taille 191, 53
Ajoutez un Label contrôle. Définissez les propriétés suivantes :
Propriété Valeur Nom lblTitle
Emplacement 3, 5
Ajoutez un TextBox contrôle. Définissez les propriétés suivantes :
Propriété Valeur Nom txtValue
Ancre Top, Left, Right
Emplacement 3, 23
Taille 148, 23
Ajoutez un Button contrôle. Définissez les propriétés suivantes :
Propriété Valeur Nom btnClear
Ancre Top, Right
Emplacement 157, 23
Taille 31, 23
Détails ↻
Le contrôle doit ressembler à l’image suivante :
Appuyez sur F7 pour ouvrir l’éditeur de code de la
ClearableTextBox
classe.Apportez les modifications de code suivantes :
En haut du fichier de code, importez l’espace
System.ComponentModel
de noms.Appliquez l’attribut
DefaultEvent
à la classe. Cet attribut définit l’événement généré par le consommateur lorsque le contrôle est double-cliqué dans le concepteur. Consommateur déclarant et utilisant ce contrôle. Pour plus d’informations sur les attributs, consultez La vue d’ensemble des attributs (C#) ou des attributs (Visual Basic).using System.ComponentModel; namespace UserControlProject { [DefaultEvent(nameof(TextChanged))] public partial class ClearableTextBox : UserControl
Imports System.ComponentModel <DefaultEvent("TextChanged")> Public Class ClearableTextBox
Ajoutez un gestionnaire d’événements qui transfère l’événement
TextBox.TextChanged
au consommateur :[Browsable(true)] public new event EventHandler? TextChanged { add => txtValue.TextChanged += value; remove => txtValue.TextChanged -= value; }
<Browsable(True)> Public Shadows Custom Event TextChanged As EventHandler AddHandler(value As EventHandler) AddHandler txtValue.TextChanged, value End AddHandler RemoveHandler(value As EventHandler) RemoveHandler txtValue.TextChanged, value End RemoveHandler RaiseEvent(sender As Object, e As EventArgs) End RaiseEvent End Event
Notez que l’événement a l’attribut
Browsable
déclaré dessus. Lorsque l’objetBrowsable
est appliqué à un événement ou à une propriété, il contrôle si l’élément est visible dans la fenêtre Propriétés lorsque le contrôle est sélectionné dans le concepteur. Dans ce cas,true
il est passé en tant que paramètre à l’attribut indiquant que l’événement doit être visible.Ajoutez une propriété de chaîne nommée
Text
, qui transfère laTextBox.Text
propriété au consommateur :[Browsable(true)] public new string Text { get => txtValue.Text; set => txtValue.Text = value; }
<Browsable(True)> Public Shadows Property Text() As String Get Return txtValue.Text End Get Set(value As String) txtValue.Text = value End Set End Property
Ajoutez une propriété de chaîne nommée
Title
, qui transfère laLabel.Text
propriété au consommateur :[Browsable(true)] public string Title { get => lblTitle.Text; set => lblTitle.Text = value; }
<Browsable(True)> Public Property Title() As String Get Return lblTitle.Text End Get Set(value As String) lblTitle.Text = value End Set End Property
Revenez au
ClearableTextBox
concepteur et double-cliquez sur lebtnClear
contrôle pour générer un gestionnaire pour l’événementClick
. Ajoutez le code suivant pour le gestionnaire, qui efface latxtValue
zone de texte :private void btnClear_Click(object sender, EventArgs e) => Text = "";
Private Sub btnClear_Click(sender As Object, e As EventArgs) txtValue.Text = "" End Sub
Enfin, générez le projet en cliquant avec le bouton droit sur le projet dans la fenêtre Explorateur de solutions, puis en sélectionnant Générer. Il ne doit y avoir aucune erreur et une fois la build terminée, le
ClearableTextBox
contrôle apparaît dans la boîte à outils à utiliser.
L’étape suivante consiste à utiliser le contrôle dans un form.
Exemple d’application
Si vous avez créé un projet dans la dernière section, vous avez un formulaire Form vide nommé Form1, sinon, créez un nouveau form.
Dans la fenêtre Explorateur de solutions, double-cliquez sur le form concepteur pour ouvrir le concepteur. L’aire formde conception doit être sélectionnée.
Définissez la formpropriété
Size
sur432, 315
.Ouvrez la fenêtre Boîte à outils , puis double-cliquez sur le contrôle ClearableTextBox . Ce contrôle doit être répertorié sous une section nommée après votre projet.
Là encore, double-cliquez sur le contrôle ClearableTextBox pour générer un deuxième contrôle.
Revenez au concepteur et séparez les contrôles pour pouvoir les voir.
Sélectionnez un contrôle et définissez les propriétés suivantes :
Propriété Valeur Nom ctlFirstName
Emplacement 12, 12
Taille 191, 53
Titre First Name
Sélectionnez l’autre contrôle et définissez les propriétés suivantes :
Propriété Valeur Nom ctlLastName
Emplacement 12, 71
Taille 191, 53
Titre Last Name
De retour dans la fenêtre Boîte à outils , ajoutez un label contrôle au formcontrôle et définissez les propriétés suivantes :
Propriété Valeur Nom lblFullName
Emplacement 12, 252
Ensuite, vous devez générer les gestionnaires d’événements pour les deux contrôles utilisateur. Dans le concepteur, double-cliquez sur le
ctlFirstName
contrôle. Cette action génère le gestionnaire d’événements de l’événementTextChanged
et ouvre l’éditeur de code.Revenez au concepteur et double-cliquez sur le
ctlLastName
contrôle pour générer le deuxième gestionnaire d’événements.Revenez au concepteur et double-cliquez sur la formbarre de titre. Cette action génère un gestionnaire d’événements pour l’événement
Load
.Dans l’éditeur de code, ajoutez une méthode nommée
UpdateNameLabel
. Cette méthode combine les deux noms pour créer un message et affecte le message aulblFullName
contrôle.private void UpdateNameLabel() { if (string.IsNullOrWhiteSpace(ctlFirstName.Text) || string.IsNullOrWhiteSpace(ctlLastName.Text)) lblFullName.Text = "Please fill out both the first name and the last name."; else lblFullName.Text = $"Hello {ctlFirstName.Text} {ctlLastName.Text}, I hope you're having a good day."; }
Private Sub UpdateNameLabel() If String.IsNullOrWhiteSpace(ctlFirstName.Text) Or String.IsNullOrWhiteSpace(ctlLastName.Text) Then lblFullName.Text = "Please fill out both the first name and the last name." Else lblFullName.Text = $"Hello {ctlFirstName.Text} {ctlLastName.Text}, I hope you're having a good day." End If End Sub
Pour les deux
TextChanged
gestionnaires d’événements, appelez laUpdateNameLabel
méthode :private void ctlFirstName_TextChanged(object sender, EventArgs e) => UpdateNameLabel(); private void ctlLastName_TextChanged(object sender, EventArgs e) => UpdateNameLabel();
Private Sub ctlFirstName_TextChanged(sender As Object, e As EventArgs) Handles ctlFirstName.TextChanged UpdateNameLabel() End Sub Private Sub ctlLastName_TextChanged(sender As Object, e As EventArgs) Handles ctlLastName.TextChanged UpdateNameLabel() End Sub
Enfin, appelez la
UpdateNameLabel
méthode à partir de l’événement form'sLoad
:private void Form1_Load(object sender, EventArgs e) => UpdateNameLabel();
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load UpdateNameLabel() End Sub
Exécutez le projet et entrez un prénom et un nom :
Essayez d’appuyer sur la ↻
button touche pour réinitialiser l’une des zones de texte.
.NET Desktop feedback