[VB.NET] การสร้าง User Control และ Custom Control โปรเจคการสั่งซื้ออาหารเครื่องดื่ม บนจอแบบทัชสกรีน

thongkorn

การสร้าง User Control และ Custom Control โปรเจคการสั่งซื้ออาหารเครื่องดื่ม บนจอแบบทัชสกรีน ...
ครั้งที่แล้วได้แจกโค้ดที่นำหลักการ OOP (Object Oriented Programming) มาอธิบาย กับการใช้ Inherits TabControl หมายถึง Control ที่เราสร้างขึ้นมาใหม่ (FlatTabControl) จะได้รับคุณสมบัติ และพฤติกรรมทั้งหมดของ TabControl มาตรฐานของไมโครซอฟท์มาตั้งต้น แล้วเราก็สามารถ "โมดิฟาย" หรือ "Override" พฤติกรรมบางส่วนได้ด้วย เราจึงเรียก Control ใหม่นี้ว่า Custom Control หรือ Extended Control ...

Custom Control & User Control ...
1. FlatTabControl เป็น Custom Control เพราะสืบทอดมาจาก TabControl (Inherits TabControl) แล้ว Override การวาด (OnPaint) และเพิ่มพฤติกรรมของตัวเอง
2. ucFoodButton เป็น User Control คือการรวม Control หลายๆตัวเข้ามาประกอบร่างกันเพื่อสร้าง Control ขึ้นมาใหม่อีกตัว เพราะภายในประกอบด้วย PictureBox, Label, Panel หลายๆตัวรวมกันเป็นปุ่มสินค้า สาเหตุหลักๆที่ต้องสร้าง User Control ขึ้นมาใหม่ ก็คือ Control ที่มีอยู่ใช้งาน ยังไม่ตอบโจทย์ให้กับตัวเรานั่นเอง

อธิบายการทำงานของ Class FoodItem (แบบคร่าวๆล่ะกัน)
1. Class FoodItem เปรียบเสมือน "แบบฟอร์มเปล่า" หรือ "พิมพ์เขียว"
มันยังไม่เก็บข้อมูลอะไรเลย มันแค่บอกว่า "ถ้าจะมีสินค้าหนึ่งชิ้น มันจะต้องมีช่องให้กรอกอะไรบ้าง" เช่น ช่องรหัส (FoodID), ช่องชื่อ (FoodName), ช่องราคา (PriceCash)
Public Class FoodItem
    Public Property FoodPK As Integer      ' ช่องที่ 1: เก็บตัวเลข
    Public Property FoodID As String       ' ช่องที่ 2: เก็บข้อความ
    ' ... (อื่นๆ)
End Class

2. การเก็บข้อมูล (การสร้าง Object)
แบบฟอร์มเปล่าจะเก็บข้อมูลได้ ก็ต่อเมื่อเรา "พิมพ์ข้อมูลลงไป" หรือในภาษาโปรแกรมเรียกว่าการสร้าง Instance (Object) โดยใช้คำสั่ง New
' การสั่งให้คอมพิวเตอร์จองพื้นที่ในหน่วยความจำเพื่อสร้าง "สินค้า 1 ชิ้น"
Dim myBurger As New FoodItem()  
' การกรอกข้อมูลลงในช่องต่างๆ ของสินค้านั้น
myBurger.FoodPK = 1
myBurger.FoodName = "Classic Chicken"
myBurger.PriceCash = 45.00D

1. ' Class FoodItem เป็น BluePrint หรือแม่แบบสำหรับสร้างวัตถุ (Object) ที่ใช้เก็บข้อมูลสินค้าแต่ละรายการ โดยมี Property ต่างๆ ดังนี้:
   
2. Public Class FoodItem
   
3.     Public Property FoodPK As Integer
   
4.     Public Property FoodID As String
   
5.     Public Property FoodName As String
   
6.     Public Property PriceCash As Decimal
   
7.     Public Property CategoryFK As Integer
   
8.     Public Property PictureFood As String
   
9. End Class

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

การใช้ FoodItem แบบนี้ แทนที่จะส่งข้อมูลทีละตัว เช่น FoodPK, FoodName, PriceCash แต่เราส่งเป็น FoodItem เพียงตัวเดียว ทำให้โค้ดอ่านง่าย ขยายความสามารถในอนาคตได้สะดวก (เช่น เพิ่ม Discount, VatRate, Barcode, StockQty ก็ไม่ต้องเปลี่ยนเมธอดทุกตัว) และยังสอดคล้องกับหลัก OOP เรื่อง Encapsulation คือการรวมข้อมูลที่เกี่ยวข้องไว้ในอ็อบเจ็กต์เดียว

มาดูโค้ดต้นฉบับในฟอร์มหลัก (frmFoodOrder.vb)

1. Imports System.Data
   
2. Imports System.Drawing
   
3. Imports System.IO
   
4. 
   
5. ' ==========================================================
   
6. ' ฟอร์มหลักสำหรับสั่งอาหาร
   
7. ' จัดการโหลดข้อมูลและภาพทั้งหมดที่นี่
   
8. ' รองรับ VB.NET 2010 / .NET Framework 4.0
   
9. ' ==========================================================
   
10. Public Class frmFoodOrder
    
11. 
    
