Cara membuat kontrol pengguna

Artikel ini mengajarkan cara menambahkan kontrol pengguna ke proyek Anda lalu menambahkan kontrol pengguna tersebut ke formulir. Anda akan membuat kontrol pengguna yang dapat digunakan kembali yang menarik secara visual dan fungsional. Kontrol baru mengelompokkan TextBox kontrol dengan Button kontrol. Saat pengguna memilih tombol , teks dalam kotak teks dikosongkan. Untuk informasi selengkapnya tentang kontrol pengguna, lihat Gambaran umum kontrol pengguna.

Memahami konsumen yang mengontrol pengguna

Sepanjang artikel ini, istilah konsumen mengacu pada kode apa pun yang menggunakan kontrol pengguna Anda. Ini termasuk:

• Formulir yang berisi kontrol pengguna Anda.
• Kontrol lain yang menjadi host untuk kontrol pengguna Anda.
• Aplikasi yang mereferensikan pustaka kontrol pengguna Anda.

Saat membuat kontrol pengguna, Anda membangun komponen yang dapat digunakan kembali. Konsumen adalah siapa pun yang menggunakan komponen tersebut dengan menempatkannya di formulir, mengatur propertinya, atau menanggapi peristiwanya. Konsumen tidak perlu tahu tentang kontrol internal (seperti TextBox dan Button) yang membentuk kontrol pengguna Anda—mereka hanya berinteraksi dengan properti dan peristiwa yang Anda pilih untuk diekspos.

Pola kode penting untuk kontrol pengguna

Sebelum menambahkan implementasi terperinci, sangat berguna untuk memahami pola kode minimum yang layak untuk kontrol pengguna. Pada intinya, kontrol pengguna membutuhkan:

• Penerusan peristiwa - Meneruskan peristiwa dari kontrol internal ke konsumen.
• Eksposur properti - Izinkan konsumen mengakses properti kontrol internal.
• Perilaku logis - Menangani interaksi antara kontrol internal.

Kode berikut menunjukkan pola-pola ini. Anda tidak memerlukan semua kode ini untuk kontrol pengguna dasar, tetapi pola ini membantu menciptakan komponen profesional yang dapat digunakan kembali yang terintegrasi dengan baik dengan aplikasi desainer dan konsumen.

Menambahkan kontrol pengguna baru

Setelah membuka proyek Formulir Windows Anda di Visual Studio, gunakan templat Visual Studio untuk membuat kontrol pengguna:

1. Di Visual Studio, temukan jendela Penjelajah Solusi . Klik kanan pada proyek dan pilih Tambahkan>Kontrol Pengguna (Formulir Windows).

   

2. Atur Nama kontrol ke ClearableTextBox, dan tekan Tambahkan.

   

Setelah kontrol pengguna dibuat, Visual Studio membuka perancang:

Mendesain kotak teks yang dapat dihapus

Kontrol pengguna terdiri dari kontrol konstituen , yang merupakan kontrol yang Anda buat pada permukaan desain, seperti cara Anda merancang formulir. Ikuti langkah-langkah ini untuk menambahkan dan mengonfigurasi kontrol pengguna dan kontrol konstituennya:

1. Dengan perancang terbuka, permukaan desain kontrol pengguna harus menjadi objek yang dipilih. Jika tidak, klik permukaan desain untuk memilihnya. Atur properti berikut ini di jendela Properti :

   Harta benda	Nilai
   Ukuran Minimum	84, 53
   Ukuran	191, 53

2. Label Tambahkan kontrol. Atur properti berikut:

   Harta benda	Nilai
   Nama	lblTitle
   Lokasi	3, 5

3. TextBox Tambahkan kontrol. Atur properti berikut:

   Harta benda	Nilai
   Nama	txtValue
   Jangkar	Top, Left, Right
   Lokasi	3, 23
   Ukuran	148, 23

4. Button Tambahkan kontrol. Atur properti berikut:

   Harta benda	Nilai
   Nama	btnClear
   Jangkar	Top, Right
   Lokasi	157, 23
   Ukuran	31, 23
   Teks	↻

   Kontrol akan terlihat seperti gambar berikut:

   

5. Tekan F7 untuk membuka editor kode untuk ClearableTextBox kelas .

