Dela via

Skapa en användarkontroll

I den här artikeln lär du dig hur du lägger till en användarkontroll i projektet och sedan lägger till användarkontrollen i ett formulär. Du skapar en återanvändbar användarkontroll som är både visuellt tilltalande och funktionell. Den nya styrenheten grupperar en TextBox-styrenhet med en Button-styrenhet. När användaren väljer knappen avmarkeras texten i textrutan. Mer information om användarkontroller finns i Översikt över användarkontroll.

Förståelse för användarkontroll hos konsumenter

I den här artikeln refererar termen konsument till all kod som använder din användarkontroll. Detta omfattar:

  • Formulär som innehåller din användarkontroll.
  • Andra kontroller som är värdar för din användarkontroll.
  • Program som refererar till användarkontrollbiblioteket.

När du skapar en användarkontroll skapar du en återanvändbar komponent. Konsumenten är den som använder komponenten genom att placera den i ett formulär, ange dess egenskaper eller svara på dess händelser. Konsumenten behöver inte känna till de interna kontroller (som TextBox och Button) som utgör din användarkontroll – de interagerar bara med de egenskaper och händelser som du väljer att exponera.

Viktigt kodmönster för användarkontroller

Innan du lägger till den detaljerade implementeringen är det bra att förstå det minsta fungerande kodmönstret för en användarkontroll. I grunden behöver en användarkontroll:

  • Vidarebefordran av händelser – Skicka händelser från interna kontroller till konsumenten.
  • Egenskapsexponering – Ge användaren åtkomst till egenskaper för intern kontroll.
  • Logiskt beteende – Hantera interaktioner mellan interna kontroller.

Följande kod visar dessa mönster. Du behöver inte all den här koden för en grundläggande användarkontroll, men de här mönstren hjälper dig att skapa en professionell, återanvändbar komponent som integreras väl med designer- och konsumentprogrammen.

Lägga till en ny användarkontroll

När du har öppnat ditt Windows Forms-projekt i Visual Studio använder du Visual Studio-mallarna för att skapa en användarkontroll:

  1. Leta reda på Solution Explorer-fönstret i Visual Studio. Högerklicka på projektet och välj Lägg till>användarkontroll (Windows-formulär).

    Högerklicka på Visual Studio Solution Explorer för att lägga till en användarkontroll i ett Windows Forms-projekt

  2. Ange kontrollens namn till ClearableTextBoxoch tryck på Lägg till.

    Lägg till objekt dialogrutan i Visual Studio för Windows Forms

När användarkontrollen har skapats öppnar Visual Studio designern:

Användarkontrolldesignern i Visual Studio för Windows Forms

Utforma den tydliga textrutan