12.     ' ตัวแปรเก็บข้อมูล
    
13.     Private dtCategories As New DataTable()
    
14.     Private dtFoods As New DataTable()
    
15. 
    
16.     ' ประกาศคอนโทรลแท็บแบบกำหนดเอง
    
17.     Dim FlatTabControl1 As New FlatTabControl()
    
18. 
    
19.     ' ตัวแปรเก็บ Path โฟลเดอร์ภาพ เพื่อไม่ต้องเรียกซ้ำๆ
    
20.     Private imgRootPath As String = ""
    
21. 
    
22.     Private Sub frmFoodOrder_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    
23.         ' เตรียมตำแหน่งโฟลเดอร์รูปภาพไว้ก่อน (My Project\Images)
    
24.         imgRootPath = Path.Combine(MyPath(Application.StartupPath), "Images")
    
25. 
    
26.         ' ตั้งค่าคอนโทรลแท็บ
    
27.         With FlatTabControl1
    
28.             .Cursor = Cursors.Hand
    
29.             .Dock = DockStyle.Fill
    
30.             .DrawMode = TabDrawMode.OwnerDrawFixed
    
31.             .Font = New Font("Tahoma", 10.0!, FontStyle.Bold)
    
32.             .ItemSize = New Size(140, 50)
    
33.             .Location = New Point(0, 0)
    
34.             .Name = "FlatTabControl1"
    
35.             .SelectedIndex = 0
    
36.             .Size = New Size(749, 583)
    
37.             .SizeMode = TabSizeMode.Fixed
    
38.             .TabIndex = 0
    
39.             .BackColor = Color.FromArgb(240, 240, 240)
    
40.         End With
    
41.         Me.Controls.Add(FlatTabControl1)
    
42. 
    
43.         ' โหลดข้อมูลตัวอย่าง (DataTable)
    
44.         LoadSampleData()
    
45.         ' การสร้างแท็บตามหมวดหมู่อาหาร/เครื่องดื่ม
    
46.         CreateDynamicTabs()
    
47.     End Sub
    
48. 
    
49.     ' โหลดข้อมูลตัวอย่างลง DataTable เพื่อดัดแปลงนำไปใช้กับระบบฐานข้อมูลได้เลยทันที
    
50.     Private Sub LoadSampleData()
    
51.         Dim culture As System.Globalization.CultureInfo = System.Globalization.CultureInfo.InvariantCulture
    
52. 
    
53.         ' โครงสร้างและข้อมูลหมวดหมู่
    
54.         With dtCategories.Columns
    
55.             .Add("CategoryPK", GetType(Integer))
    
56.             .Add("CategoryName", GetType(String))
    
57.         End With
    
58.         With dtCategories.Rows
    
59.             .Add(1, "รายการทั้งหมด")
    
60.             .Add(2, "เบอเกอร์")
    
61.             .Add(3, "เครื่องดื่ม")
    
62.             .Add(4, "อาหาร")
    
63.             .Add(5, "Soft Drink")
    
64.             .Add(6, "ของหวาน")
    
65.         End With
    
66. 
    
67.         ' โครงสร้างและข้อมูลรายการอาหาร
    
68.         With dtFoods.Columns
    
69.             .Add("FoodPK", GetType(Integer))
    
70.             .Add("FoodID", GetType(String))
    
71.             .Add("FoodName", GetType(String))
    
72.             .Add("PriceCash", GetType(Decimal))
    
73.             .Add("CategoryFK", GetType(Integer))
    
74.             .Add("PictureFood", GetType(String))
    
75.         End With
    
76.         ' ตัวอย่างรายการอาหาร/เครื่องดื่ม
    
77.         With dtFoods.Rows
    
78.             ' ไลเรียงฟิลด์ข้อมูลจาก Database (เพื่อนำไปใช้ในการออกแบบตารางข้อมูล)
    
79.             ' FoodPK, FoodID, FoodName, PriceCash, CategoryFK, PictureFood
    
80.             .Add(1, "FD000001", "Classic Checken", Decimal.Parse("45.00", culture), 2, "BurgerChicken.png")
    
81.             .Add(2, "FD000002", "Mexicana", Decimal.Parse("85.00", culture), 2, "BurgerMexicana.png")
    
82.             .Add(3, "FD000003", "Lemon Shrimp", Decimal.Parse("110.00", culture), 2, "BurgerLemonShrimp.png")
    
83.             .Add(4, "FD000004", "Bacon", Decimal.Parse("90.00", culture), 2, "BurgerBacon.png")
    
84.             .Add(5, "FD000005", "Spicy Shrimp", Decimal.Parse("120.00", culture), 2, "BurgerSpicyShrimp.png")
    
85.             .Add(6, "FD000006", "Tex Supreme", Decimal.Parse("80.00", culture), 2, "BurgerTexSupreme.png")
    
86.             .Add(7, "FD000007", "Fish", Decimal.Parse("100.00", culture), 2, "BurgerFish.png")
    
87.             .Add(8, "FD00008", "Special Meatballs", Decimal.Parse("65.00", culture), 2, "Burger1.png")
    
88.             .Add(9, "FD00009", "Grilled Burgers", Decimal.Parse("45.50", culture), 2, "Burger2.png")
    
