[VB.NET] การสร้าง FlatTabControl ในแบบ Custom Control (OOP)

thongkorn

การนำ FlatTabControl ไปใช้งาน เราไม่จำเป็นต้อง Build ก็ได้ แต่ใช้การเขียนโค้ด VB.NET ในแบบ Run Time (รันโปรแกรมถึงจะเห็นผลลัพธ์ของการทำงาน) เพื่อสร้าง FlatTabControl ขึ้นมาแบบไดนามิค ...

ตัวอย่างการเขียนโค้ดสร้าง FlatTabControl ขึ้นมาแบบ Run Time ...

1.         ' ประกาศและสร้าง Object ของ FlatTabControl1
   
2.         Dim FlatTabControl1 As New FlatTabControl()
   
3.         ' กำหนดค่า Properties ต่างๆ ในแบบ Run Time (Dynamic)
   
4.         With FlatTabControl1
   
5.             .Cursor = Cursors.Hand
   
6.             .Dock = DockStyle.Fill
   
7.             .DrawMode = TabDrawMode.OwnerDrawFixed
   
8.             .Font = New Font("Tahoma", 10.0!, FontStyle.Bold)
   
9.             .ItemSize = New Size(140, 50)
   
10.             .Location = New Point(0, 0)
    
11.             .Name = "FlatTabControl1"
    
12.             .SelectedIndex = 0
    
13.             .Size = New Size(749, 583)
    
14.             .SizeMode = TabSizeMode.Fixed
    
15.             .TabIndex = 0
    
16.             ' ====== กำหนดสีพื้นหลัง ======
    
17.             '.BackColor = Color.FromArgb(255, 255, 255) ' หรือสีอื่นที่ต้องการ เช่น Color.White
    
18.             ' สีเทาอ่อน
    
19.             .BackColor = Color.FromArgb(240, 240, 240)
    
20.             ' สีขาว
    
21.             '.BackColor = Color.White
    
22.         End With
    
23.         Me.Controls.Add(FlatTabControl1)
    

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

OOP ย่อมาจาก Object-Oriented Programming หรือในภาษาไทยเรียกว่า "การเขียนโปรแกรมเชิงวัตถุ" เป็นแนวคิดในการออกแบบและพัฒนาซอฟต์แวร์โดยมองทุกอย่างในระบบให้เป็น "วัตถุ (Object)" ซึ่งมีคุณสมบัติและพฤติกรรมในตัวเอง ช่วยให้จัดระเบียบโค้ดได้ง่าย นำโค้ดกลับมาใช้ใหม่ได้สะดวก และดูแลรักษาระบบใหญ่ๆได้ดีขึ้น

วันนี้แอดมินจะมาอธิบายถึงการสร้าง FlatTabControl โดยใช้การสืบทอดคุณสมบัติ (Inheritance) มาจาก TabControl มาตรฐานของไมโครซอฟท์ ซึ่งจะต้องใช้ความรู้พื้นฐานของ OOP เข้ามาเกี่ยวข้อง จุดประสงค์ในการสร้าง FlatTabControl ขึ้นมา นั่นคือ เราไม่ต้องมาสร้าง Control ใหม่ตั้งแต่ศูนย์ แต่บอกคอมไพเลอร์ว่า FlatTabControl ก็คือ TabControl รุ่นหนึ่ง โดยใช้คำสั่ง Inherits TabControl ทำให้ได้คุณสมบัติทั้งหมดของ TabControl มาตรฐานมาโดยอัตโนมัติ: มีแท็บ, มี TabPages, มีคุณสมบัติ SelectedIndex, ItemSize และอื่นๆ อีกมากมาย แต่เราเขียนโค้ดทับ/เพิ่มเติม เพื่อเปลี่ยนพฤติกรรมที่ไม่พอใจหรือต้องการสไตล์ใหม่

สรุปหลักการ OOP ที่เกี่ยวข้อง

Inheritance
การใช้ Inherits TabControl → หมายถึง Control ที่เราสร้าง (FlatTabControl) จะได้รับคุณสมบัติและพฤติกรรมทั้งหมดของ TabControl มาตั้งต้น แล้วเราสามารถ "โมดิฟาย" หรือ "Override" พฤติกรรมบางส่วนได้เอง

Polymorphism  
การใช้ Override เมธอด เช่น OnPaint, OnMouseMove, OnMouseLeave ทำให้พฤติกรรมการวาดและการตอบสนองต่อเมาส์เปลี่ยนไปตามที่เรากำหนดเอง

Encapsulation  
เก็บสถานะ เช่น HoverIndex เป็น Private และเปิดเผยเฉพาะสิ่งที่ผู้ใช้ Control ใช้งาน เช่น FlatTabControl1.SelectedIndex

Abstraction
ผู้ใช้ FlatTabControl ไม่ต้องรู้รายละเอียดการวาดกราฟิกหรือการจัดการเมาส์ เพียงลาก Control ไปใช้เหมือน TabControl ปกติ

การทำงานของโค้ด
1. Constructor (New)
- กำหนด Style ให้ Control ใช้ Double Buffer, UserPaint → เพื่อให้วาดเองได้ลื่นไหล
- กำหนด DrawMode = OwnerDrawFixed → คุณเป็นคนวาดแท็บเองทั้งหมด
- กำหนด ItemSize, Font, Cursor → ปรับรูปลักษณ์แท็บ

2. OnMouseMove / OnMouseLeave
- ตรวจสอบว่าเมาส์อยู่บนแท็บไหน → เก็บค่าไว้ใน HoverIndex
- เรียก Invalidate() เพื่อบังคับให้ Control วาดใหม่

3. OnPaint
- ล้างพื้นหลังด้วยสีขาว
- วาดแท็บทีละตัว โดยเลือกสีตามสถานะ (Selected, Hover, Normal)
- ใช้ RoundRect เพื่อสร้างกรอบโค้งมน
- วาดข้อความด้วย TextRenderer.DrawText
- วาดพื้นหลังของ Page ด้วยสีขาว

4. RoundRect Function
- สร้าง GraphicsPath ที่มีมุมโค้งมน → ใช้ในการวาดแท็บให้ดู Flat + Modern

สรุป
การสร้าง Custom Control โดย Inherits จาก Control มาตรฐาน เป็นการใช้ OOP อย่างเต็มรูปแบบ:
1. Inheritance → รับคุณสมบัติเดิม
2. Polymorphism → เปลี่ยนพฤติกรรมด้วย Override
3. Encapsulation → ซ่อนรายละเอียดภายใน
4. Reusability → ใช้งานซ้ำได้ในหลายโปรเจกต์

โค้ดในส่วนของการสร้าง FlatTabControl ... 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

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

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