Användarkontrollen består av ingående kontroller, som är de kontroller som du skapar på designytan, precis som när du utformar ett formulär. Följ de här stegen för att lägga till och konfigurera användarkontrollen och dess ingående kontroller:

  1. När designern är öppen ska designytan för användarkontroll vara det markerade objektet. Om den inte är det klickar du på designytan för att välja den. Ange följande egenskaper i fönstret Egenskaper:

    Fastighet Värde
    MinstaStorlek 84, 53
    Storlek 191, 53

  2. Lägg till en Label kontroll. Ange följande egenskaper:

    Fastighet Värde
    Namn lblTitle
    Plats 3, 5

  3. Lägg till en TextBox kontroll. Ange följande egenskaper:

    Fastighet Värde
    Namn txtValue
    Fästpunkt Top, Left, Right
    Plats 3, 23
    Storlek 148, 23

  4. Lägg till en Button kontroll. Ange följande egenskaper:

    Fastighet Värde
    Namn btnClear
    Fästpunkt Top, Right
    Plats 157, 23
    Storlek 31, 23
    SMS ↻

    Kontrollen bör se ut så här:

    Visual Studio med Windows Forms, som visar den användarkontroll som precis har utformats.

  5. Tryck på F7 för att öppna kodredigeraren för klassen ClearableTextBox.

  6. Gör följande kodändringar:

    1. Längst upp i kodfilen importerar du System.ComponentModel namnområdet.

    2. Lägg till attributet DefaultEvent i klassen. Det här attributet anger vilken händelse som genereras när konsumenten (formuläret eller programmet som använder den här kontrollen) dubbelklickar på kontrollen i designern. Mer information om attribut finns i Attribut (C#) eller översikt över attribut (Visual Basic).

      using System.ComponentModel;

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

      Imports System.ComponentModel

<DefaultEvent("TextChanged")>
Public Class ClearableTextBox

    3. Lägg till en händelsehanterare som vidarebefordrar TextBox.TextChanged händelsen till användare av din användarkontroll:

      [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

      Observera att händelsen har Browsable-attributet deklarerat på den. När Browsable tillämpas på en händelse eller egenskap styr den om objektet visas i fönstret Egenskaper när kontrollen väljs i designern. I det här fallet skickas true som en parameter till attributet som anger att händelsen ska vara synlig.

    4. Lägg till en strängegenskap med namnet Text, som exponerar TextBox.Text egenskapen för användare av användarkontrollen:

      [Browsable(true)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
public new string Text
{
    get => txtValue.Text;
    set => txtValue.Text = value;
}

      <Browsable(True)>
<DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)>
Public Shadows Property Text() As String
    Get
        Return txtValue.Text
    End Get
    Set(value As String)
        txtValue.Text = value
    End Set
End Property

    5. Lägg till en strängegenskap med namnet Title, som exponerar Label.Text egenskapen för användare av användarkontrollen:

      [Browsable(true)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
public string Title
{
    get => lblTitle.Text;
    set => lblTitle.Text = value;
}

      <Browsable(True)>
<DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)>
Public Property Title() As String
    Get
        Return lblTitle.Text
    End Get
    Set(value As String)
        lblTitle.Text = value
    End Set
End Property

  7. Växla tillbaka till ClearableTextBox designern och dubbelklicka på btnClear-kontrollen för att generera en hanterare för händelsen Click. Lägg till följande kod för hanteraren, vilket rensar textrutan txtValue:

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

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

  8. Skapa projektet genom att högerklicka på projektet i fönstret Solution Explorer och välja Skapa. Det bör inte finnas några fel, och när bygget är klart visas ClearableTextBox-kontrollen i verktygslådan för användning.

Nästa steg är att använda kontrollen i ett formulär.

Exempelprogram

Om du skapade ett nytt projekt i det sista avsnittet har du en tom Form med namnet Form1, annars skapar du ett nytt formulär.

  1. I fönstret Solution Explorer dubbelklickar du på formuläret för att öppna designern. Formulärets designyta bör väljas.

  2. Ange formulärets egenskap Size till 432, 315.

  3. Öppna fönstret Toolbox och dubbelklicka på kontrollen ClearableTextBox. Den här kontrollen bör visas under ett avsnitt med namnet efter projektet.

  4. Klicka igen på ClearableTextBox-kontrollen för att generera en andra kontroll.

  5. Gå tillbaka till designern och separera kontrollerna så att du kan se båda.

  6. Välj en kontroll och ange följande egenskaper:

    Fastighet Värde
    Namn ctlFirstName
    Plats 12, 12
    Storlek 191, 53
    Titel First Name

  7. Välj den andra kontrollen och ange följande egenskaper:

    Fastighet Värde
    Namn ctlLastName
    Plats 12, 71
    Storlek 191, 53
    Titel Last Name

  8. I fönstret Toolbox lägger du till en etikettkontroll i formuläret och anger följande egenskaper:

    Fastighet Värde
    Namn lblFullName
    Plats 12, 252

  9. Därefter måste du generera händelsehanterarna för de två användarkontrollerna. Dubbelklicka på kontrollen ctlFirstName i designern. Den här åtgärden genererar händelsehanteraren för händelsen TextChanged och öppnar kodredigeraren.

  10. Växla tillbaka till designern och dubbelklicka på kontrollen ctlLastName för att generera den andra händelsehanteraren.

  11. Växla tillbaka till designern och dubbelklicka på formulärets titelrad. Den här åtgärden genererar en händelsehanterare för händelsen Load.

  12. I kodredigeraren lägger du till en metod med namnet UpdateNameLabel. Den här metoden kombinerar båda namnen för att skapa ett meddelande och tilldelar meddelandet till lblFullName-kontrollen.

    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. Anropa metoden TextChanged för båda dessa UpdateNameLabel-händelsehanterare:

    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. Anropa slutligen metoden UpdateNameLabel från formulärets Load händelse:

    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

Kör projektet och ange ett för- och efternamn:

En Windows Forms-app med två textrutor som skapats från användarkontroller och en etikett.

Försök att trycka på knappen ↻ för att återställa en av textrutorna.