89.             .Add(10, "FD000010", "Normal Burgers", Decimal.Parse("25.90", culture), 2, "Burger3.png")
    
90.             .Add(11, "FD000011", "Burgers", Decimal.Parse("33.00", culture), 2, "Burger4.png")
    
91.             .Add(12, "FD000012", "Caramel Pineapple", Decimal.Parse("55.00", culture), 2, "Burger5.png")
    
92.             .Add(13, "FD000013", "Chicken Burger", Decimal.Parse("48.00", culture), 2, "Burger6.png")
    
93.             .Add(14, "FD000014", "ส้มตำเบอเกอร์", Decimal.Parse("999.00", culture), 2, "SomtumBurger.png")
    
94.             .Add(15, "FD000015", "Pepsi Small", Decimal.Parse("20.00", culture), 3, "PepsiCan.png")
    
95.             .Add(16, "FD000016", "Coke Small", Decimal.Parse("20.00", culture), 3, "CocaColaCan.png")
    
96.             .Add(17, "FD000017", "7Up Small", Decimal.Parse("20.00", culture), 3, "7UpCan.png")
    
97.             .Add(18, "FD000018", "มอคค่า", Decimal.Parse("85.00", culture), 3, "Coffee5.png")
    
98.             .Add(19, "FD000019", "อเมริกาโน่", Decimal.Parse("95.00", culture), 3, "Coffee2.png")
    
99.             .Add(20, "FD000020", "เอ็กซเพรสโซ่", Decimal.Parse("115.00", culture), 3, "Coffee7.png")
    
100.             .Add(21, "FD000021", "ชานมไข่มุก", Decimal.Parse("45.00", culture), 3, "Tea1.png")
     
101.             .Add(22, "FD000022", "โอเลี้ยง", Decimal.Parse("195.00", culture), 3, "Coffee4.png")
     
102.             .Add(23, "FD000023", "กาแฟเย็น", Decimal.Parse("950.00", culture), 3, "Coffee6.png")
     
103.             .Add(24, "FD000024", "น้ำดื่ม", Decimal.Parse("40.00", culture), 3, "Water.jpg")
     
104.             .Add(25, "FD000025", "ข้าวไข่เจียวหมูสับ", Decimal.Parse("95.00", culture), 4, "RiceOmelet.jpg")
     
105.             .Add(26, "FD000026", "ข้าวผัดหมู", Decimal.Parse("150.00", culture), 4, "1.jpg")
     
106.             .Add(27, "FD000027", "ข้าวกะเพราหมูสับ ไข่ดาวสุกๆ", Decimal.Parse("1200.00", culture), 4, "2.jpg")
     
107.             .Add(28, "FD000028", "เหล้าเป็ก", Decimal.Parse("99.00", culture), 5, "Pek.png")
     
108.             .Add(29, "FD000029", "ทับทิมกรอบ", Decimal.Parse("250.00", culture), 6, "Tubtimkrob.png")
     
109.             .Add(30, "FD000030", "ขนมชั้น", Decimal.Parse("120.00", culture), 6, "Kanomchun.png")
     
110.             .Add(31, "FD000031", "ลอดช่องน้ำกะทิ", Decimal.Parse("150.00", culture), 6, "LodChong.png")
     
111.         End With
     
112.     End Sub
     
113. 
     
114.     ' สร้างแท็บและปุ่มรายการอาหารแบบไดนามิก
     
115.     Private Sub CreateDynamicTabs()
     
116.         FlatTabControl1.TabPages.Clear()
     
117. 
     
118.         ' วนสร้างแท็บตามหมวดหมู่
     
119.         For Each drCat As DataRow In dtCategories.Rows
     
120.             Dim tabPage As New TabPage(drCat("CategoryName").ToString())
     
121.             tabPage.Padding = New Padding(5)
     
122.             tabPage.BackColor = Color.FromArgb(240, 240, 240)
     
123.             tabPage.ForeColor = Color.Black
     
124. 
     
125.             ' พื้นที่แสดงรายการแบบเลื่อนได้
     
126.             Dim flowPanel As New FlowLayoutPanel()
     
127.             With flowPanel
     
128.                 .Dock = DockStyle.Fill
     
129.                 .AutoScroll = True
     
130.                 .WrapContents = True
     
131.                 .FlowDirection = FlowDirection.LeftToRight
     
132.                 .Padding = New Padding(5)
     
133.                 .BackColor = Color.FromArgb(240, 240, 240)
     
134.             End With
     
135. 
     
136.             ' กรองรายการอาหารตามหมวดหมู่
     
137.             Dim filterRows As DataRow()
     
138.             If CInt(drCat("CategoryPK")) = 1 Then
     
139.                 filterRows = dtFoods.Select()
     
140.             Else
     
141.                 filterRows = dtFoods.Select("CategoryFK = " & drCat("CategoryPK").ToString())
     
142.             End If
     
143. 
     
144.             ' สร้างปุ่มรายการอาหาร
     
145.             ' สร้าง Object FoodItem ชั่วคราวเพื่อส่งให้ ucFoodButton (Class FooItem อยู่ที่ไฟล์ FoodItem.vb)
     
146.             ' การใช้ FoodItem แบบนี้ แทนที่จะส่งข้อมูลทีละตัว เช่น FoodPK, FoodName, PriceCash แต่เราส่งเป็น FoodItem เพียงตัวเดียว
     
