Dela via


Skapa en användarkontroll (Windows Forms .NET)

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.

Lägga till en användarkontroll i ett projekt

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å Project 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.

    Dialogruta för att lägga till objekt 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:

    Egenskap Värde
    MinstaStorlek 84, 53
    Storlek 191, 53
  2. Lägg till en Label kontroll. Ange följande egenskaper:

    Egenskap Värde
    Namn lblTitle
    Plats 3, 5
  3. Lägg till en TextBox kontroll. Ange följande egenskaper:

    Egenskap Värde
    Namn txtValue
    Ankare Top, Left, Right
    Plats 3, 23
    Storlek 148, 23
  4. Lägg till en Button kontroll. Ange följande egenskaper:

    Egenskap Värde
    Namn btnClear
    Ankare Top, Right
    Plats 157, 23
    Storlek 31, 23
    Text

    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 av konsumenten när kontrollen dubbelklickas i designern. Konsumenten är objektet som deklarerar och använder den här kontrollen. 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 den TextBox.TextChanged händelsen till konsumenten:

      [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 vidarebefordrar egenskapen TextBox.Text till konsumenten:

      [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. Lägg till en strängegenskap med namnet Title, som vidarebefordrar egenskapen Label.Text till konsumenten:

      [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. 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:

    Egenskap Värde
    Namn ctlFirstName
    Plats 12, 12
    Storlek 191, 53
    Titel First Name
  7. Välj den andra kontrollen och ange följande egenskaper:

    Egenskap 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:

    Egenskap 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 UpdateNameLabel för båda dessa TextChanged-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.