Jak utworzyć kontrolkę użytkownika (platforma .NET systemu Windows Form)

W tym artykule pokazano, jak dodać kontrolkę użytkownika do projektu, a następnie dodać tę kontrolkę użytkownika do formularza. Utworzysz kontrolkę użytkownika wielokrotnego użytku, która jest wizualnie atrakcyjna i funkcjonalna. Nowa kontrolka grupuje kontrolkę TextBox z kontrolką Button . Gdy użytkownik wybierze przycisk, tekst w polu tekstowym zostanie wyczyszczone. Aby uzyskać więcej informacji na temat kontrolek użytkowników, zobacz Omówienie kontrolki użytkownika.

Ważne

Dokumentacja przewodnika dla komputerów dla platform .NET 7 i .NET 6 jest w budowie.

Dodawanie kontrolki użytkownika do projektu

Po otwarciu projektu systemu Windows Formw programie Visual Studio użyj szablonów programu Visual Studio, aby utworzyć kontrolkę użytkownika:

1. W programie Visual Studio znajdź okno Eksplorator projektów. Kliknij prawym przyciskiem myszy projekt i wybierz polecenie Dodaj>kontrolkę użytkownika (Forms).

   

2. Ustaw wartość Nazwa kontrolki na Wartość WyczyśćTextBox, a następnie naciśnij przycisk Dodaj.

   

Po utworzeniu kontrolki użytkownika program Visual Studio otworzy projektanta:

Projektowanie czytelnego pola tekstowego

Kontrolka użytkownika składa się z kontrolek składowych, które są kontrolkami tworzonymi na powierzchni projektowej, podobnie jak w przypadku projektowania formularza. Wykonaj następujące kroki, aby dodać i skonfigurować kontrolkę użytkownika i jego kontrolki składowe:

1. Po otwarciu projektanta powierzchnia projektowa kontrolki użytkownika powinna być wybranym obiektem. Jeśli tak nie jest, kliknij powierzchnię projektową, aby ją wybrać. Ustaw następujące właściwości w oknie Właściwości :

   Właściwości	Wartość
   Minimumsize	84, 53
   Rozmiar	191, 53

2. Dodaj kontrolkę Label . Określ następujące właściwości:

   Właściwości	Wartość
   Nazwisko	lblTitle
   Lokalizacja	3, 5

3. Dodaj kontrolkę TextBox . Określ następujące właściwości:

   Właściwości	Wartość
   Nazwisko	txtValue
   Kotwica	Top, Left, Right
   Lokalizacja	3, 23
   Rozmiar	148, 23

4. Dodaj kontrolkę Button . Określ następujące właściwości:

   Właściwości	Wartość
   Nazwisko	btnClear
   Kotwica	Top, Right
   Lokalizacja	157, 23
   Rozmiar	31, 23
   Text	↻

   Kontrolka powinna wyglądać podobnie do poniższej ilustracji:

   

5. Naciśnij klawisz F7 , aby otworzyć edytor kodu dla ClearableTextBox klasy.

6. Wprowadź następujące zmiany kodu:

   1. W górnej części pliku kodu zaimportuj System.ComponentModel przestrzeń nazw.

   2. DefaultEvent Dodaj atrybut do klasy. Ten atrybut ustawia zdarzenie generowane przez odbiorcę po dwukrotnym kliknięciu kontrolki w projektancie. Użytkownik będący obiektem deklarujący i używający tej kontrolki.

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

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

   3. Dodaj procedurę obsługi zdarzeń, która przekazuje TextBox.TextChanged zdarzenie do odbiorcy:

      [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
      

      Zwróć uwagę, że zdarzenie ma zadeklarowany Browsable atrybut . Po zastosowaniu Browsable elementu do zdarzenia lub właściwości określa, czy element jest widoczny w oknie Właściwości po wybraniu kontrolki w projektancie. W tym przypadku true parametr jest przekazywany jako parametr do atrybutu wskazującego, że zdarzenie powinno być widoczne.

   4. Dodaj właściwość ciągu o nazwie Text, która przekazuje TextBox.Text właściwość do odbiorcy:

      [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. Dodaj właściwość ciągu o nazwie Title, która przekazuje Label.Text właściwość do odbiorcy:

      [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. Wróć do projektanta ClearableTextBox i kliknij dwukrotnie kontrolkę btnClear , aby wygenerować procedurę obsługi dla Click zdarzenia. Dodaj następujący kod dla programu obsługi, który czyści txtValue pole tekstowe:

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

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

8. Na koniec skompiluj projekt, klikając prawym przyciskiem myszy projekt w oknie Eksplorator rozwiązań i wybierając polecenie Kompiluj. Nie powinno występować żadne błędy, a po zakończeniu kompilacji kontrolka ClearableTextBox zostanie wyświetlona w przyborniku do użycia.

Następnym krokiem jest użycie kontrolki w formularzu.

Aplikacja przykładowa

Jeśli utworzono nowy projekt w ostatniej sekcji, masz pustą Form nazwę Form1, w przeciwnym razie utwórz nowy formularz.

1. W oknie Eksplorator rozwiązań kliknij dwukrotnie formularz, aby otworzyć projektanta. Należy wybrać powierzchnię projektową formularza.

2. Ustaw właściwość formularza Size na 432, 315.

3. Otwórz okno Przybornik i kliknij dwukrotnie kontrolkę Wyczyść.TextBox Ta kontrolka powinna być wyświetlana w sekcji o nazwie po projekcie.

4. Ponownie kliknij dwukrotnie kontrolkę WyczyśćTextBox , aby wygenerować drugą kontrolkę.

5. Wróć do projektanta i oddziel kontrolki, aby zobaczyć oba te kontrolki.

6. Wybierz jedną kontrolkę i ustaw następujące właściwości:

   Właściwości	Wartość
   Nazwisko	ctlFirstName
   Lokalizacja	12, 12
   Rozmiar	191, 53
   Tytuł	First Name

7. Wybierz drugą kontrolkę i ustaw następujące właściwości:

   Właściwości	Wartość
   Nazwisko	ctlLastName
   Lokalizacja	12, 71
   Rozmiar	191, 53
   Tytuł	Last Name

8. Wróć do okna Przybornik , dodaj kontrolkę etykiety do formularza i ustaw następujące właściwości:

   Właściwości	Wartość
   Nazwisko	lblFullName
   Lokalizacja	12, 252

9. Następnie należy wygenerować programy obsługi zdarzeń dla dwóch kontrolek użytkownika. W projektancie kliknij dwukrotnie kontrolkę ctlFirstName . Ta akcja generuje program obsługi zdarzeń dla TextChanged zdarzenia i otwiera edytor kodu.

10. Wróć do projektanta i kliknij dwukrotnie kontrolkę, aby wygenerować drugą procedurę ctlLastName obsługi zdarzeń.

11. Wróć do projektanta i kliknij dwukrotnie pasek tytułu formularza. Ta akcja generuje program obsługi zdarzeń dla Load zdarzenia.

12. W edytorze kodu dodaj metodę o nazwie UpdateNameLabel. Ta metoda łączy obie nazwy w celu utworzenia komunikatu i przypisuje komunikat do kontrolki 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. W przypadku obu TextChanged programów obsługi zdarzeń wywołaj metodę UpdateNameLabel :

    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. Na koniec wywołaj metodę UpdateNameLabel ze zdarzenia formularza Load :

    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
    

Uruchom projekt i wprowadź imię i nazwisko:

Spróbuj nacisnąć przycisk, ↻ aby zresetować jedno z pól tekstowych.