Come creare un controllo utente (Windows Forms .NET)

Questo articolo illustra come aggiungere un controllo utente al progetto e quindi aggiungere tale controllo utente a un modulo. Si creerà un controllo utente riutilizzabile che sia visivamente accattivante che funzionale. Il nuovo controllo raggruppa un TextBox controllo con un Button controllo . Quando l'utente seleziona il pulsante, il testo nella casella di testo viene cancellato. Per altre informazioni sui controlli utente, vedere Panoramica del controllo utente.

Importante

La documentazione di Desktop Guide per .NET 7 e .NET 6 è in fase di costruzione.

Aggiungere un controllo utente a un progetto

Dopo aver aperto il progetto di Windows Formin Visual Studio, usare i modelli di Visual Studio per creare un controllo utente:

1. In Visual Studio trovare la finestra Esplora progetti . Fare clic con il pulsante destro del mouse sul progetto e scegliere Aggiungi>controllo utente (Windows Forms).

   

2. Impostare Il nome del controllo su CancellabileTextBox e premere Aggiungi.

   

Dopo aver creato il controllo utente, Visual Studio apre la finestra di progettazione:

Progettare la casella di testo cancellabile

Il controllo utente è costituito da controlli costitutivi, ovvero i controlli creati nell'area di progettazione, proprio come si progetta una maschera. Seguire questa procedura per aggiungere e configurare il controllo utente e i relativi controlli costitutivi:

1. Con la finestra di progettazione aperta, l'area di progettazione del controllo utente deve essere l'oggetto selezionato. In caso contrario, fare clic sull'area di progettazione per selezionarla. Impostare le proprietà seguenti nella finestra Proprietà :

   Proprietà	valore
   MinimumSize	84, 53
   Dimensione	191, 53

2. Aggiungere un Label controllo . Impostare le proprietà seguenti:

   Proprietà	valore
   Nome	lblTitle
   Ufficio	3, 5

3. Aggiungere un TextBox controllo . Impostare le proprietà seguenti:

   Proprietà	valore
   Nome	txtValue
   Ancora	Top, Left, Right
   Ufficio	3, 23
   Dimensione	148, 23

4. Aggiungere un Button controllo . Impostare le proprietà seguenti:

   Proprietà	valore
   Nome	btnClear
   Ancora	Top, Right
   Ufficio	157, 23
   Dimensione	31, 23
   Testo	↻

   Il controllo dovrebbe essere simile all'immagine seguente:

   

5. Premere F7 per aprire l'editor di codice per la ClearableTextBox classe .

6. Apportare le modifiche di codice seguenti:

   1. Nella parte superiore del file di codice importare lo System.ComponentModel spazio dei nomi .

   2. Aggiungere l'attributo DefaultEvent alla classe. Questo attributo imposta l'evento generato dal consumer quando il controllo viene fatto doppio clic nella finestra di progettazione. Consumer che dichiara l'oggetto e usa questo controllo.

      using System.ComponentModel;
      
      namespace UserControlProject
      {
          [DefaultEvent(nameof(TextChanged))]
          public partial class ClearableTextBox : UserControl
      

      Imports System.ComponentModel
      
      <DefaultEvent("TextChanged")>
      Public Class ClearableTextBox
      

   3. Aggiungere un gestore eventi che inoltra l'evento TextBox.TextChanged al consumer:

      [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
      

      Si noti che l'evento ha l'attributo Browsable dichiarato. Quando l'oggetto Browsable viene applicato a un evento o a una proprietà, controlla se l'elemento è visibile nella finestra Proprietà quando il controllo viene selezionato nella finestra di progettazione. In questo caso, true viene passato come parametro all'attributo che indica che l'evento deve essere visibile.

   4. Aggiungere una proprietà stringa denominata Text, che inoltra la TextBox.Text proprietà al consumer:

      [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. Aggiungere una proprietà stringa denominata Title, che inoltra la Label.Text proprietà al consumer:

      [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. Tornare alla ClearableTextBox finestra di progettazione e fare doppio clic sul btnClear controllo per generare un gestore per l'evento Click . Aggiungere il codice seguente per il gestore, che cancella la txtValue casella di testo:

   private void btnClear_Click(object sender, EventArgs e) =>
       Text = "";
   

   Private Sub btnClear_Click(sender As Object, e As EventArgs)
       txtValue.Text = ""
   End Sub
   

8. Compilare infine il progetto facendo clic con il pulsante destro del mouse sul progetto nella finestra Esplora soluzioni e scegliendo Compila. Non dovrebbero essere presenti errori e, al termine della compilazione, il ClearableTextBox controllo viene visualizzato nella casella degli strumenti per l'uso.

Il passaggio successivo consiste nell'usare il controllo in un modulo.

Applicazione di esempio

Se è stato creato un nuovo progetto nell'ultima sezione, è presente un campo vuoto Form denominato Form1. In caso contrario, creare un nuovo modulo.

1. Nella finestra Esplora soluzioni fare doppio clic sul modulo per aprire la finestra di progettazione. È necessario selezionare l'area di progettazione del modulo.

2. Impostare la proprietà della Size maschera su 432, 315.

3. Aprire la finestra Casella degli strumenti e fare doppio clic sul controllo CancellabileTextBox . Questo controllo deve essere elencato in una sezione denominata dopo il progetto.

4. Anche in questo caso, fare doppio clic sul controllo CancellabileTextBox per generare un secondo controllo.

5. Tornare alla finestra di progettazione e separare i controlli in modo che sia possibile visualizzarli entrambi.

6. Selezionare un controllo e impostare le proprietà seguenti:

   Proprietà	valore
   Nome	ctlFirstName
   Ufficio	12, 12
   Dimensione	191, 53
   Title	First Name

7. Selezionare l'altro controllo e impostare le proprietà seguenti:

   Proprietà	valore
   Nome	ctlLastName
   Ufficio	12, 71
   Dimensione	191, 53
   Title	Last Name

8. Tornare alla finestra Casella degli strumenti , aggiungere un controllo etichetta al modulo e impostare le proprietà seguenti:

   Proprietà	valore
   Nome	lblFullName
   Ufficio	12, 252

9. Successivamente, è necessario generare i gestori eventi per i due controlli utente. Nella finestra di progettazione fare doppio clic sul ctlFirstName controllo . Questa azione genera il gestore eventi per l'evento TextChanged e apre l'editor di codice.

10. Tornare alla finestra di progettazione e fare doppio clic sul ctlLastName controllo per generare il secondo gestore eventi.

11. Tornare alla finestra di progettazione e fare doppio clic sulla barra del titolo del modulo. Questa azione genera un gestore eventi per l'evento Load .

12. Nell'editor di codice aggiungere un metodo denominato UpdateNameLabel. Questo metodo combina entrambi i nomi per creare un messaggio e assegna il messaggio al lblFullName controllo .

    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. Per entrambi TextChanged i gestori eventi, chiamare il UpdateNameLabel metodo :

    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. Infine, chiamare il UpdateNameLabel metodo dall'evento del Load modulo:

    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
    

Eseguire il progetto e immettere un nome e un cognome:

Provare a premere il ↻ pulsante per reimpostare una delle caselle di testo.