Rully Yulian MF

Kita sering melihat ComboBox yang berisi nama-nama warna yang mempunyai gambar kotak di sebelah namanya yang diisi dengan warna yang bersesuaian. ComboBox tersebut salah satunya dapat kita temukan pada property grid control di properties window. Lalu bagaimana caranya untuk membuat control tersebut. It's simple ternyata :)...Mari kita lihat langkah-langkahnya.

1. Hal pertama yang harus kita lakukan yaitu membuat Windows Forms Control Library  project template pada Visual Studio anda.

2. Modifikasi file component yang diberikan secara default. Kode yang dimodifikasi yaitu Inheritance nya. Jadi anda buka file component tersebut di file .designer.vb atau .designer.cs, lalu kode pewarisan tersebut diganti dengan "ComboBox".

3. Buat sebuah prosedur untuk looping item yang terdapat dalam enumerasi KnownColor untuk ditambahkan ke koleksi Item dari combo box nya. Nantinya didalam combo box ini akan terdapat nama-nama warna. Berikut prosedurnya :

   1:  Private Sub LoadColor()

   2:     For Each aColor In [Enum].GetNames(GetType(System.Drawing.KnownColor))

   3:         Me.Items.Add(aColor)

   4:     Next

   5:  End Sub

4. Agar combobox bisa menampilkan kotak / shape warna yang telah kita tentukan pada properti Text maka properti DropDownStyle harus di set ke ComboBoxStyle.DropDownList. Prosedur LoadColor diatas dipanggil di constructornya. Berikut tambahan kode di constructor :

   1:  Public Sub New()

   2:         MyBase.New()

   3:   

   4:         InitializeComponent()

   5:   

   6:         Me.DropDownStyle = ComboBoxStyle.DropDownList

   7:   

   8:         Me.LoadColor()

   9:         Me.SelectedIndex = 1

  10:   End Sub

5. Langkah terakhir yaitu merubah implementasi kode pada prosedur OnDrawItem. Prosedur ini digunakan untuk merubah tampilan item yang terdapat di combo box. Disinilah letak manipulasi item yang kita inginkan untuk dirubah. Langsung saja kita lihat kodenya :

   1:   Protected Overrides Sub OnDrawItem(ByVal e As System.Windows.Forms.DrawItemEventArgs)

   2:          MyBase.OnDrawItem(e)

   3:   

   4:          If e.Index > 0 Then

   5:              Dim strTeks As String = Me.Items(e.Index).ToString

   6:              Dim intRectWidth As Integer = CType(System.Math.Round(Me.Width * 0.1), Integer)

   7:              Dim rect As New Rectangle(e.Bounds.X, e.Bounds.Y, intRectWidth, e.Font.Height)

   8:   

   9:              e.Graphics.DrawEllipse(Pens.Black, rect)

  10:              e.Graphics.FillEllipse(New SolidBrush(Color.FromName(strTeks)), rect)

  11:              e.Graphics.DrawString("==> " & strTeks, Me.Font, New SolidBrush(Color.Black), _

  12:                                    e.Bounds.X + (intRectWidth + 5), e.Bounds.Y)

  13:          End If

  14:      End Sub

6. Prosedur di atas digunakan untuk membuat ellipse yang warnanya diisi sesuai dengan nama warna yang tampil di combobox nya.

- Kode di line-5 digunakan untuk mengambil teks yang berisi nama warnanya, dari teks inilah kita buat warna untuk mengisi shape dari ellipse yang akan ditampilkan di combobox.

- Line-6 dibuat untuk mengatur lebar dari ellipse, saya ambil hanya 1% dari lebar combobox.

- Line-7 digunakan untuk membuat batas ellipse yang akan digunakan

- Line-9 dan line-10 berisi kode untuk membuat ellipse

- Line-11 digunakan untuk membuat teks berupa nama warna di sebelah shape ellipse...That's it :)

7. Build project...Tambahkan control tersebut pada sebuah windows application project template.

8. Buat design interface seperti yang ada pada gambar dibawah. Rectangle shape yang terdapat di form dibuat dengan menggunakan Rectangle shape yang terdapat di dalam Microsoft Visual Basic Power Packs v 2.0, anda bisa mendownloadnya dari situs microsoft.

9. Preview dari aplikasi setelah dijalankan :

Enjoy it ! :)