facebook Group Programmer VB.

Net Indonesia
Tutorial
[Link] membuat User Control Button
Hi, para members.

Kali ini saya akan memberikan tutorial membuat sebuah Button yang memiliki tema flat dengan
kriteria sebagai berikut:
1. Ada tanda / Marker pada saat button terpilih,
2. Bisa diberikan Icon,
3. Bisa di-set berfungsi seperti Radio Button (ToggleMode), pilih satu maka control Button yang
lain tidak terpilih (dengan mempertahankan Marker yang hidup)
4. Bisa di-set untuk tidak menerima Focus / Select (Selectable), misalkan saat digunakan
sebagai ControlBox Button (minimizeBox, maximizeBox, exitBox) dalam sebuah borderless
form.
5. Bisa di-set warna Border dan ukuran Border (Max. 3 px), border ditampilkan saat control got
focus dan hilang saat lost focus.
6. Bisa di-set kondisi tampilan MouseHover dan MouseDown utk BackColor dan Icon.
7. Ada garis pembatas (Separator) antara Icon dan Text.
8. Bisa hanya menampilkan Icon saja tanpa Text, atau Text saja tanpa Icon maupun keduanya,
dengan catatan bila Icon atau Text tidak ditampilkan maka garis separator harus dihilangkan.
9. Bila Button ini dimasukkan ke dalam Custom MessageBox, maka ia akan bisa mengembalikan
nilai DialogResult.

Sebelum kita membahas design UI button tersebut (apalagi code nya), mari kita perhatikan urutan
Event Mouse / Control. Tujuan memahami urutan Event (lifecycle) supaya kita dapat dengan jelas
menentukan proses apa yang akan terjadi pada setiap event, sehingga tidak ada proses yang
tumpang tindih.

Pertama tama, urutan validasi dan focus dari sebuah control di mulai dari Enter, GotFocus, Leave,
Validating, Validated dan di akhiri dengan LostFocus.

Sementara untuk Events Mouse dimulai dari MouseEnter, MouseMove, MouseHover, MouseDown,
Click / MouseClick, MouseDoubleClick, MouseUp, MouseLeave.

Dengan demikian maka kita akan menyusun urutan proses yang terjadi pada Button kita terhadap
setiap Events tersebut di atas.

1. MouseEnter: Kita menyimpan default BackColor dan Icon ke local variable (clrBackColor dan
imgIcon) untuk dapat dipergunakan kembali saat MouseLeave, kecuali bila Selectable diset
False.
2. MouseHover: Kita mengganti BackColor dan Icon dengan BackColorMouseHover dan
IconMouseHover, kecuali bila Selectable diset False.
3. MouseDown: Kita mengganti BackColor dan Icon dengan BackColorMouseDown dan
IconMouseDown, kecuali bila Selectable diset False.
4. MouseUp: Kita mengembalikan BackColor dan Icon dengan BackColorMouseHover dan
IconMouseHover, kecuali bila Selectable diset False.
5. MouseLeave: Kita mengembalikan BackColor dan Icon ke posisi default dengan nilai dari
clrBackColor dan imgIcon yang kita simpan pada posisi MouseEnter, kecuali bila Selectable
diset False.
 facebook Group Programmer [Link] Indonesia
Setelah memiliki gambaran apa yang akan kita lakukan, maka kita perlu membuat daftar Property
tambahan (selain property default dari turunan Control) ke dalam Button kita.
Beberapa Property tambahan yang akan ada di Button kita adalah:
1. BorderColor (tipe Color) dan BorderWidth (tipe Single)
2. DialogResult (tipe DialogResult)
3. Icon , IconMouseHover, IconMouseDown (ketiganya bertipe Image)
4. MarkerColor (tipe Color)
5. BackColorMouseHover, BackColorMouseDown (keduanya bertipe Color)
6. Selectable (tipe Boolean), dan
7. ToggleMode (tipe Boolean).

Dan ada beberapa Property turunan Control yang harus kita Overrides sehingga saat property ini
dirubah nilainya, ia akan merubah nilai control yang ada di dalam Button kita, bukan hanya MyBase
nya saja, yaitu:
1. BackColor (merubah BackColor dari PictureBox dan Label),
2. Font (merubah Font dari Label),
3. ForeColor (merubah ForeColor dari Label), dan
4. Text (merubah Text dari Label)