147.             ' ทำให้โค้ดอ่านง่าย ขยายความสามารถในอนาคตได้สะดวก (เช่น เพิ่ม Discount, VatRate, Barcode, StockQty ก็ไม่ต้องเปลี่ยนเมธอดทุกตัว)
     
148.             ' และยังสอดคล้องกับหลัก OOP เรื่อง Encapsulation คือการรวมข้อมูลที่เกี่ยวข้องไว้ในอ็อบเจ็กต์เดียว
     
149.             For Each drFood As DataRow In filterRows
     
150.                 ' 1. สร้าง Object ข้อมูลสินค้า
     
151.                 Dim tempFood As New FoodItem() With {
     
152.                     .FoodPK = CInt(drFood("FoodPK")),
     
153.                     .FoodID = drFood("FoodID").ToString(),
     
154.                     .FoodName = drFood("FoodName").ToString(),
     
155.                     .PriceCash = CDec(drFood("PriceCash")),
     
156.                     .CategoryFK = CInt(drFood("CategoryFK")),
     
157.                     .PictureFood = drFood("PictureFood").ToString()
     
158.                 }
     
159. 
     
160.                 ' 2. โหลดรูปภาพที่ฟอร์มหลัก (จัดการทั้งหมดที่นี่)
     
161.                 Dim btnImage As Image = Nothing
     
162.                 Dim targetImgPath As String = Path.Combine(imgRootPath, tempFood.PictureFood)
     
163.                 Dim defaultImgPath As String = Path.Combine(imgRootPath, "BurgerBW.png")
     
164.                 ' ภาพอาหาร/เครื่องดื่ม
     
165.                 If File.Exists(targetImgPath) Then
     
166.                     Using bmp As New Bitmap(targetImgPath)
     
167.                         btnImage = New Bitmap(bmp)
     
168.                     End Using
     
169.                     ' หากไม่พบชื่อไฟล์ภาพ ให้ใช้ภาพ BurgerBW.png แสดงผลแทน
     
170.                 ElseIf File.Exists(defaultImgPath) Then
     
171.                     Using bmp As New Bitmap(defaultImgPath)
     
172.                         btnImage = New Bitmap(bmp)
     
173.                     End Using
     
174.                     ' หากไม่มีไฟล์ภาพ BurgerBW.png ก็ไม่ต้องแสดงผลภาพประกอบ
     
175.                 Else
     
176.                     btnImage = Nothing
     
177.                 End If
     
178. 
     
179.                 ' 3. ส่งทั้งข้อมูลและภาพไปให้ปุ่ม (User Control ชื่อไฟล์ ucFoodButton.vb)
     
180.                 Dim uc As New ucFoodButton()
     
181.                 uc.SetData(tempFood, btnImage)  ' Method SetData อยู่ที่ ucFoodButton.vb
     
182.                 uc.Margin = New Padding(5)
     
183.                 flowPanel.Controls.Add(uc)
     
184.             Next
     
185.             '
     
186.             tabPage.Controls.Add(flowPanel)
     
187.             FlatTabControl1.TabPages.Add(tabPage)
     
188.         Next
     
189.     End Sub
     
190. 
     
191.     ' ปิดโปรแกรมและล้างหน่วยความจำ
     
192.     Private Sub frmFoodOrder_FormClosed(sender As Object, e As FormClosedEventArgs) Handles MyBase.FormClosed
     
193.         Me.Dispose()
     
194.         GC.SuppressFinalize(Me)
     
195.         Application.Exit()
     
196.     End Sub
     
197. 
     
198. End Class

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

โค้ดในสร้างปุ่มคำสั่งแบบ User Control (ucFoodButton.vb)

1. Imports System.Drawing
   
2. Imports System.Drawing.Drawing2D
   
3. 
   
4. Public Class ucFoodButton
   
5. 
   
6.     ' ตัวแปรเก็บข้อมูลสินค้า (Class FooItem อยู่ที่ไฟล์ FoodItem.vb)
   
7.     Private _currentFood As FoodItem
   
8. 
   
9.     ' สีสำหรับการแสดงผลสถานะต่างๆ สำหรับปุ่มคำสั่ง
   
10.     Private ReadOnly _defaultColor As Color = Color.White
    
11.     Private ReadOnly _hoverColor As Color = Color.FromArgb(70, Color.Green)
    
12.     Private ReadOnly _pressColor As Color = Color.FromArgb(120, Color.Orange)
    
13. 
    
14.     ' ประกาศคอนโทรลภายใน
    
15.     Private pnlContainer As Panel
    
16.     Private table As TableLayoutPanel
    
17.     Private picFood As PictureBox
    
18.     Private lblName As Label
    
19.     Private lblPrice As Label
    
20. 
    
21.     Public Sub New()
    
22.         InitializeComponent()
    
23.         ' การตั้งค่าเริ่มต้นของ User Control
    
24.         Me.SetStyle(ControlStyles.ResizeRedraw, True)
    
25.         Me.Size = New Size(130, 160)    ' ขนาดของปุ่มคำสั่ง
    
26.         Me.Cursor = Cursors.Hand
    
27.         Me.BackColor = _defaultColor
    
28. 
    
