Kontrol Umum

Label, TextBox, Button, ComboBox, dan ListBox untuk membangun antarmuka.

Daftar isi

Lima kontrol pada topik ini, yaitu Label, TextBox, Button, ComboBox, dan ListBox, mencakup sebagian besar kebutuhan antarmuka aplikasi kecil. Setiap kontrol diperkenalkan melalui properti intinya, lalu kelima kontrol tersebut dirakit menjadi satu aplikasi buku catatan yang menerima masukan, mengelompokkannya, dan menampilkannya dalam daftar. Setelah membaca topik ini, pemilihan kontrol untuk sebuah form tidak lagi didasarkan pada tebakan, melainkan pada peran masing-masing kontrol.

Kontrol sebagai bahan bangunan antarmuka#

Kontrol adalah komponen visual yang menampilkan sesuatu atau menerima aksi pengguna, dan setiap kontrol pada Windows Forms mewarisi kelas Control. Warisan itu memberi setiap kontrol properti dasar yang sama, antara lain Location dan Size untuk penempatan, Text untuk teks yang melekat padanya, Enabled untuk menonaktifkan sementara, serta Visible untuk menyembunyikannya. Properti khusus kemudian ditambahkan masing-masing kelas, misalnya Multiline milik TextBox atau Items milik ListBox.

Kontrol diambil dari toolbox saat merancang form di Visual Studio, atau dibuat dengan kata kunci New sebagaimana contoh pada topik ini. Pemahaman properti inti lebih penting daripada menghafal daftar kontrol yang panjang, karena ratusan kontrol bawaan berbagi pola yang sama. Sebelum menulis kode, pertimbangkan peran yang dibutuhkan, lalu pilih kontrol yang paling sederhana untuk peran tersebut.

Lima kontrol yang paling sering digunakan#

KontrolPeran utamaProperti inti
Labelmenampilkan teks yang tidak disunting penggunaText, AutoSize, Font
TextBoxmenerima ketikan penggunaText, Multiline, PlaceholderText, ReadOnly
Buttonmemicu suatu aksiText, Enabled
ComboBoxmemilih satu nilai dari daftar pilihanItems, SelectedItem, DropDownStyle
ListBoxmenampilkan kumpulan nilai dalam daftarItems, SelectedItem, Sorted

Label menampilkan teks statis seperti petunjuk dan keterangan hasil, dan kontrol ini tidak pernah menerima masukan. TextBox adalah kebalikannya, yaitu wadah ketikan yang isinya dibaca melalui properti Text. Properti Multiline mengubahnya menjadi area teks berbaris-baris, PlaceholderText menampilkan teks petunjuk saat masih kosong, sedangkan ReadOnly mematikan penyuntingan tanpa menghilangkan teksnya.

Button memicu aksi melalui event Click, dan properti Enabled yang bernilai false membuatnya redup sekaligus tidak dapat ditekan. ComboBox menampilkan satu nilai dengan daftar pilihan yang terbuka ke bawah, sedangkan ListBox menampilkan seluruh nilainya sekaligus dalam daftar yang dapat digulung. Pada keduanya, kumpulan nilai disimpan di properti Items, nilai terpilih dibaca dari SelectedItem, dan Items dapat diisi lewat metode Add maupun AddRange.

Pilihan awal pada kedua kontrol daftar diatur lewat SelectedIndex yang berbasis angka, sedangkan pembersihannya dilakukan dengan Items.Clear. Properti Sorted pada ListBox mengurutkan isinya secara otomatis setiap kali item baru masuk, sehingga daftar tetap rapi tanpa pengurutan manual. Bila pilihan boleh lebih dari satu, ListBox menyediakan properti SelectionMode, sedangkan ComboBox selalu mengembalikan satu pilihan saja.

Form buku catatan#

Berkas berikut merangkai kelima kontrol menjadi aplikasi buku catatan. Kode berjalan di Windows melalui Visual Studio atau dotnet run, sedangkan di lingkungan kerja tanpa layar, kode hanya diperiksa kompilasinya.

vb FormCatatan.vb
' tidak-dijalankan
Imports System.Drawing
Imports System.Windows.Forms