Dalam meng-overrides Property turunan dari Control kita butuh 3 buah Attribute (turunan dari Class
[Link]), yaitu:
1. <Browsable(True)>,
2. <DesignerSerializationVisibility([Link]
)>
3. <EditorBrowsable([Link])>
Tanpa ketiga Attribute ini, property yang kita buat tidak akan muncul di panel Properties saat control
terpilih di design-time.

Pendeklarasian Property secara lengkap akan mengikuti Syntax sebagai berikut:

<attribute1(value)>, _
<attribute2(value)>, _
Public <modifiers> Property namaProp As tipeData
Get
Return <value/variable>
End Get
Set (Value As tipeData)
<variable> = value
End Set
End Property

Bila sebuah property tidak membutuhkan fungsi Get/Set yang kompleks, melainkan hanya mengisi
nilai ke dirinya sendiri dan membaca nilai dari dirinya sendiri, pendeklarasian Property bisa
disederhanakan:

Public Property namaProp As tipeData

Baik, itulah sekilas tentang Property dari Control.

Sekarang pertanyaannya bagaimana kita akan membuat User Control? Ada 2 cara untuk membuat
User Control:
1. User Control merupakan bagian dari sebuah Project, atau
 facebook Group Programmer [Link] Indonesia
2. User Control merupakan Project mandiri, yang setelah di-compile akan menjadi Dynamic Link
Library (DLL). Kemudian DLL ini dimasukkan ke dalam sebuah Project sebagai References.

Bila kelak kamu hendak bisa menggunakan Controls buatanmu di berbagai Project di masa yang akan
datang, maka saran saya gunakan metode kedua. Dan dalam tutorial ini pun, saya akan
menggunakan metode yang kedua.

Mari kita mulai, bukalah Visual Studio kamu (saya menggunakan Versi 2017 Communiti Edition),
pilihlah:
1. Bahasa Visual Basic
2. Project berbasis Windows Desktop
3. Jenis project Class Library (.NET Framework) (no. 1 di gambar)
4. Berikan nama project myControls (no. 2 di gambar)
5. Pilih versi Framework, disini saya pilih versi 4.0, kuncinya adalah pilih versi yang dibawah
atau maksimal sama dengan project aplikasi yang akan menggunakannya. (no. 3 di gambar)
6. Setelah masuk ke Editornya, hapus saja file [Link], karena kita tidak membutuhkannya.

Kemudian dilanjutkan dengan meng-import References dan Imported Namespaces melalui Project
Properties:
1. Untuk References yang kita gunakan hanya:
a. System,
b. [Link],
c. [Link], dan
d. [Link]
2. Untuk Imported Namespaces:
a. [Link],
b. System,
c. [Link],
d. [Link],
e. [Link], dan
f. [Link]
 facebook Group Programmer [Link] Indonesia
Selanjutnya kita tambahkan User Control ke dalam project ini:

Beri saja namanya ButtonExt. Maka di layar kita saat ini ada sebuah kotak bujur sangkar, ini adalah
container utk button kita. Mari kita set beberapa Properties dari container ini:
1. AutoScaleMode = Dpi
2. BackColor = 64,64,64 (sesuai selera kamu)
3. Cursor = Hand
4. DoubleBuffered = True
5. Font = Calibri, 9.75pt (sesuai selera kamu, boleh diabaikan)
6. ForeColor = Snow (sesuai selera kamu)
7. Margin = 0, 0, 0, 0
8. Padding = 3, 3, 3, 3
9. Size = 200, 53 (pertimbangkan bentuk PictureBox untuk Icon harus berbentuk bujur sangkar)

Sekarang tekan F7 saat kursor masih aktif di editor control, karena ada beberapa Code awal yang
harus kita masukkan di bagian Constructornya dan penggunaan Attribute ToolBox.
 facebook Group Programmer [Link] Indonesia
Hasilnya akan seperti ini:

<ToolboxItem(True),
ToolboxBitmap(GetType(Button))>
Public Class ButtonExt
Public Sub New()

' This call is required by the designer.

