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.

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ść
   Minimalny rozmiar	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 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. Aby uzyskać więcej informacji na temat atrybutów, zobacz Atrybuty (C#) lub Omówienie atrybutów (Visual Basic).

      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.