[VB.NET] การสร้าง User Control แบบพื้นฐานขึ้นมาใช้งานเอง

thongkorn

การสร้าง User Control ก็คือการนำ Control ต่างๆที่อยู่ในกลุ่มของเครื่องมือ (ToolBox) เพื่อนำมาสร้างเป็น Control ตัวใหม่ขึ้นมาใช้งานโดยเฉพาะ ตัวอย่างนี้เป็นการสร้างปุ่มคำสั่ง เพื่อให้แสดงผลรายชื่อสินค้า ราคา และภาพประกอบ ... โค้ดตัวอย่างประกอบนี้จะใช้งานในแบบไดนามิค คือต้องสั่งรันโปรแกรมให้ทำงานถึงจะเห็นผล (Run Time) เพื่อให้เกิดความยืดหยุ่น และมีประสิทธิภาพ ...

ทฤษฎี:
ใน VB.NET คำว่า Get และ Set เกี่ยวข้องกับคุณสมบัติ (Properties) ในคลาส คุณสมบัติใน VB.NET ใช้ในการห่อหุ้มข้อมูลและให้การเข้าถึงฟิลด์ของคลาสอย่างควบคุมได้ โดยมันจะช่วยให้คุณกำหนดวิธีการอ่านและแก้ไขข้อมูลในคลาสได้ ...

การประกาศคุณสมบัติ (Property Declaration):
คุณสมบัติจะถูกประกาศภายในคลาสโดยใช้คำว่า Property ซึ่งสามารถมีตัวเข้าถึง Get และ/หรือ Set

ตัวเข้าถึง Get (Get Accessor):
ตัวเข้าถึง Get ใช้เพื่อดึงค่าของคุณสมบัติ มันคล้ายกับเมธอดที่ส่งค่ากลับ

ตัวเข้าถึง Set (Set Accessor):
ตัวเข้าถึง Set ใช้เพื่อกำหนดค่าให้กับคุณสมบัติ มันคล้ายกับเมธอดที่รับพารามิเตอร์ ค่าที่จะกำหนดจะถูกส่งผ่านไปยังตัวเข้าถึง Set โดยใช้พารามิเตอร์ Value

อ่านแล้วงงมั้ยครับ ... หากจะให้อธิบายง่ายๆก็คือ การกำหนดคุณสมบัติ (Properties) ให้กับตัว Control เองนั่นแหละ ... ต้องดูจากคลิปวิดีโอแล้วคุณจะร้องอ๋อ

คลิปวิดีโอ Visual Basic .NET (2010) กับการสร้าง User Control แบบพื้นฐาน ...

โค้ดในส่วนของการกำหนดคุณสมบัติ (Properties) ให้กับ Control ...

1. Public Class Widget
   
2.     '// เพิ่ม Properties สำหรับตั้งค่ารายการต่างๆ
   
3.     Public Property WidgetName As String
   
4.         Get
   
5.             Return lblWidgetName.Text
   
6.         End Get
   
7.         Set(value As String)
   
8.             lblWidgetName.Text = value
   
9.         End Set
   
10.     End Property
    
11. 
    
12.     Public Property WidgetPrice As String
    
13.         Get
    
14.             Return lblWidgetPrice.Text
    
15.         End Get
    
16.         Set(value As String)
    
17.             lblWidgetPrice.Text = value
    
18.         End Set
    
19.     End Property
    
20. 
    
21.     Public Property WidgetPriceForeColor As Color
    
22.         Get
    
23.             Return lblWidgetPrice.ForeColor
    
24.         End Get
    
25.         Set(value As Color)
    
26.             lblWidgetPrice.ForeColor = value
    
27.         End Set
    
28.     End Property
    
29. 
    
30.     Public Property WidgetImage As Image
    
31.         Get
    
32.             Return picWidget.Image
    
33.         End Get
    
34.         Set(value As Image)
    
35.             picWidget.Image = value
    
36.         End Set
    
37.     End Property
    
38. 
    
39. End Class

คัดลอกไปที่คลิปบอร์ด

โค้ดในการนำ User Control เข้ามาใช้งานบนฟอร์ม ...

1. Public Class frmTest
   
2. 
   
3.     Private Sub frmTest_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
   
4.         '// ข้อมูลรายการสินค้า
   
5.         Dim products As List(Of Tuple(Of String, Decimal, String)) = New List(Of Tuple(Of String, Decimal, String)) From {
   
6.             Tuple.Create("Burger Chicken", 99D, "BurgerChicken.png"),
   
7.             Tuple.Create("Burger Fish", 75D, "BurgerFish.png"),
   
8.             Tuple.Create("Burger Spicy Shrimp", 85D, "BurgerSpicyShrimp.png"),
   
9.             Tuple.Create("Burger Tex Supreme", 60D, "BurgerTexSupreme.png"),
   
10.             Tuple.Create("Burger Lemon Shrimp", 45D, "BurgerLemonShrimp.png"),
    
11.             Tuple.Create("โค้กกระป๋อง", 20D, "cokecan.png"),
    
12.             Tuple.Create("7Up กระป๋อง", 20D, "7upcan.png"),
    
13.             Tuple.Create("เป็บซี่กระป๋อง", 20D, "pepsican.png")
    
14.         }
    
