[VB.NET] การประยุกต์ใช้งาน User Control เพื่อแสดงผลปุ่มรายการสินค้า

thongkorn

ต่อจากตอนที่แล้วใน การสร้าง User Control แบบพื้นฐานขึ้นมาใช้งานเอง คราวนี้จะนำมาใช้งานจริงๆกันล่ะครับ (ให้ดูวิธีการสร้าง User Control ได้จาก Youtube)


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

1. Public Class Widget
   
2.     '// เพิ่ม Properties สำหรับตั้งค่ารายการต่างๆ
   
3.     '// ชื่อสินค้า
   
4.     Public Property WidgetName As String
   
5.         Get
   
6.             Return lblWidgetName.Text
   
7.         End Get
   
8.         Set(value As String)
   
9.             lblWidgetName.Text = value
   
10.         End Set
    
11.     End Property
    
12. 
    
13.     '// สีฟอนต์ Label ชื่อสินค้า
    
14.     Public Property WidgetNameForeColor As Color
    
15.         Get
    
16.             Return lblWidgetName.ForeColor
    
17.         End Get
    
18.         Set(value As Color)
    
19.             lblWidgetName.ForeColor = value
    
20.         End Set
    
21.     End Property
    
22. 
    
23.     '// สีแบ็คกราวด์ Label ชื่อสินค้า
    
24.     Public Property WidgetNameBackColor As Color
    
25.         Get
    
26.             Return lblWidgetName.BackColor
    
27.         End Get
    
28.         Set(value As Color)
    
29.             lblWidgetName.BackColor = value
    
30.         End Set
    
31.     End Property
    
32. 
    
33.     '// Label ราคาสินค้า
    
34.     Public Property WidgetPrice As String
    
35.         Get
    
36.             Return lblWidgetPrice.Text
    
37.         End Get
    
38.         Set(value As String)
    
39.             lblWidgetPrice.Text = value
    
40.         End Set
    
41.     End Property
    
42. 
    
43.     '// สีฟอนต์ Label ราคาสินค้า
    
44.     Public Property WidgetPriceForeColor As Color
    
45.         Get
    
46.             Return lblWidgetPrice.ForeColor
    
47.         End Get
    
48.         Set(value As Color)
    
49.             lblWidgetPrice.ForeColor = value
    
50.         End Set
    
51.     End Property
    
52. 
    
53.     '// สีแบ็คกราวด์ Label ราคาสินค้า
    
54.     Public Property WidgetPriceBackColor As Color
    
55.         Get
    
56.             Return lblWidgetPrice.BackColor
    
57.         End Get
    
58.         Set(value As Color)
    
59.             lblWidgetPrice.BackColor = value
    
60.         End Set
    
61.     End Property
    
62. 
    
63.     '// ตัวอักษรปุ่มคำสั่ง
    
64.     Public Property WidgetButtonText As String
    
65.         Get
    
66.             Return btnWidgetName.Text
    
67.         End Get
    
68.         Set(value As String)
    
69.             btnWidgetName.Text = value
    
70.         End Set
    
71.     End Property
    
72. 
    
73.     '// แสดงผลรูปภาพบนปุ่มคำสั่ง (Button)
    
74.     Public Property WidgetButtonImage As Image
    
75.         Get
    
76.             Return btnWidgetName.BackgroundImage
    
77.         End Get
    
78.         Set(value As Image)
    
79.             btnWidgetName.BackgroundImage = value
    
80.             btnWidgetName.BackgroundImageLayout = ImageLayout.Stretch
    
81.         End Set
    
82.     End Property
    
83. 
    
84. End Class

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

มาดูโค้ดฉบับเต็มกันเถอะ ...

1. Public Class frmFoodDrinkUserControl
   
2. 
   
3.     '// S T A R T - H E R E //
   
4.     Private Sub frmFoodDrinkUserControl_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
   
5.         Call CreateUserControl()
   
6.     End Sub
   
7. 
   
8.     Sub CreateUserControl()
   
9.         '// ข้อมูลรายการสินค้า (ID, ชื่อสินค้า, ราคาสินค้า, ชื่อไฟล์รูปภาพ)
   