29.         ' สร้างโครงสร้างคอนโทรลภายใน
    
30.         BuildControl()
    
31.     End Sub
    
32. 
    
33.     ' ปรับขอบโค้งเมื่อมีการปรับขนาด
    
34.     Protected Overrides Sub OnResize(ByVal e As EventArgs)
    
35.         MyBase.OnResize(e)
    
36.         MakeRounded()
    
37.     End Sub
    
38. 
    
39.     ' --- ส่วนของการวาดมุมโค้ง (Rounded Rectangle) ---
    
40.     Private Sub MakeRounded()
    
41.         Dim radius As Integer = 15 ' รัศมีของความโค้ง
    
42.         Dim path As New GraphicsPath()
    
43.         path.AddArc(0, 0, radius, radius, 180, 90)
    
44.         path.AddArc(Me.Width - radius, 0, radius, radius, 270, 90)
    
45.         path.AddArc(Me.Width - radius, Me.Height - radius, radius, radius, 0, 90)
    
46.         path.AddArc(0, Me.Height - radius, radius, radius, 90, 90)
    
47.         path.CloseFigure()
    
48.         Me.Region = New Region(path)
    
49.     End Sub
    
50. 
    
51.     ' สร้างโครงสร้างปุ่ม
    
52.     Private Sub BuildControl()
    
53.         Me.Controls.Clear()
    
54. 
    
55.         ' Panel หลัก
    
56.         pnlContainer = New Panel()
    
57.         With pnlContainer
    
58.             .Dock = DockStyle.Fill
    
59.             .Padding = New Padding(5)
    
60.             .BackColor = Color.White
    
61.         End With
    
62. 
    
63.         ' ตารางจัดวางของ TableLauoutPanel
    
64.         table = New TableLayoutPanel()
    
65.         With table
    
66.             .Dock = DockStyle.Fill
    
67.             .ColumnCount = 1    ' กำหนด 1 หลัก
    
68.             .RowCount = 3         ' กำหนด 3 แถว (แถวแรกใส่ PictureBox, แถวที่ 2 ใส่ Label ชื่ออาหาร/เครื่องดื่ม, แถวที่ 3 ใส่ Label ราคา)
    
69.             .ColumnStyles.Add(New ColumnStyle(SizeType.Percent, 100))   ' Size แบบ Percent ทั้ง Column และ Row
    
70.             .RowStyles.Add(New RowStyle(SizeType.Percent, 70))
    
71.             .RowStyles.Add(New RowStyle(SizeType.Percent, 20))
    
72.             .RowStyles.Add(New RowStyle(SizeType.Percent, 10))
    
73.         End With
    
74. 
    
75.         ' ส่วนแสดงรูปภาพ
    
76.         picFood = New PictureBox()
    
77.         With picFood
    
78.             .Dock = DockStyle.Fill
    
79.             .SizeMode = PictureBoxSizeMode.StretchImage
    
80.             .Margin = New Padding(0)
    
81.             .BackColor = Color.White
    
82.         End With
    
83. 
    
84.         ' ส่วนแสดงชื่อ
    
85.         lblName = New Label()
    
86.         With lblName
    
87.             .Dock = DockStyle.Fill
    
88.             .Font = New Font("Tahoma", 9, FontStyle.Bold)
    
89.             .TextAlign = ContentAlignment.MiddleCenter
    
90.             .AutoEllipsis = True
    
91.             .MaximumSize = New Size(0, 36)
    
92.             .Margin = New Padding(0)
    
93.         End With
    
94. 
    
95.         ' ส่วนแสดงราคา
    
96.         lblPrice = New Label()
    
97.         With lblPrice
    
98.             .Dock = DockStyle.Fill
    
99.             .Font = New Font("Tahoma", 10, FontStyle.Bold)
    
100.             .ForeColor = Color.DarkRed
     
101.             .TextAlign = ContentAlignment.MiddleCenter
     
102.             .Margin = New Padding(0)
     
103.         End With
     
104. 
     
105.         '// ตำแหน่งการวาง Control ใน TableLayoutPanel (table) เพื่อสร้างปุ่มคำสั่ง
     
106.         '+---------------------------+
     
107.         '|                                  |
     
108.         '|         PictureBox          |
     
109.         '|      (StretchImage)       |
     
110.         '|                                  |
     
111.         '+---------------------------+
     
112.         '|      Classic Checker      |
     
113.         '|                                  |
     
114.         '+---------------------------+
     
115.         '|         69.00 ฿              |
     
116.         '+---------------------------+
     
117.         ' จัดวางคอนโทรล
     
118.         table.Controls.Add(picFood, 0, 0)
     
119.         table.Controls.Add(lblName, 0, 1)
     
120.         table.Controls.Add(lblPrice, 0, 2)
     
121. 
     
122.         ' วาง TableLayoutPanel เอาไวใน Panel
     
123.         pnlContainer.Controls.Add(table)
     
124.         ' เอา Panel ไปวางไว้ในฟอร์ม
     
125.         Me.Controls.Add(pnlContainer)
     
126. 
     
127.         ' ผูกเหตุการณ์เมาส์ (Add Event Handler)
     
128.         RegisterEvents(Me)
     
129.         RegisterEvents(pnlContainer)
     
130.         RegisterEvents(table)
     
