Delen via

Een gebruikersbeheer maken (Windows Forms .NET)

  • Artikel

In dit artikel leert u hoe u een gebruikersbesturingselement toevoegt aan uw project en vervolgens dat gebruikersbesturingselement toevoegt aan een formulier. U maakt een herbruikbaar gebruikersbeheer dat zowel visueel aantrekkelijk als functioneel is. Het nieuwe besturingselement groepeert een TextBox-regelaar met een Button-regelaar. Wanneer de gebruiker de knop selecteert, wordt de tekst in het tekstvak gewist. Zie Overzicht van gebruikersbeheervoor meer informatie over gebruikersbesturingselementen.

Een gebruikersbeheer toevoegen aan een project

Nadat u uw Windows Forms-project in Visual Studio hebt geopend, gebruikt u de Visual Studio-sjablonen om een gebruikersbeheer te maken:

  1. Zoek in Visual Studio het venster Projectverkenner. Klik met de rechtermuisknop op het project en kies >Gebruikersbesturingselement (Windows Forms) toevoegen.

    klik met de rechtermuisknop op Visual Studio Solution Explorer om een gebruikersbesturingselement toe te voegen aan een Windows Forms-project

  2. Stel de Naam van het besturingselement in op ClearableTextBoxen druk op Toevoegen.

    dialoogvenster Item toevoegen in Visual Studio voor Windows Forms

Nadat het gebruikersbeheer is gemaakt, opent Visual Studio de ontwerpfunctie:

De ontwerpfunctie voor gebruikersbeheer in Visual Studio voor Windows Forms

Het duidelijke tekstvak ontwerpen

