Partager via


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 formulaire. 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 bouton, 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 Formdans Visual Studio, utilisez les modèles Visual Studio pour créer un contrôle utilisateur :

  1. 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) .

    Cliquez avec le bouton droit sur l’Explorateur de solutions Visual Studio pour ajouter un contrôle utilisateur à un projet Windows Form

  2. Définissez le nom du contrôle sur ClearableTextBox, puis appuyez sur Ajouter.

    Boîte de dialogue Ajouter un élément dans Visual Studio pour Windows Form

Une fois le contrôle utilisateur créé, Visual Studio ouvre le concepteur :

Concepteur de contrôles utilisateur dans Visual Studio pour Windows Form

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 formulaire. Procédez comme suit pour ajouter et configurer le contrôle utilisateur et ses contrôles constituants :

  1. 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
  2. Ajoutez un Label contrôle. Définissez les propriétés suivantes :

    Property Valeur
    Nom lblTitle
    Emplacement 3, 5
  3. Ajoutez un TextBox contrôle. Définissez les propriétés suivantes :

    Property Valeur
    Nom txtValue
    Ancre Top, Left, Right
    Emplacement 3, 23
    Taille 148, 23
  4. Ajoutez un Button contrôle. Définissez les propriétés suivantes :

    Property Valeur
    Nom btnClear
    Ancre Top, Right
    Emplacement 157, 23
    Taille 31, 23
    Détails

    Le contrôle doit ressembler à l’image suivante :

    Visual Studio avec Windows Form, montrant le contrôle utilisateur qui vient d’être conçu.

  5. Appuyez sur F7 pour ouvrir l’éditeur de code de la ClearableTextBox classe.

  6. Apportez les modifications de code suivantes :

    1. En haut du fichier de code, importez l’espace System.ComponentModel de noms.

    2. 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
      
    3. 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’objet Browsable 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.

    4. Ajoutez une propriété de chaîne nommée Text, qui transfère la TextBox.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
      
    5. Ajoutez une propriété de chaîne nommée Title, qui transfère la Label.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
      
  7. Revenez au ClearableTextBox concepteur et double-cliquez sur le btnClear contrôle pour générer un gestionnaire pour l’événement Click . Ajoutez le code suivant pour le gestionnaire, qui efface la txtValue 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
    
  8. 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 formulaire.

Exemple d’application

Si vous avez créé un projet dans la dernière section, vous avez un champ vide Form nommé Form1, sinon, créez un formulaire.

  1. Dans la fenêtre Explorateur de solutions, double-cliquez sur le formulaire pour ouvrir le concepteur. L’aire de conception du formulaire doit être sélectionnée.

  2. Définissez la propriété du Size formulaire sur 432, 315.

  3. 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.

  4. Là encore, double-cliquez sur le contrôle ClearableTextBox pour générer un deuxième contrôle.

  5. Revenez au concepteur et séparez les contrôles pour pouvoir les voir.

  6. 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
  7. 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
  8. Dans la fenêtre Boîte à outils , ajoutez un contrôle d’étiquette au formulaire et définissez les propriétés suivantes :

    Propriété Valeur
    Nom lblFullName
    Emplacement 12, 252
  9. 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énement TextChanged et ouvre l’éditeur de code.

  10. Revenez au concepteur et double-cliquez sur le ctlLastName contrôle pour générer le deuxième gestionnaire d’événements.

  11. Revenez au concepteur et double-cliquez sur la barre de titre du formulaire. Cette action génère un gestionnaire d’événements pour l’événement Load .

  12. 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 au lblFullName 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
    
  13. Pour les deux TextChanged gestionnaires d’événements, appelez la UpdateNameLabel 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
    
  14. Enfin, appelez la UpdateNameLabel méthode à partir de l’événement du Load formulaire :

    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 :

Application Windows Formavec deux zones de texte créées à partir des contrôles utilisateur et une étiquette.

Essayez d’appuyer sur le bouton pour réinitialiser l’une des zones de texte.