10.         Dim products As List(Of Tuple(Of String, String, String, String)) = New List(Of Tuple(Of String, String, String, String)) From {
    
11.             Tuple.Create("01", "กาแฟร้อน", "50.00", "Coffee.jpg"),
    
12.             Tuple.Create("02", "กาแฟเย็น", "60.00", "Coffee4.png"),
    
13.             Tuple.Create("03", "คาปูชิโน่", "75.00", "Cappuccino.jpg"),
    
14.             Tuple.Create("04", "คาปูชิโน่ - ลาเต้", "80.00", "CappuccinoLatte.jpg"),
    
15.             Tuple.Create("05", "เอ็กซ์เพรสโซ่", "90.00", "Expresso.jpg"),
    
16.             Tuple.Create("11", "Classic Chicken", "20.00", "BurgerChicken.png"),
    
17.             Tuple.Create("12", "Mexicana", "25.00", "BurgerMexicana.png"),
    
18.             Tuple.Create("13", "Lemon Shrimp", "30.00", "BurgerLemonShrimp.png"),
    
19.             Tuple.Create("14", "Bacon", "40.00", "BurgerBacon.png"),
    
20.             Tuple.Create("15", "Spicy Shrimp", "45.00", "BurgerSpicyShrimp.png"),
    
21.             Tuple.Create("16", "Tex Supreme", "50.00", "BurgerTexSupreme.png"),
    
22.             Tuple.Create("17", "Fish", "55.00", "BurgerFish.png"),
    
23.             Tuple.Create("18", "ส้มตำเบอเกอร์", "155.00", "SomtumBurger.png"),
    
24.             Tuple.Create("21", "Pepsi Can", "20.00", "PepsiCan.png"),
    
25.             Tuple.Create("22", "Coke Can", "20.00", "CokeCan.png"),
    
26.             Tuple.Create("23", "7Up Can", "20.00", "7upCan.png"),
    
27.             Tuple.Create("24", "Pepsi 2 ลิตร", "50.00", "Pepsi2L.jpg"),
    
28.             Tuple.Create("25", "Coke 2 ลิตร", "50.00", "Coke2L.jpg"),
    
29.             Tuple.Create("26", "น้ำเปล่า", "15.00", "Water.jpg"),
    
30.             Tuple.Create("41", "วิสกี้ (เพียว)", "100.00", "Whisky.jpg"),
    
31.             Tuple.Create("42", "เหล้าขาว (เป๊ก)", "40.00", "Pek.png"),
    
32.             Tuple.Create("43", "ม้ากระทืบโรง (เป๊ก)", "50.00", "Horse.jpg"),
    
33.             Tuple.Create("44", "เบียร์สิงห์ (กระป๋อง)", "80.00", "SinghaCan.jpg"),
    
34.             Tuple.Create("45", "เบียร์ลีโอ (กระป๋อง)", "70.00", "LeoCan.jpg"),
    
35.             Tuple.Create("46", "เบียร์ช้าง (กระป๋อง)", "70.00", "ChangCan.jpg"),
    
36.             Tuple.Create("47", "Spy Wine Cooler", "50.00", "Spy.jpg"),
    
37.             Tuple.Create("48", "โซจู (สตรอเบอรี่)", "90.00", "Soju.jpg")
    
38.         }
    
39.         '// กำหนดจำนวนหลักที่ต้องการ
    
40.         Dim columns As Integer = 3
    
41.         '// Size and spacing of UserControl.
    
42.         Dim controlWidth As Integer = 140   '// ความกว้าง
    
43.         Dim controlHeight As Integer = 207  '// ความสูง
    
44.         Dim spacing As Integer = 1  '// ระยะรอยต่อ
    
45.         '// สร้าง TabControl แบบไดนามิค
    
46.         Dim tabControl As New TabControl()
    
47.         With tabControl
    
48.             .Size = New Size(columns * controlWidth + 31, Me.ClientSize.Height)
    
49.             .Location = New Point(4, 1)
    
50.             '// ตั้งค่า Anchor สำหรับ TabControl
    
51.             .Anchor = AnchorStyles.Top Or AnchorStyles.Bottom Or AnchorStyles.Left
    
52.             .SizeMode = TabSizeMode.FillToRight
    
53.             .Font = New Font("Tahoma", 11, FontStyle.Bold)
    
54.         End With
    
55.         '// เพิ่ม TabControl ลงใน Form
    
56.         Me.Controls.Add(tabControl)
    
57. 
    
58.         '// เพิ่ม TabPage หนึ่งหน้า
    
59.         Dim tabPageMain As New TabPage("รายการสินค้า")
    
60.         tabControl.TabPages.Add(tabPageMain)
    
61.         '// สร้าง Panel ภายใน TabPage
    
62.         Dim panel1 As New Panel()
    
63.         With panel1
    
64.             .Location = New System.Drawing.Point(1, 1)
    
65.             .Size = New System.Drawing.Size(tabControl.Width - 10, tabControl.Height - 30)
    