6. Buat perubahan kode berikut:

   1. Di bagian atas file kode, impor System.ComponentModel namespace.

   2. Tambahkan atribut DefaultEvent ke kelas. Atribut ini mengatur peristiwa mana yang dihasilkan ketika konsumen (formulir atau aplikasi menggunakan kontrol ini) mengklik dua kali kontrol di perancang. Untuk informasi selengkapnya tentang atribut, lihat Ringkasan Atribut (C#) atau Atribut (Visual Basic).

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

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

   3. Tambahkan penanganan aktivitas yang meneruskan TextBox.TextChanged peristiwa ke konsumen kontrol pengguna Anda:

      [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
      

      Perhatikan bahwa peristiwa tersebut memiliki atribut yang Browsable dinyatakan di atasnya. Browsable Ketika diterapkan ke peristiwa atau properti, item mengontrol apakah item terlihat di jendela Properti saat kontrol dipilih di perancang atau tidak. Dalam hal ini, true diteruskan sebagai parameter ke atribut yang menunjukkan bahwa peristiwa harus terlihat.

   4. Tambahkan properti bertipe string dengan nama Text, yang mengekspos properti TextBox.Text kepada konsumen kontrol pengguna Anda.

      [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. Tambahkan properti bertipe string dengan nama Title, yang mengekspos properti Label.Text kepada konsumen kontrol pengguna Anda.

      [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. Beralih kembali ke perancang ClearableTextBox dan klik btnClear dua kali kontrol untuk menghasilkan handler untuk peristiwa tersebut Click . Tambahkan kode berikut untuk handler, yang menghapus kotak txtValue teks:

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

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

8. Terakhir, buat proyek dengan mengklik kanan proyek di jendela Penjelajah Solusi, dan pilih Build. Seharusnya tidak ada kesalahan, dan setelah build selesai, ClearableTextBox kontrol muncul di kotak alat untuk digunakan.

Langkah selanjutnya adalah menggunakan kontrol dalam formulir.

Aplikasi sampel

Jika Anda membuat proyek baru di bagian terakhir, Anda memiliki Form kosong bernama Form1, jika tidak, buat formulir baru.

1. Di jendela Penjelajah Solusi , klik dua kali formulir untuk membuka perancang. Permukaan desain formulir harus dipilih.

2. Atur properti Size pada formulir ini ke 432, 315.

3. Buka jendela Kotak Alat , dan klik dua kali kontrol ClearableTextBox . Kontrol ini harus tercantum di bawah bagian bernama sesuai proyek Anda.

4. Sekali lagi, klik dua kali pada kontrol ClearableTextBox untuk menghasilkan kontrol kedua.

5. Pindah kembali ke perancang dan pisahkan kontrol sehingga Anda dapat melihat keduanya.

6. Pilih satu kontrol dan atur properti berikut:

   Harta benda	Nilai
   Nama	ctlFirstName
   Lokasi	12, 12
   Ukuran	191, 53
   Judul	First Name

7. Pilih kontrol lain dan atur properti berikut ini:

   Harta benda	Nilai
   Nama	ctlLastName
   Lokasi	12, 71
   Ukuran	191, 53
   Judul	Last Name

8. Kembali ke jendela Toolbox, tambahkan kontrol label ke formulir, dan atur properti berikut:

   Harta benda	Nilai
   Nama	lblFullName
   Lokasi	12, 252

9. Selanjutnya, Anda perlu membuat penanganan aktivitas untuk dua kontrol pengguna. Di perancang, klik dua kali pada ctlFirstName kontrol. Tindakan ini menghasilkan penanganan aktivitas untuk TextChanged peristiwa, dan membuka editor kode.

10. Tukar kembali ke perancang dan klik ctlLastName dua kali kontrol untuk menghasilkan penanganan aktivitas kedua.

11. Beralih kembali ke Perancang dan klik dua kali pada bilah judul formulir. Tindakan ini menghasilkan penanganan aktivitas untuk peristiwa tersebut Load .

12. Di editor kode, tambahkan metode bernama UpdateNameLabel. Metode ini menggabungkan kedua nama untuk membuat pesan, dan menetapkan pesan ke lblFullName kontrol.

    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. Untuk kedua TextChanged penanganan aktivitas, panggil UpdateNameLabel metode :

    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. Terakhir, panggil metode UpdateNameLabel dari event Load formulir.

    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
    

Jalankan proyek dan masukkan nama depan dan belakang:

Coba tekan tombol ↻ untuk mereset salah satu kotak teks.