InitializeComponent()
' Add any initialization after the InitializeComponent() call.
SetStyle([Link], True)
SetStyle([Link], True)
SetStyle([Link], False)
SetStyle([Link], True)
SetStyle([Link], True)
UpdateStyles()

End Sub
End Class

Catatan: Saat mengetik SetStyle tidak keluar Intellisense (auto-complete), silahkan lanjut mengetik
sampai selesai.

Secara sekilas, penjelasan masing masing SetStyle adalah sebagai berikut:

Ada 3 elemen yang berhubungan dengan optimalisasi opsi DoubleBuffered (untuk mengurangi
kedipan / flicker control) : AllPaintingInWmPaint, OptimizedDoubleBuffer, dan UserPaint
yang harus di-set TRUE.

ContainerControl bila diset TRUE untuk memberitahukan kepada sistem bahwa control kita
berfungsi sebagai seperti-kontainer (seperti GroupBox atau Panel) yang dapat menerima control lain
di design time, kita set menjadi FALSE.

Selectable bila diset TRUE, maka control kita bisa menerima signal focus. Secara default ini kita set
TRUE tetapi saatn property ButtonExt Selectable kita set FALSE maka SetStyle ini pun harus kita ubah
menjadi FALSE, supaya control kita tidak dapat menerima focus.

Baik, kita kembali ke Design ButtonExt kita.

Di sini kita hanya akan menggunakan:

1. TableLayoutPanel
2. Panel
3. PictureBox, dan
4. Label

Pertama tama masukkan dulu TableLayoutPanel ke UserControl kita, dengan konfigurasi 1 Row 4
kolom, dimana lebar kolom 1 = 20 px, 2 = 50 px, 3 = 20px, dan kolom 4 = 100%, beri nama control ini
pnlFace. Set juga properties nya:
1. Dock = Fill
2. Margin = 0, 0, 0, 0
 facebook Group Programmer [Link] Indonesia
Kemudian masukkan juga Panel ke dalam pnlFace pada kolom 1 (pastikan Property Column bernilai
0), beri nama pnlMarker dengan settingan Properties:
1. BackColor = 200, 200, 200
2. Dock = Fill
3. Margin = 0, 8, 0, 8

Berikutnya, tambahkan PictureBox ke dalam pnlFace kolom ke 2 (Property Column bernilai 1), beri
nama picIcon dengan settingan Properties:
1. Dock = Fill
2. Margin = 4, 4, 4, 4
3. SizeMode = StretchImage

Tambah lagi sebuah Panel ke dalam pnlFace pada kolom ke-3 (Property Column bernilai 2), beri nama
pnlSeparator, dengan settingan Properties:
1. BackColor = Snow
2. Dock = Fill
3. Margin = 0, 3, 0, 3

Terakhir tambahkan sebuah Label ke dalam pnlFace pada kolom ke-4 (Property Column bernilai 3),
beri nama lblText, dengan settingan Properties:
1. AutoSize = False
2. Dock = Fill
3. Margin = 5, 0, 0, 0
4. TextAlign = MiddleLeft

Sekarang kembali ke pnlFace, ubah lebar kolom 1 menjadi 8 dan kolom 3 menjadi 1.

Maka secara sekilas akan tampak seperti ini:

Sekarang kita hendak menyiapkan default Icon, IconMouseHover dan IconMouseDown ke dalam
resources project myControls ini. Silahkan pilih gambar yang berukuran 32 x 32 pixel sebagai icon
default, berikan namanya masing masing rsIconDefault, rsIconMouseHover dan rsIconMouseDown
dan import ke dalam resources project.
 facebook Group Programmer [Link] Indonesia
Kembali ke PictureBox picIcon, set Image ke rsIconDefault.

Sampai titik ini, secara design grafis sudah selesai. Berikutnya kita harus kembali ke Code, silahkan
tekan F7 (atau klik kanan [Link] dan pilih Show Code).

Pertama tama, kita deklarasikan dahulu private members/variables yang akan dipakai untuk
menampung nilai nilai Properties terkait.

