Come creare un controllo utente (Windows Forms .NET)

  • Articolo

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.

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

    Fare clic con il pulsante destro del mouse su Esplora soluzioni di Visual Studio per aggiungere un controllo utente a un progetto di Windows Form

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

    Finestra di dialogo Aggiungi elemento in Visual Studio per Windows Form

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

Finestra di progettazione del controllo utente in Visual Studio per Windows Form

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:

    Visual Studio con Windows Form, che mostra il controllo utente appena progettato.

  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. Per altre informazioni sugli attributi, vedere Cenni preliminari sugli attributi (C#) o attributi (Visual Basic).

      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:

Un'app di Windows Formcon due caselle di testo create dai controlli utente e un'etichetta.

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