66.             .BackColor = Color.Moccasin
    
67.             .AutoScroll = True
    
68.             .Anchor = AnchorStyles.Bottom + AnchorStyles.Top
    
69.         End With
    
70.         '// เพิ่ม Panel ลงใน TabPage
    
71.         tabPageMain.Controls.Add(panel1)
    
72. 
    
73.         '// วางรายการสินค้าแต่ละรายการบนฟอร์ม (อยู่ภายใน Panel1)
    
74.         For iCol As Integer = 0 To products.Count - 1
    
75.             Dim product As Tuple(Of String, String, String, String) = products(iCol)
    
76.             '// Instance Name ของ UserControl (Widget)
    
77.             Dim widget As New Widget
    
78.             Dim ImagePath As String = MyPath(Application.StartupPath & "Picture")
    
79.             '// ตั้งค่ารายการสินค้าตามข้อมูลตัวอย่าง.
    
80.             With widget
    
81.                 .WidgetName = product.Item2.ToString
    
82.                 .WidgetPrice = product.Item3.ToString
    
83.                 '// แสดงผลภาพลงบนปุ่ม
    
84.                 Dim imgFile As Image = Image.FromFile(ImagePath & product.Item4)
    
85.                 .WidgetButtonImage = imgFile
    
86.                 .WidgetButtonText = product.Item1
    
87.             End With
    
88.             '// Calculate row and column.
    
89.             Dim row As Integer = iCol \ columns '\\ การหารตัดเศษ
    
90.             Dim column As Integer = iCol Mod columns    '\\ การหารเอาเศษ
    
91.             '// ตั้งค่าตำแหน่งและขนาดของ UserControl
    
92.             widget.Location = New Point(column * (controlWidth + spacing), row * (controlHeight + spacing))
    
93.             widget.Size = New Size(controlWidth, controlHeight)
    
94.             '// การหารเอาเศษด้วย 2 ผลลัพธ์ 0 คือเลขคู่ ผลลัพธ์ 1 คือเลขคี่
    
95.             '// เปลี่ยนสีฟอนต์ (ForeColor)
    
96.             If iCol Mod 2 = 0 Then
    
97.                 widget.WidgetPriceForeColor = Color.Yellow
    
98.             Else
    
99.                 widget.WidgetPriceForeColor = Color.White
    
100.             End If
     
101.             '// เพิ่มเติม: การสลับสีพื้นหลังของ Label 2 ตัว.
     
102.             If (row Mod 2) = 0 Then
     
103.                 'widget.WidgetNameBackColor = Color.SeaGreen
     
104.                 'widget.WidgetPriceBackColor = Color.Orange
     
105.             Else
     
106.                 'widget.WidgetNameBackColor = Color.Orange
     
107.                 'widget.WidgetPriceBackColor = Color.SeaGreen
     
108.             End If
     
109.             '// เพิ่ม User Control ลงไปใน Panel1
     
110.             panel1.Controls.Add(widget)
     
111. 
     
112.             '// Add click event handler.
     
113.             AddHandler widget.btnWidgetName.Click, AddressOf WidgetName_Click
     
114.         Next
     
115.     End Sub
     
116. 
     
117.     Private Sub WidgetName_Click(sender As Object, e As EventArgs)
     
118.         '// รับ Control ที่ถูกคลิก
     
119.         Dim ClickedWidget As Control = CType(sender, Control)
     
120.         '// รับ UserControl ที่เป็นเจ้าของปุ่มนั้น
     
121.         Dim ParentControl As Widget = CType(ClickedWidget.Parent, Widget)
     
122.         '// แสดงข้อความที่มีชื่อและราคาสินค้า
     
123.         MessageBox.Show("ID : " & ParentControl.btnWidgetName.Text & vbCrLf & "Product : " & ParentControl.WidgetName & vbCrLf & "Price : " & ParentControl.WidgetPrice)
     
124.     End Sub
     
125. 
     
126. #Region "FUNCTION"
     
127.     Function MyPath(ByVal AppPath As String) As String
     
128.         '/ Return Value
     
129.         MyPath = AppPath.ToLower.Replace("\bin\debug", "").Replace("\bin\release", "").Replace("\bin\x86\debug", "").Replace("\bin\x86\release", "")
     
130.         '// If not found folder then put the \ (BackSlash) at the end.
     
131.         If Microsoft.VisualBasic.Right(MyPath, 1) <> Chr(92) Then MyPath = MyPath & Chr(92)
     
132.     End Function
     
133. #End Region
     
134. End Class

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

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