Ada baiknya gunakan Directive #Region … #End Region untuk mengelompokkan block code,
sehingga lebih “manusiawi”, dan gunakan XML Tag untuk dokumentasi (cukup ketik 3x ‘ maka akan
otomatis dimunculkan TAG XML yang terkait seperti Summary, remarks, returns dan lain lainnya).

#Region "Private members"

''' <summary>
''' Untuk menampung value dari Property Selectable
''' </summary>
Private boolSelectable As Boolean

''' <summary>
''' Untuk menampung value True saat Button di Hover dan False saat event Mouse
Leave
''' </summary>
Private boolOnHover As Boolean

''' <summary>
''' Untuk menampung value dari Property ToggleMode
''' </summary>
Private boolToggleMode As Boolean

''' <summary>
''' Untuk menampung value kondisi Checked saat Focused dan ToggleMode = True
''' </summary>
Private csIsChecked As CheckState

''' <summary>
''' Untuk menampung value dari Property BackColor
''' </summary>
Private clrBackColor As Color
 facebook Group Programmer [Link] Indonesia
''' <summary>
''' Untuk menampung value dari Property MarkerColor
''' </summary>
Private clrMarkerColor As Color

''' <summary>
''' Untuk menampung value dari Property Icon
''' </summary>
Private imgIcon As Image

''' <summary>
''' Untuk menampung value dari Property BorderWidth
''' </summary>
Private intBorderWidth As Single
#End Region

Kemudian kita buat juga Public Properties yang akan dipakai oleh ButtonExt ini:

Code selengkapnya:

#Region "Public Properties"

''' <summary>
''' Override properti BackColor untuk merubah BackColor picIcon dan lblText
''' </summary>
''' <returns>Color</returns>
<Browsable(True),
EditorBrowsable([Link]),
DesignerSerializationVisibility([Link])>
Public Overrides Property BackColor As Color
Get
Return [Link]
End Get
Set(value As Color)
[Link] = value
[Link] = value
[Link] = value
[Link] = value
 facebook Group Programmer [Link] Indonesia
' memaksa control untuk menggambar ulang tampilan
Invalidate()
End Set
End Property

''' <summary>
''' Property untuk mengatur warna Border
''' </summary>
''' <returns>Color</returns>
Public Property BorderColor As Color