15.         '// สร้าง Panel ใหม่
    
16.         Dim Panel1 As New Panel()
    
17.         '// กำหนดขนาดของ Panel
    
18.         Panel1.Size = New Size(290, 440)
    
19.         '// กำหนดตำแหน่งของ Panel
    
20.         Panel1.Location = New Point(0, 0)
    
21.         '// เปิดใช้งาน ScrollBars อัตโนมัติ
    
22.         Panel1.AutoScroll = True
    
23.         '// เพิ่ม Panel ลงในฟอร์ม
    
24.         Me.Controls.Add(Panel1)
    
25. 
    
26.         '// วางรายการสินค้าแต่ละรายการบนฟอร์ม (อยู่ภายใน Panel1)
    
27.         For iCol As Integer = 0 To products.Count - 1
    
28.             Dim product As Tuple(Of String, Decimal, String) = products(iCol)
    
29.             '// Instance Name ของ UserControl (ProductControl)
    
30.             Dim widget As New Widget
    
31.             Dim ImagePath As String = MyPath(Application.StartupPath & "Picture")
    
32.             '// ตั้งค่ารายการสินค้าตามข้อมูลตัวอย่าง.
    
33.             With widget
    
34.                 .WidgetName = product.Item1
    
35.                 .WidgetPrice = product.Item2.ToString("C2")
    
36.                 .WidgetImage = Image.FromFile(ImagePath & product.Item3)
    
37.             End With
    
38.             '// ตั้งค่าตำแหน่งของ UserControl
    
39.             widget.Location = New Point(2, widget.Height * iCol)
    
40.             widget.Size = New Size(271, 74)
    
41.             '// การหารเอาเศษ ผลลัพธ์ 0 คือเลขคู่ ผลลัพธ์ 1 คือเลขคี่
    
42.             If iCol Mod 2 = 0 Then
    
43.                 '// เปลี่ยนสีพื้นหลัง
    
44.                 widget.BackColor = Color.DarkOrange
    
45.                 '// เปลี่ยนสีฟอนต์ (ForeColor)
    
46.                 widget.WidgetPriceForeColor = Color.Yellow
    
47.             Else
    
48.                 widget.BackColor = Color.YellowGreen
    
49.                 widget.WidgetPriceForeColor = Color.White
    
50.             End If
    
51.             '// เพิ่ม User Control ลงไปใน Panel1
    
52.             Panel1.Controls.Add(widget)
    
53. 
    
54.             '// Add click event handler.
    
55.             AddHandler widget.Click, AddressOf Widget_Click
    
56.             AddHandler widget.lblWidgetName.Click, AddressOf Widget_Click
    
57.             AddHandler widget.lblWidgetPrice.Click, AddressOf Widget_Click
    
58.             AddHandler widget.picWidget.Click, AddressOf Widget_Click
    
59.         Next
    
60.     End Sub
    
61. 
    
62.     '// เหตุการณ์ของการกดคลิ๊กเมาส์บน UserControl
    
63.     Private Sub Widget_Click(sender As Object, e As EventArgs)
    
64.         '// กรณีการคลิ๊กในฟอร์มของ UserControl
    
65.         If TypeOf sender Is Widget Then
    
66.             Dim ClickedWidget As Widget = CType(sender, Widget)
    
67.             MessageBox.Show("Product: " & ClickedWidget.WidgetName & vbCrLf & "Price: " & ClickedWidget.WidgetPrice)
    
68. 
    
69.             '// กรณีการคลิ๊กที่ Label และ PictureBox.
    
70.         ElseIf TypeOf sender Is Label Or TypeOf sender Is PictureBox Then
    
71.             Dim ClickedWidget As Control = CType(sender, Control)
    
72.             Dim ParentControl As Widget = CType(ClickedWidget.Parent, Widget)
    
73.             MessageBox.Show("Product: " & ParentControl.WidgetName & vbCrLf & "Price: " & ParentControl.WidgetPrice)
    
74.         End If
    
75.     End Sub
    
76. 
    
77. #Region "FUNCTION"
    
78.     Function MyPath(ByVal AppPath As String) As String
    
79.         '/ Return Value
    
80.         MyPath = AppPath.ToLower.Replace("\bin\debug", "").Replace("\bin\release", "").Replace("\bin\x86\debug", "").Replace("\bin\x86\release", "")
    
81.         '// If not found folder then put the \ (BackSlash) at the end.
    
82.         If Microsoft.VisualBasic.Right(MyPath, 1) <> Chr(92) Then MyPath = MyPath & Chr(92)
    
83.     End Function
    
84. #End Region
    
85. End Class

คัดลอกไปที่คลิปบอร์ด

ดาวน์โหลดโค้ดต้นฉบับ VB.NET (2010) ได้ที่นี่ ...

yusanc

ขอบคุณครับ