Public Class FormCatatan
    Inherits Form

    Private WithEvents inputCatatan As New TextBox()
    Private WithEvents pilihKategori As New ComboBox()
    Private WithEvents tombolTambah As New Button()
    Private WithEvents daftarCatatan As New ListBox()
    Private labelJumlah As New Label()

    Sub New()
        Text = "Buku Catatan"
        ClientSize = New Size(320, 250)

        inputCatatan.Location = New Point(20, 15)
        inputCatatan.Size = New Size(280, 23)
        inputCatatan.PlaceholderText = "Tulis catatan di sini"

        pilihKategori.DropDownStyle = ComboBoxStyle.DropDownList
        pilihKategori.Items.AddRange(New Object() {"Pekerjaan", "Belanja", "Pribadi"})
        pilihKategori.SelectedIndex = 0
        pilihKategori.Location = New Point(20, 48)
        pilihKategori.Size = New Size(180, 23)

        tombolTambah.Text = "Tambah"
        tombolTambah.Location = New Point(210, 47)
        tombolTambah.Size = New Size(90, 25)
        AcceptButton = tombolTambah

        daftarCatatan.Location = New Point(20, 82)
        daftarCatatan.Size = New Size(280, 130)

        labelJumlah.Text = "Jumlah catatan: 0"
        labelJumlah.Location = New Point(20, 220)
        labelJumlah.Size = New Size(280, 23)

        Controls.Add(inputCatatan)
        Controls.Add(pilihKategori)
        Controls.Add(tombolTambah)
        Controls.Add(daftarCatatan)
        Controls.Add(labelJumlah)
    End Sub

    Private Sub TombolTambahDiklik(sender As Object, e As EventArgs) Handles tombolTambah.Click
        Dim teks As String = inputCatatan.Text.Trim()
        If teks = "" Then
            Return
        End If
        Dim kategori As String = CStr(pilihKategori.SelectedItem)
        daftarCatatan.Items.Add($"[{kategori}] {teks}")
        inputCatatan.Clear()
        inputCatatan.Focus()
        labelJumlah.Text = $"Jumlah catatan: {daftarCatatan.Items.Count}"
    End Sub

End Class

Alur aplikasinya berjalan seperti berikut. Ketikan dibaca dari inputCatatan.Text lalu spasi di tepinya dipangkas dengan Trim, dan bila hasilnya kosong, prosedur berhenti melalui Return sehingga catatan kosong tidak pernah masuk daftar. Kategori terpilih dibaca dari pilihKategori.SelectedItem yang bertipe Object, sehingga dikonversi ke String dengan CStr sebelum digabung ke teks catatan. Metode Items.Add memasukkan baris [Kategori] teks ke ListBox, sedangkan jumlah terbaru dihitung langsung dari daftarCatatan.Items.Count agar label tidak pernah selisih dengan isi daftar.

Dua penataan kecil membuat penggunaannya lebih nyaman. SelectedIndex = 0 pada konstruktor memilih kategori pertama sejak form tampil, sehingga tidak ada keadaan tanpa kategori. Baris AcceptButton = tombolTambah menjadikan tombol Tambah sebagai tombol Enter, sehingga ketikan dapat langsung dikirim tanpa menyentuh tetikus.

Kesalahan umum#

Tiga kesalahan berikut paling sering terjadi saat menggunakan kelima kontrol tersebut.

  1. Membaca SelectedItem padahal belum ada pilihan terpilih. Nilainya Nothing, sehingga konversi dengan CStr melempar NullReferenceException. Periksa SelectedIndex lebih dahulu atau pilih nilai awal lewat SelectedIndex = 0.
  2. Memasukkan isian tanpa pemeriksaan. Catatan yang hanya berisi spasi tetap masuk daftar dan label jumlah ikut menyesatkan. Pangkas dengan Trim lalu tolak isian kosong sebelum Items.Add.
  3. Mencampur nilai mentah dari ComboBox yang boleh diketik bebas. Pengguna dapat menulis apa pun di luar daftar pilihan, sehingga data yang tersimpan tidak terkendali. Tetapkan DropDownStyle menjadi ComboBoxStyle.DropDownList bila pilihan harus baku.

Ringkasan#

  • Semua kontrol mewarisi kelas Control, sehingga Location, Size, Text, Enabled, dan Visible tersedia pada setiap kontrol.
  • Label menampilkan teks statis, TextBox menerima ketikan, dan Button memicu aksi lewat event Click yang diatur Enabled.
  • ComboBox dan ListBox menyimpan isinya di Items, membaca pilihan dari SelectedItem, dan jumlah isinya dihitung lewat Items.Count.
  • Form buku catatan menunjukkan alur baku aplikasi kecil, yaitu validasi masukan, penambahan item, pembacaan jumlah, dan pemilihan awal.

Referensi#