''' <summary>
''' Property untuk mengatur ukuran lebar Border
''' </summary>
''' <returns>Single</returns>
Public Property BorderWidth As Single
Get
Return intBorderWidth
End Get
Set(value As Single)
' Periksa value, bila lebih besar dari 3
' munculkan error dengan pesan:
' Ukuran lebar border harus lebih kecil dari 4.
If value > 3 Then Throw New Exception("Ukuran lebar border harus
lebih kecil dari 4.")
intBorderWidth = value
End Set
End Property

''' <summary>
''' Property yang mengatur warna latar saat Mouse ditekan
''' </summary>
''' <returns>Color</returns>
Public Property ColorMouseDown As Color

''' <summary>
''' Property yang mengatur warna latar saat Mouse memasuki area ButtonExt
''' </summary>
''' <returns>Color</returns>
Public Property ColorMouseHover As Color

''' <summary>
''' Property yang menetapkan value DialogResult (Yes, No, Ok, Cancel, dll)
''' </summary>
''' <returns>DialogResult</returns>
Public Property DialogResult As DialogResult

''' <summary>
''' Property yang mengatur jenis font ke control lblText
''' </summary>
''' <returns>Font</returns>
<Browsable(True),
EditorBrowsable([Link]),
DesignerSerializationVisibility([Link])>
Public Overrides Property Font As Font
Get
Return [Link]
End Get
 facebook Group Programmer [Link] Indonesia
Set(value As Font)
[Link] = value
[Link] = value
Invalidate()
End Set
End Property

''' <summary>
''' Property yang mengatur warna tulisan control lblText
''' </summary>
''' <returns>Color</returns>
<Browsable(True),
EditorBrowsable([Link]),
DesignerSerializationVisibility([Link])>
Public Shadows Property ForeColor As Color
Get
Return [Link]
End Get
Set(value As Color)
[Link] = value
[Link] = value
Invalidate()
End Set
End Property

''' <summary>
''' Property yang mengatur Image dari control picIcon
''' </summary>
''' <returns>Image</returns>
Public Property Icon As Image
Get
Return [Link]
End Get
Set(value As Image)
' Sebelum memasukkan value ke dalam [Link]
' periksa dahulu apakah value bernilai null atau tidak
If value Is Nothing Then
' bila value bernilai null, maka
' hilangkan panel icon dan separator
' serta kosongkan juga nilai IconMouseDown dan
IconMouseHover
[Link](1).Width = 0
[Link](2).Width = 0
[Link] = False
[Link] = Nothing
IconMouseDown = Nothing
IconMouseHover = Nothing
Else
' bila value berisi image, maka
' kembalikan panel icon dan separator
[Link](1).Width = [Link]
[Link](2).Width = 1
[Link] = True
[Link] = value
If DesignMode Then imgIcon = value
End If
Invalidate()
End Set
 facebook Group Programmer [Link] Indonesia
End Property

''' <summary>
''' Property yang akan berisi Image yang ditampilkan di [Link]
''' saat tombol mouse turun (klik)
''' </summary>
''' <returns>Image</returns>
Public Property IconMouseDown As Image

''' <summary>
''' Property yang akan berisi Image yang ditampilkan di [Link]
''' saat tombol mouse masuk ke area ButtonExt
''' </summary>
''' <returns></returns>
Public Property IconMouseHover As Image

''' <summary>
''' Property yang mengatur warna latar (BackColor) dari Panel pnlMarker,
''' yang akan ditampilkan saat GotFocus dan hilang saat LostFocus
''' </summary>
''' <returns>Color</returns>
Public Property MarkerColor As Color
Get
Return clrMarkerColor
End Get
Set(value As Color)
clrMarkerColor = value
[Link] = value
Invalidate()
End Set
End Property

''' <summary>
''' Property yang menentukan apakah ButtonExt bisa GotFocus atau tidak.
''' </summary>
''' <returns>Boolean</returns>
Public Property Selectable As Boolean
Get
Return boolSelectable
End Get
Set(value As Boolean)
boolSelectable = value

' bila bernilai FALSE, maka property ToggleMode juga bernilai

FALSE
' karena bila tidak dapat GotFocus maka fungsi Toggle harus mati
If Not value Then ToggleMode = value
SetStyle([Link], value)
UpdateStyles()
Invalidate()
End Set
End Property

''' <summary>
''' Property yang mengatur Text dari lblText
''' </summary>
''' <returns>String</returns>
<Browsable(True),
 facebook Group Programmer [Link] Indonesia
EditorBrowsable([Link]),
DesignerSerializationVisibility([Link])>
Public Overrides Property Text As String
Get
Return [Link]
End Get
Set(value As String)
[Link] = value
[Link] = value
Invalidate()
End Set
End Property

''' <summary>
''' Property yang mengatur efek Toggle, ButtonExt akan berprilaku seperti
RadioButton
''' </summary>
''' <returns>Boolean</returns>
Public Property ToggleMode As Boolean
Get
Return boolToggleMode
End Get
Set(value As Boolean)
boolToggleMode = value
If value = False Then csIsChecked = [Link]
End Set
End Property

#End Region

Secara default (inherit), ada beberapa Properties dari Control yang tidak kita butuhkan (atau tidak
mau kita tampilkan di daftar Properties ButtonExt – bersifat Optional, boleh diabaikan), oleh sebab
itu kita akan Overrides properties ini untuk disembunyikan dengan menggunakan Attribute
Browsable = false, EditorBrowsable = [Link] dan DesignerSerializationVisibility
= Hidden, dan untuk itu kita tidak butuh fungsi Get/Set (bila muncul secara otomatis, silahkan
dihapus saja):

#Region "Disabled Inherit Properties"

<Browsable(False),
EditorBrowsable([Link]),
DesignerSerializationVisibility([Link])>
Public Overrides Property BackgroundImage As Image

<Browsable(False),
EditorBrowsable([Link]),
DesignerSerializationVisibility([Link])>
Public Overrides Property BackgroundImageLayout As ImageLayout

<Browsable(False),
EditorBrowsable([Link]),
DesignerSerializationVisibility([Link])>
Public Shadows Property BorderStyle As BorderStyle
#End Region
 facebook Group Programmer [Link] Indonesia
Kembali ke blok construstor (Public Sub New()), di sini kita harus mengisi default value ke
properties yang kita custom, sehingga terlihat spt ini:
''' <summary>
''' Class Constructor
''' </summary>
Public Sub New()

' This call is required by the designer.

InitializeComponent()

' Add any initialization after the InitializeComponent() call.

SetStyle([Link], True)
SetStyle([Link], True)
SetStyle([Link], False)
SetStyle([Link], True)
SetStyle([Link], True)
UpdateStyles()

BackColor = [Link](64, 64, 64)

BorderColor = [Link] 'Sesuaikan dengan selera
BorderWidth = 3
clrBackColor = BackColor
clrMarkerColor = [Link]
csIsChecked = [Link]
ColorMouseDown = [Link]
ColorMouseHover = [Link]
DialogResult = [Link]
ForeColor = [Link]
Icon = [Link]
IconMouseDown = [Link]
IconMouseHover = [Link]
imgIcon = Icon
MarkerColor = [Link]
Selectable = True
ToggleMode = True
End Sub

Sampai di sini, settingan untuk properties sudah selesai. Kini saatnya kita masuk ke Event Event
terkait yang mempengaruhi prilaku (Behaviour) ButtonExt kita.

Dalam mengatur Events ini, kita harus ingat bahwa ada 2 jenis events yang terjadi:
1. Events dari ButtonExt dan
2. Events dari controls yang ada di dalamnya.

Maksud saya adalah, bila kita masukkan ke dalam sebuah form, dan user meng-klik ButtonExt yang
terjadi (ter-trigger) adalah event internal controls seperti lblText, atau pnlFace dan lain lain, bukan
ButtonExt click yang tertrigger. Oleh sebab itu semua event controls internal harus kita arahkan
menjadi ButtonExt (Me) events, seperti ini:

#Region "Private Events "

Private Sub objClick(sender As Object, e As EventArgs) Handles [Link],
[Link], [Link], [Link], [Link]
[Link](e)
End Sub
#End Region
 facebook Group Programmer [Link] Indonesia
Oleh sebab di atas, maka ada beberapa Event internal yang harus kita arahkan:
1. Click
2. MouseEnter
3. MouseHover
4. MouseDown
5. MouseUp
6. MouseLeave

Secara keseluruhan block code terlihat seperti ini:

#Region "Private Events"

''' <summary>
''' Mengarahkan internal Click Event menjadi ButtonExt Event
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
Private Sub objClick(sender As Object, e As EventArgs) Handles [Link],
[Link], [Link], [Link], [Link]
[Link](e)
End Sub

''' <summary>
''' Mengarahkan internal MouseEnter Event menjadi ButtonExt Event
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
Private Sub objMouseEnter(sender As Object, e As EventArgs) Handles
[Link], [Link], [Link], [Link],
[Link]
[Link](e)
End Sub

''' <summary>
''' Mengarahkan internal MouseHover Event menjadi ButtonExt Event
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
Private Sub objMouseHover(sender As Object, e As EventArgs) Handles
[Link], [Link], [Link], [Link],
[Link]
[Link](e)
End Sub

''' <summary>
''' Mengarahkan internal MouseDown Event menjadi ButtonExt Event
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
Private Sub objMouseDown(sender As Object, e As MouseEventArgs) Handles
[Link], [Link], [Link], [Link],
[Link]
[Link](e)
End Sub
 facebook Group Programmer [Link] Indonesia
''' <summary>
''' Mengarahkan internal MouseUp Event menjadi ButtonExt Event
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
Private Sub objMouseUp(sender As Object, e As MouseEventArgs) Handles
[Link], [Link], [Link], [Link],
[Link]
[Link](e)
End Sub

''' <summary>
''' Mengarahkan internal MouseLeave Event menjadi ButtonExt Event
''' </summary>
''' <param name="sender"></param>
''' <param name="e"></param>
Private Sub objMouseLeave(sender As Object, e As EventArgs) Handles
[Link], [Link], [Link], [Link],
[Link]
[Link](e)
End Sub
#End Region

Sekarang baru kita masuk ke “real deal” events yang akan mempengaruhi prilaku ButtonExt.

#Region "Public Overrided Events"

''' <summary>
''' Event saat ButtonExt di-Click
''' </summary>
''' <param name="e"></param>
Protected Overrides Sub OnClick(e As EventArgs)
[Link](e)

' bila Selectable = False atau ToggleMode = False,

' abaikan proses ini.
If Not Selectable OrElse Not ToggleMode Then Exit Sub

csIsChecked = [Link]

' lakukan Looping terhadap semua control yang ada di container ButtonExt ini
' set propertiesnya menjadi normal
For Each ctrl As Control In [Link]
If TypeOf ctrl Is ButtonExt AndAlso Not [Link](Me) Then
DirectCast(ctrl, ButtonExt).csIsChecked = [Link]
DirectCast(ctrl, ButtonExt).[Link] = DirectCast(ctrl,
ButtonExt).clrBackColor
DirectCast(ctrl, ButtonExt).[Link] = DirectCast(ctrl,
ButtonExt).clrBackColor
DirectCast(ctrl, ButtonExt).[Link] = DirectCast(ctrl,
ButtonExt).clrBackColor
DirectCast(ctrl, ButtonExt).[Link] = DirectCast(ctrl,
ButtonExt).clrBackColor
DirectCast(ctrl, ButtonExt).[Link] = DirectCast(ctrl, ButtonExt).imgIcon
DirectCast(ctrl, ButtonExt).[Link] = DirectCast(ctrl,
ButtonExt).clrBackColor
DirectCast(ctrl, ButtonExt).Invalidate()
End If
Next
Invalidate()
End Sub
 facebook Group Programmer [Link] Indonesia
''' <summary>
''' Event saat ButtonExt terfocus / terpilih
''' </summary>
''' <param name="e"></param>
Protected Overrides Sub OnGotFocus(e As EventArgs)
[Link](e)
boolOnHover = True
' paksa control untuk Redraw supaya tergambar border.
Invalidate()
End Sub

''' <summary>
''' Saat Control di-Load ke Form pertama kali,
''' lakukan proses seperti pada Event Click,
''' tanpa mentrigger OnClick.
''' </summary>
''' <param name="e"></param>
Protected Overrides Sub OnLoad(e As EventArgs)
[Link](e)

' bila Selectable = False atau ToggleMode = False,

' abaikan proses ini.
If Not Selectable Then Exit Sub

' Set csIsChecked menjadi Checked

csIsChecked = [Link]

' lakukan looping terhadap semua control yang berada dalam 1 kontainer
' dan kembalikan tampilan ke default awalnya
For Each ctrl As Control In [Link]
If TypeOf ctrl Is ButtonExt AndAlso Not [Link](Me) Then
DirectCast(ctrl, ButtonExt).csIsChecked = [Link]
DirectCast(ctrl, ButtonExt).[Link] = DirectCast(ctrl,
ButtonExt).clrBackColor
DirectCast(ctrl, ButtonExt).[Link] = DirectCast(ctrl,
ButtonExt).clrBackColor
DirectCast(ctrl, ButtonExt).[Link] = DirectCast(ctrl,
ButtonExt).clrBackColor
DirectCast(ctrl, ButtonExt).[Link] = DirectCast(ctrl,
ButtonExt).clrBackColor
DirectCast(ctrl, ButtonExt).[Link] = DirectCast(ctrl, ButtonExt).imgIcon
DirectCast(ctrl, ButtonExt).[Link] = DirectCast(ctrl,
ButtonExt).clrBackColor
DirectCast(ctrl, ButtonExt).Invalidate()
End If
Next
Invalidate()
End Sub

''' <summary>
''' Event saat ButtonExt terlepas dari focus
''' </summary>
''' <param name="e"></param>
Protected Overrides Sub OnLostFocus(e As EventArgs)
[Link](e)
boolOnHover = False
' paksa control untuk Redraw supaya bordernya dihilangkan.
Invalidate()
End Sub
 facebook Group Programmer [Link] Indonesia
''' <summary>
''' Event saat tombol mouse ditekan, cursor di atas ButtonExt
''' </summary>
''' <param name="e"></param>
Protected Overrides Sub OnMouseDown(e As MouseEventArgs)
[Link](e)

' Set Background control dengan warna ColorMouseDown

' dan Icon dengan IconMouseDown
[Link] = ColorMouseDown
[Link] = MarkerColor
[Link] = ColorMouseDown
[Link] = ColorMouseDown
[Link] = IconMouseDown
End Sub

''' <summary>
''' Event saat cursor memasuki area ButtonExt
''' </summary>
''' <param name="e"></param>
Protected Overrides Sub OnMouseHover(e As EventArgs)
[Link](e)

[Link] = ColorMouseHover
[Link] = ColorMouseHover
[Link] = ColorMouseHover
[Link] = ColorMouseHover
[Link] = IconMouseHover

' set boolOnHover dengan nilai True

' supaya saat Redraw, border akan digambarkan
boolOnHover = True
Invalidate()
End Sub

''' <summary>
''' Event saat cursor meninggalkan ButtonExt
''' </summary>
''' <param name="e"></param>
Protected Overrides Sub OnMouseLeave(e As EventArgs)
[Link](e)

' Set BackColor dengan clrBackColor (Warna semula / default)

' demikian juga Icon menggunakan imgIcon (default icon)
[Link] = clrBackColor
[Link] = clrBackColor
[Link] = clrBackColor
[Link] = imgIcon

' bila ButtonExt memiliki properties ToggleMode = True dan

' csIsChecked = Checked (terpilih)
' maka Marker akan ditampilkan
If ToggleMode AndAlso csIsChecked = [Link] Then
[Link] = MarkerColor
ElseIf Not ToggleMode Then

' Bila tidak, maka Marker disembunyikan (disamarkan dengan clrBackColor)

[Link] = clrBackColor
End If
 facebook Group Programmer [Link] Indonesia
' Set boolOnHover = False,
' supaya saat Redraw, border dihilangkan
boolOnHover = False
Invalidate()
End Sub

''' <summary>
''' Event saat tombol mouse dilepas, cursor masih di atas ButtonExt
''' </summary>
''' <param name="e"></param>
Protected Overrides Sub OnMouseUp(e As MouseEventArgs)
[Link](e)

' saat tombol mouse di lepas dan cursor masih di atas ButtonExt
' set BackColor ke ColorMouseHover, demikian juga Iconnya.
[Link] = ColorMouseHover
[Link] = MarkerColor
[Link] = ColorMouseHover
[Link] = ColorMouseHover
[Link] = IconMouseHover
End Sub

''' <summary>
''' Event Paint untuk menggambar Border di sekeliling ButtonExt
''' </summary>
''' <param name="e"></param>
Protected Overrides Sub OnPaint(e As PaintEventArgs)
[Link](e)

' bila proses Redraw/Paint terjadi pada saat Design-Time, abaikan proses ini
If DesignMode Then Exit Sub

' bila Selectable = False atau control tidak dalam Hover mouse,
' abaikan proses ini.
If Not Selectable Then Exit Sub
If Not boolOnHover Then Exit Sub

Try

Dim bstyle As ButtonBorderStyle

bstyle = [Link]

' siapkan object P berdasarkan warna dan ukuran lebar Border

Using p As New Pen(BorderColor, BorderWidth)
' mulai menggambar Border disekeliling ButtonExt
[Link]([Link], [Link],
[Link], [Link], bstyle,
[Link], [Link], bstyle,
[Link], [Link], bstyle,
[Link], [Link], bstyle)
End Using

bstyle = Nothing

Catch ex As Exception

End Try
End Sub
#End Region
 facebook Group Programmer [Link] Indonesia
Untuk tujuan uji coba, silahkan buat sebuah Project Winform di dalam Solusion myControls, berikan saja
namanya testApp, dan set menjadi Set As Startup Project.

Sebelum mulai membuka design [Link], buka dulu References Project dan masukkan myControls sebagai
salah satu Reference, lalu jalankan Build Solution atau Rebuild Solution.

Setelah itu barulah buka [Link], dan perhatikan Toolbox seharusnya sudah mengandung MyControls
Components dengan ButtonExt di dalam daftar controlnya.

Selamat mencoba dan berexperiment.

Sekian dan #terimagaji.