131.         RegisterEvents(picFood)
     
132.         RegisterEvents(lblName)
     
133.         RegisterEvents(lblPrice)
     
134.     End Sub
     
135. 
     
136.     ' ผูกเหตุการณ์เมาส์ให้กับคอนโทรลทั้งหมด
     
137.     Private Sub RegisterEvents(ctrl As Control)
     
138.         AddHandler ctrl.MouseEnter, AddressOf Control_MouseEnter
     
139.         AddHandler ctrl.MouseLeave, AddressOf Control_MouseLeave
     
140.         AddHandler ctrl.MouseDown, AddressOf Control_MouseDown
     
141.         AddHandler ctrl.MouseUp, AddressOf Control_MouseUp
     
142.         AddHandler ctrl.Click, AddressOf Control_Click
     
143.     End Sub
     
144. 
     
145.     ' เปลี่ยนสีเมื่อเมาส์ชี้
     
146.     Private Sub Control_MouseEnter(sender As Object, e As EventArgs)
     
147.         SetHighlight(_hoverColor)
     
148.     End Sub
     
149. 
     
150.     ' คืนสีเดิมเมื่อเมาส์ออก
     
151.     Private Sub Control_MouseLeave(sender As Object, e As EventArgs)
     
152.         SetHighlight(_defaultColor)
     
153.     End Sub
     
154. 
     
155.     ' เปลี่ยนสีเมื่อกดเมาส์
     
156.     Private Sub Control_MouseDown(sender As Object, e As MouseEventArgs)
     
157.         SetHighlight(_pressColor)
     
158.     End Sub
     
159. 
     
160.     ' เปลี่ยนสีเมื่อปล่อยเมาส์
     
161.     Private Sub Control_MouseUp(sender As Object, e As MouseEventArgs)
     
162.         SetHighlight(_hoverColor)
     
163.     End Sub
     
164. 
     
165.     ' ตั้งค่าสีพื้นหลัง
     
166.     Private Sub SetHighlight(ByVal clr As Color)
     
167.         pnlContainer.BackColor = clr
     
168.         table.BackColor = clr
     
169.         lblName.BackColor = Color.Transparent
     
170.         lblPrice.BackColor = Color.Transparent
     
171.         picFood.BackColor = Color.Transparent
     
172.     End Sub
     
173. 
     
174.     ' เมื่อมีการกดปุ่มคำสั่ง Button เพื่อแสดงรายการอาหาร/เครื่องดื่ม
     
175.     ' ส่วนนี้จะถูกส่งต่อไปแสดงผลยังตารางกริด เพื่อแจ้งยอดการสั่งซื้อ
     
176.     Private Sub Control_Click(sender As Object, e As EventArgs)
     
177.         If _currentFood IsNot Nothing Then
     
178.             ' แสดง MessageBox เมื่อ {0} = vbCrLf หรือ NewLine
     
179.             Dim msg As String = String.Format(
     
180.                 "===== รายละเอียดสินค้า ====={0}{0}" & _
     
181.                 "FoodPK : {1}{0}" & _
     
182.                 "FoodID : " & vbTab & "{2}{0}" & _
     
183.                 "Name : " & vbTab & "{3}{0}" & _
     
184.                 "Price : " & vbTab & "{4:0.00} บาท{0}{0}",
     
185.                 Environment.NewLine,
     
186.                 _currentFood.FoodPK,
     
187.                 _currentFood.FoodID,
     
188.                 _currentFood.FoodName,
     
189.                 _currentFood.PriceCash)
     
190. 
     
191.             MessageBox.Show(msg, "คำสั่งในการสั่งซื้อ", MessageBoxButtons.OK, MessageBoxIcon.Information)
     
192.         End If
     
193.     End Sub
     
194. 
     
195.     ' ==========================================================
     
196.     ' เมธอดรับข้อมูลและภาพจากภายนอก (ฟอร์มหลัก)
     
197.     ' รับแค่ข้อมูลที่ต้องแสดง ไม่ต้องไปค้นหาไฟล์เอง
     
198.     ' ==========================================================
     
199.     Public Sub SetData(food As FoodItem, foodImage As Image)
     
200.         _currentFood = food
     
201. 
     
202.         lblName.Text = food.FoodName
     
203.         lblPrice.Text = food.PriceCash.ToString("N2") & " ฿"
     
204. 
     
205.         ' กำหนดภาพที่ส่งมาจากฟอร์มหลักโดยตรง
     
206.         picFood.Image = foodImage
     
207.     End Sub
     
208. 
     
209. End Class

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

โค้ดในการสร้าง Custom Control หรือ FlatTabControl ที่สืบทอดมาจาก TabControl มาตรฐาน (FlatTabControl.vb)
ดูรายละเอียดได้ที่นี่ ...

1. Imports System.Drawing.Drawing2D
   
2. 
   
3. Public Class FlatTabControl
   
4.     ' Inherits หมายถึง Control -> TabControl -> FlatTabControl
   
5.     ' การที่ใช้ Inherits TabControl แทนที่จะใช้ Inherits UserControl แปลว่า ไม่ได้สร้างของใหม่จากศูนย์
   
6.     ' แต่กำลัง "ดัดแปลง/ตกแต่ง" ของเดิมที่มีอยู่แล้วใน .NET Framework
   