Het gebruikerscontrole-element bestaat uit samenstellende controle-elementen, de controle-elementen die u maakt op het ontwerpoppervlak, net zoals u een formulier ontwerpt. Volg deze stappen om het gebruikersbesturingselement en de samenstellende besturingselementen toe te voegen en te configureren:

  1. Wanneer de ontwerpmodule is geopend, moet het ontwerpoppervlak van de gebruikerscontrole het geselecteerde object zijn. Als dat niet zo is, klikt u op het ontwerpoppervlak om het te selecteren. Stel de volgende eigenschappen in het venster Eigenschappen in:

    Eigendom Waarde
    Minimumgrootte 84, 53
    Grootte 191, 53

  2. Voeg een Label controle toe. Stel de volgende eigenschappen in:

    Eigendom Waarde
    Naam lblTitle
    Locatie 3, 5

  3. Voeg een TextBox controle toe. Stel de volgende eigenschappen in:

    Eigendom Waarde
    Naam txtValue
    Anker Top, Left, Right
    Locatie 3, 23
    Grootte 148, 23

  4. Voeg een Button controle toe. Stel de volgende eigenschappen in:

    Eigendom Waarde
    Naam btnClear
    Anker Top, Right
    Locatie 157, 23
    Grootte 31, 23
    Tekst ↻

    Het besturingselement moet eruitzien als in de volgende afbeelding:

    Visual Studio met Windows Forms, met daarin het gebruikersbeheer dat zojuist is ontworpen.

  5. Druk op F7- om de code-editor voor de ClearableTextBox-klasse te openen.

  6. Breng de volgende codewijzigingen aan:

    1. Importeer bovenaan het codebestand de System.ComponentModel naamruimte.

    2. Voeg het kenmerk DefaultEvent toe aan de klasse. Met dit kenmerk wordt ingesteld welk evenement wordt gegenereerd door de gebruiker wanneer op het besturingselement wordt gedubbelklikt in de ontwerpmodule. De consument is het object dat dit besturingselement declareert en gebruikt. Zie Attributes (C#) of Attributes overview (Visual Basic)voor meer informatie over kenmerken.

      using System.ComponentModel;

namespace UserControlProject
{
    [DefaultEvent(nameof(TextChanged))]
    public partial class ClearableTextBox : UserControl

      Imports System.ComponentModel

<DefaultEvent("TextChanged")>
Public Class ClearableTextBox

    3. Voeg een gebeurtenis-handler toe waarmee de TextBox.TextChanged gebeurtenis wordt doorgestuurd naar de consument:

      [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

      U ziet dat voor de gebeurtenis het kenmerk Browsable is gedeclareerd. Wanneer de Browsable wordt toegepast op een gebeurtenis of eigenschap, bepaalt deze of het item wel of niet zichtbaar is in het venster Eigenschappen wanneer het besturingselement is geselecteerd in de ontwerpfunctie. In dit geval wordt true als parameter doorgegeven aan het kenmerk dat aangeeft dat de gebeurtenis zichtbaar moet zijn.

    4. Voeg een tekenreekseigenschap toe met de naam Text, die de eigenschap TextBox.Text doorstuurt naar de consument:

      [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. Voeg een tekenreekseigenschap toe met de naam Title, die de eigenschap Label.Text doorstuurt naar de consument:

      [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. Ga terug naar de ClearableTextBox-ontwerper en dubbelklik op het besturingselement btnClear om een handler te genereren voor de gebeurtenis Click. Voeg de volgende code toe voor de handler, waarmee het tekstvak txtValue wordt gewist:

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

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

  8. Bouw ten slotte het project door met de rechtermuisknop op het project te klikken in het venster Solution Explorer en Buildte selecteren. Er mogen geen fouten optreden en nadat de build is voltooid, wordt het besturingselement ClearableTextBox weergegeven in de werkset voor gebruik.

In de volgende stap wordt het besturingselement in een formulier gebruikt.

Voorbeeldtoepassing

Als u in de laatste sectie een nieuw project hebt gemaakt, hebt u een lege Form met de naam Form1, anders maakt u een nieuw formulier.

  1. Dubbelklik in het venster Solution Explorer op het formulier om de ontwerpfunctie te openen. Het ontwerpoppervlak van het formulier moet worden geselecteerd.

  2. Stel de eigenschap Size van het formulier in op 432, 315.

  3. Open het Werksetvenster en dubbelklik op het besturingselement ClearableTextBox. Dit besturingselement moet worden weergegeven onder een sectie met de naam van uw project.

  4. Dubbelklik nogmaals op het besturingselement ClearableTextBox om een tweede besturingselement te genereren.

  5. Ga terug naar de ontwerpfunctie en scheid de besturingselementen, zodat u beide kunt zien.

  6. Selecteer één besturingselement en stel de volgende eigenschappen in:

    Eigendom Waarde
    Naam ctlFirstName
    Locatie 12, 12
    Grootte 191, 53
    Titel First Name

  7. Selecteer het andere besturingselement en stel de volgende eigenschappen in:

    Eigendom Waarde
    Naam ctlLastName
    Locatie 12, 71
    Grootte 191, 53
    Titel Last Name

  8. Terug in het venster Gereedschapskist, voeg een label toe aan het formulier en stel de volgende eigenschappen in:

    Eigendom Waarde
    Naam lblFullName
    Locatie 12, 252

  9. Vervolgens moet u de gebeurtenishandlers genereren voor de twee gebruikersbesturingselementen. Dubbelklik in de ontwerper op het controle-element ctlFirstName. Met deze actie wordt de gebeurtenis-handler voor de TextChanged gebeurtenis gegenereerd en wordt de code-editor geopend.

  10. Schakel terug naar de ontwerpweergave en dubbelklik op het besturingselement ctlLastName om de tweede eventhandler te genereren.

  11. Ga terug naar de ontwerpfunctie en dubbelklik op de titelbalk van het formulier. Met deze actie wordt een gebeurtenis-handler gegenereerd voor de Load gebeurtenis.

  12. Voeg in de code-editor een methode toe met de naam UpdateNameLabel. Deze methode combineert beide namen om een bericht te maken en wijst het bericht toe aan het besturingselement lblFullName.

    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. Roep voor beide TextChanged gebeurtenis-handlers de methode UpdateNameLabel aan:

    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. Roep ten slotte de UpdateNameLabel methode aan vanuit de Load gebeurtenis van het formulier:

    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

Voer het project uit en voer een voor- en achternaam in:

een Windows Forms-app met twee tekstvakken die zijn gemaakt op basis van gebruikersbesturingselementen en een label.

Druk op de knop ↻ om een van de tekstvakken opnieuw in te stellen.