Cara Memasukan Data Berupa Teks dan Icon di Dalam ComboBox

Artikel ini adalah kelanjutan dari artikel yang sebelumnya yang membahas tentang memanifulasi comboBox, dimana dalam artikel sebelumnya ada 5 cara yang Admin tulis untuk memanifulasi combobox, namun karena keterbatasan waktu Admin baru membuat hanya 4 yang baru terselesaikan.

Sesuai janji Admin sebelumnya bahwa Admin akan melanjutkan cara yang ke-5 yaitu cara memasukan icon + teks kedalam Combobox yang merupakan bagian dari manipulasi.

Combo Item Image

Tujuan memasukan icon kedalam combobox ini adalah supaya pengguna lebih cepat memahami pilihan yang tersedia. Dalam artikel blog kita kali ini, kita akan bahas langkah-langkah dalam pembuatannya :

1. Pastikan Anda sudah membuka Forms Visual Basic .Net

2. Tanamkan 1 Combobox di dalam Form1

3. Download icon yang Anda inginkan, disarankan .PNG ukuran 32x32

4. Buat File Resource di Form1 Anda. ini sudah pernah dibawahas cara membuat File Resource pastikan sudah ada gambar di dalam File Resource

5. Buat Class baru di Form dengan cara Project > Add Class > pilih Class > Add

6. Buka Solution Explorer ganti Class1 menjadi ComboItem lalau buka Class ComboItem dan tambahkan kode dibawah ini di

Public Class ComboItem

    Public Property Text As String

    Public Property Image As Image

    Public Sub New(text As String, image As Image)

        Me.Text = text

        Me.Image = image

    End Sub

    Public Overrides Function ToString() As String

        Return Text

    End Function

End Class

7.  Tinggalkan Class dan buka Form1

8. Buka jendela  Kode, hapus semua kode yang ada dengan CTRL+A kemudian tekan Del, copy-paste kode dibawah ini :

Public Class Form1

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles Me.Load

        

        ComboBox1.DrawMode = DrawMode.OwnerDrawFixed

        ComboBox1.DropDownStyle = ComboBoxStyle.DropDownList

        ComboBox1.ItemHeight = 40 'sesuaikan tinggi

        ComboBox1.Items.Add(New ComboItem("Admin", My.Resources.Resource1.admin))

        ComboBox1.Items.Add(New ComboItem("User", My.Resources.Resource1.user))

        ComboBox1.Items.Add(New ComboItem("Guest", My.Resources.Resource1.guest))

        ComboBox1.SelectedIndex = 0

    End Sub

    Private Sub ComboBox1_DrawItem(sender As Object, e As DrawItemEventArgs) Handles ComboBox1.DrawItem

        If e.Index < 0 Then Exit Sub

        Dim item As ComboItem = CType(ComboBox1.Items(e.Index), ComboItem)

        e.DrawBackground()

        e.Graphics.DrawImage(

            item.Image,

            e.Bounds.Left + 5,

            e.Bounds.Top + 5,

            30, 30

        )

        e.Graphics.DrawString(

            item.Text,

            e.Font,

            Brushes.Black,

            e.Bounds.Left + 45,

            e.Bounds.Top + 10

        )

        e.DrawFocusRectangle()

    End Sub

End Class

Catatan :

Kode yang di tandai warna merah adalah nama File Resource

Kode yang di tandai warna hijau adalah nama File image/icon

Demikinalah artikel singkat kali ini tentang Cara Memasukan Data Berupa Teks dan Icon di Dalam ComboBox, semoga artikel ini bermanfaat buat kita semua.Amin.

Selamat mencoba semoga berhasil