7.     Inherits TabControl
   
8.     ' Custom Control หรือ Extended Control คือการสืบทอดจาก Control มาตรฐาน
   
9.     ' FlatTabControl ก็คือ TabControl ตัวหนึ่งนั่นแหละ แต่มีการเปลี่ยนแปลงคุณสมบัติ เช่น รูปร่าง สี ฯลฯ ให้เป็นไปตามที่เราต้องการ ดังนี้
   
10.     ' ลากลง Form ได้
    
11.     ' มี Properties เดิมทั้งหมด
    
12.     ' มี Events เดิมทั้งหมด
    
13.     ' มี TabPages เดิมทั้งหมด
    
14.     ' ==================================================================================
    
15.     ' | หลัก OOP                | ใน FlatTabControl
    
16.     ' | **Inheritance**      | Inherits TabControl ทำให้ใช้งานได้ทุกความสามารถของ TabControl มาใช้งานทันที (ไม่ต้องเขียนโค้ดใหม่)
    
17.     ' | **Encapsulation**   | เก็บสถานะ เช่น HoverIndex เป็น Private และเปิดเผยเฉพาะสิ่งที่ผู้ใช้ Control ใช้งาน เช่น FlatTabControl1.SelectedIndex
    
18.     ' | **Polymorphism**  | Overrides OnPaint, OnMouseMove, OnMouseLeave ใช้ชื่อ Method เดิม แต่เปลี่ยนพฤติกรรมเดิมของ TabControl
    
19.     ' | **Abstraction**      | ผู้ใช้ FlatTabControl ไม่ต้องรู้รายละเอียดการวาดกราฟิกหรือการจัดการเมาส์ เพียงลาก Control ไปใช้เหมือน TabControl ปกติ
    
20.     ' ==================================================================================
    
21. 
    
22.     ' Encapsulation คือ ซ่อนข้อมูลภายใน
    
23.     ' ผู้ใช้ FlatTabControl จะไม่รู้เลยว่ามี HoverIndex เพราะมี Private ซ่อนเอาไว้
    
24.     Private HoverIndex As Integer = -1
    
25. 
    
26.     Public Sub New()
    
27.         ' เพื่อให้ System ตั้งค่าพื้นฐาน
    
28.         MyBase.New()
    
29. 
    
30.         ' Abstraction (การดูดซับ) ใช้ในการสร้าง Interface
    
31.         Me.SetStyle(ControlStyles.AllPaintingInWmPaint _
    
32.                     Or ControlStyles.OptimizedDoubleBuffer _
    
33.                     Or ControlStyles.ResizeRedraw _
    
34.                     Or ControlStyles.UserPaint, True)
    
35. 
    
36.         Me.DrawMode = TabDrawMode.OwnerDrawFixed
    
37.         Me.SizeMode = TabSizeMode.Fixed
    
38.         Me.ItemSize = New Size(140, 50)
    
39.         Me.Font = New Font("Tahoma", 10, FontStyle.Bold)
    
40.     End Sub
    
41. 
    
42.     ' Overrides หมายถึงว่ามีของเดิมใน Tab Control อยู่แล้ว แต่ขอแก้ไขใหม่ (หรือเรียกของ Microsoft มาก่อน แล้วค่อยมาทำของเราอีกที)
    
43.     ' หรือกล่าวแบบสั้นๆ คือ การที่คลาสลูก เขียนทับพฤติกรรมของคลาสแม่
    
44.     Protected Overrides Sub OnMouseMove(e As MouseEventArgs)
    
45.         ' ระบบของ Microsoft อาจจะไม่ทำงาน เราจึงต้องสั่ง MyBase.OnMouseMove(e) ดักเอาไว้ก่อน
    
46.         MyBase.OnMouseMove(e)
    
47.         HoverIndex = -1
    
48.         For i As Integer = 0 To Me.TabPages.Count - 1
    
49.             If Me.GetTabRect(i).Contains(e.Location) Then
    
50.                 HoverIndex = i
    
51.                 Exit For
    
52.             End If
    
53.         Next
    
54.         Me.Invalidate()
    
55.     End Sub
    
56. 
    
57.     Protected Overrides Sub OnMouseLeave(e As EventArgs)
    
58.         MyBase.OnMouseLeave(e)
    
59.         HoverIndex = -1
    
60.         Me.Invalidate()
    
61.     End Sub
    
62. 
    
63.     ' Encapsulation (การห่อหุ้ม) แม้จะเป็น Custom Control แต่เรายังคงซ่อนรายละเอียดการวาดภาพที่ซับซ้อนไว้ภายในคลาส
    
64.     ' ตัวแปร HoverIndex, ฟังก์ชัน RoundRect, การคำนวณสีภายใน OnPaint ถูกห่อหุ้มไว้
    
65.     ' ผู้ใช้งานภายนอก (คนเอา Control ไปใช้) ไม่ต้องรู้ ว่ามันวาดยังไง
    
66.     ' เขาจะแค่เห็นว่า Control มี Property SelectedIndex หรือ TabPages ให้ใช้งานเหมือนเดิม
    
67.     Protected Overrides Sub OnPaint(e As PaintEventArgs)
    
68.         e.Graphics.Clear(Color.White)
    
69.         e.Graphics.SmoothingMode = SmoothingMode.AntiAlias
    
70.         '=========================
    
71.         ' วาดแท็บ
    
72.         '=========================
    
73.         For i As Integer = 0 To Me.TabPages.Count - 1
    
74.             Dim r As Rectangle = Me.GetTabRect(i)
    
75.             r.Inflate(-3, -3)
    
76.             Dim back As Color
    
77.             Dim fore As Color
    
78.             If i = Me.SelectedIndex Then
    
79.                 back = Color.FromArgb(25, 118, 210)
    
80.                 fore = Color.White
    
81.             ElseIf i = HoverIndex Then
    
82.                 back = Color.Gainsboro
    
83.                 fore = Color.Black
    
84.             Else
    
85.                 back = Color.FromArgb(45, 45, 48)
    
86.                 fore = Color.WhiteSmoke
    
87.             End If
    
88. 
    
89.             ' เมื่อออกจากบล็อก Using จะเรียก Dispose() ทันที (แม้จะเกิด Exception ก็ตาม)
    
90.             ' ถ้าสร้างทิ้งไว้ไม่ Dispose พอวน Loop หลายๆ รอบ (หรือเปิดปิด Tab บ่อยๆ) จะทำให้เกิด Memory Leak
    
91.             ' และอาจทำให้โปรแกรมค้างหรือแสดงผลผิดเพี้ยนได้
    
92.             Using gp As GraphicsPath = RoundRect(r, 8)   ' <------ สร้าง GraphicsPath
    
93.                 Using br As New SolidBrush(back)          ' <------ สร้าง Brush (ซ้อนกัน)
    
94.                     e.Graphics.FillPath(br, gp)
    
95.                 End Using
    
96.                 Using pn As New Pen(Color.FromArgb(90, 90, 90))   ' <------ สร้าง Pen
    
97.                     e.Graphics.DrawPath(pn, gp)
    
98.                 End Using
    
99.             End Using
    
100.             TextRenderer.DrawText( _
     
101.                 e.Graphics, _
     
102.                 Me.TabPages(i).Text, _
     
103.                 Me.Font, _
     
104.                 r, _
     
105.                 fore, _
     
106.                 TextFormatFlags.HorizontalCenter Or _
     
107.                 TextFormatFlags.VerticalCenter)
     
108.         Next
     
109.         '=========================
     
110.         ' พื้นหลังของ Page
     
111.         '=========================
     
112.         Dim PageRect As Rectangle
     
113.         PageRect = Me.DisplayRectangle
     
114.         PageRect.Inflate(1, 1)
     
115.         Using br As New SolidBrush(Color.White)
     
116.             e.Graphics.FillRectangle(br, PageRect)
     
117.         End Using
     
118.     End Sub
     
119. 
     
120.     '=========================
     
121.     ' วาดเส้นโค้ง
     
122.     '=========================
     
123.     Private Function RoundRect(r As Rectangle, radius As Integer) As GraphicsPath
     
124.         Dim gp As New GraphicsPath
     
125.         gp.AddArc(r.Left, r.Top, radius, radius, 180, 90)
     
126.         gp.AddArc(r.Right - radius, r.Top, radius, radius, 270, 90)
     
127.         gp.AddArc(r.Right - radius, r.Bottom - radius, radius, radius, 0, 90)
     
128.         gp.AddArc(r.Left, r.Bottom - radius, radius, radius, 90, 90)
     
129.         gp.CloseFigure()
     
130.         Return gp
     
131.     End Function
     
132. 
     
133. End Class

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

Class ในการจัดเก็บข้อมูลอาหารหรือเครื่องดื่ม (FoodItem.vb)

1. ' Class FoodItem เป็น BluePrint หรือแม่แบบสำหรับสร้างวัตถุ (Object) ที่ใช้เก็บข้อมูลสินค้าแต่ละรายการ โดยมี Property ต่างๆ ดังนี้:
   
2. Public Class FoodItem
   
3.     Public Property FoodPK As Integer
   
4.     Public Property FoodID As String
   
5.     Public Property FoodName As String
   
6.     Public Property PriceCash As Decimal
   
7.     Public Property CategoryFK As Integer
   
8.     Public Property PictureFood As String
   
9. End Class

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

ฟังค์ชั่นเกี่ยวกับการกำหนดพาธ (modFunction.vb)

1. Module modFunction
   
2.     ' ==========================================================
   
3.     ' ฟังก์ชัน MyPath ตามที่กำหนด
   
4.     ' ==========================================================
   
5.     Public Function MyPath(ByVal AppPath As String) As String
   
6.         ' แทนที่ path ของ bin ต่างๆ ให้กลับไปที่ root folder ของโปรเจกต์
   
7.         Dim resultPath As String = AppPath.ToLower.Replace("\bin\debug", "") _
   
8.                                           .Replace("\bin\release", "") _
   
9.                                           .Replace("\bin\x86\debug", "")
   
10. 
    
11.         ' ถ้าไม่มี \ (BackSlash) ต่อท้าย ให้เติมเข้าไป
    
12.         If Not resultPath.EndsWith("") Then resultPath = resultPath & ""
    
13. 
    
14.         Return resultPath
    
15.     End Function
    
16. 
    
17. End Module

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

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