[VB.NET] โค้ดการ Resize ขนาดของ Form และ Control แบบอัตโนมัติ ตามขนาดหน้าจอคอมพิวเตอร์

thongkorn

หน้าจอการออกแบบ Design Time ...


การรันโปรแกรมด้วย Visual Basic .Net (2010) ...


การรันโปรแกรมด้วย Visual Basic .Net (2026) Community Edition หน้าจอขนาด 1600 x 900 พิกเซล ...


การรันโปรแกรมกับหน้าจอขนาด 1366 x 768 พิกเซล ...

หลักการออกแบบ Resize Form และ Control
การ Resize ไม่ใช่การย่อหรือขยาย Control ตามใจ แต่เป็นการคำนวณอัตราส่วน (Scale) จากขนาดฟอร์มต้นฉบับเทียบกับขนาดฟอร์มปัจจุบัน แล้วนำอัตราส่วนนั้นไปปรับตำแหน่ง (Location), ขนาด (Size) และ ขนาดตัวอักษร (Font) ของ Control ทุกตัว โดยอ้างอิงจากค่าต้นฉบับที่บันทึกไว้ครั้งแรกเสมอ เพื่อป้องกันการสะสมของความคลาดเคลื่อนจากการ Resize หลายครั้ง วิธีนี้ทำให้ทุก Control ยังคงสัดส่วนเดิม และรองรับการแสดงผลบนหน้าจอที่มีความละเอียดแตกต่างกันได้อย่างถูกต้อง

แนวคิดของการทำ Resize Form
1. บันทึกขนาดและตำแหน่งเดิมของ Form และ Control ทุกตัว
2. คำนวณอัตราส่วนการย่อ/ขยาย (Scale X, Scale Y) จากขนาดฟอร์มปัจจุบัน
3. ปรับ Location, Size และ Font โดยอ้างอิงจากค่าต้นฉบับเสมอ
4. ห้ามนำค่าที่ Resize แล้วมาใช้คำนวณซ้ำ เพื่อป้องกันความคลาดเคลื่อนสะสม
5. ผลลัพธ์คือ UI ยังคงสัดส่วนเดิมและรองรับหลายความละเอียดหน้าจอได้อย่างถูกต้อง

*** อาจจะเกิดปัญหาในการสั่งรันโปรแกรมในตอนแรกๆ ลองเลือก Build, Rebuild และ Clean Solution ก่อนครับ ***
มาดูโค้ดในส่วนของฟอร์มหลัก ซึ่งใช้การ Design Time ทั้งหมด (frmResizeDemo.vb) ...

1. Public Class frmResizeDemo
   
2.     Inherits Form   ' สืบทอด Form
   
3. 
   
4.     ' ----------------------------------------------------------
   
5.     ' ตัวแปรระดับคลาส ตัวช่วย Resize
   
6.     ' ----------------------------------------------------------
   
7.     Private Resizer As ResizeHelper
   
8. 
   
9.     ''' <summary>
   
10.     ''' ตัวสร้างฟอร์ม เรียกใช้เมื่อสร้างวัตถุของฟอร์มนี้
    
11.     ''' </summary>
    
12.     Public Sub New()
    
13.         ' เรียกใช้เมธอดที่สร้างคอนโทรลทั้งหมดบนฟอร์ม
    
14.         ' (เมธอดนี้ถูกสร้างโดย Visual Studio Designer)
    
15.         InitializeComponent()
    
16. 
    
17.         ' สร้างวัตถุ ResizeHelper เพื่อใช้จัดการการปรับขนาด
    
18.         Resizer = New ResizeHelper()
    
19.     End Sub
    
20. 
    
21.     ''' <summary>
    
22.     ''' Event: เกิดขึ้นเมื่อฟอร์มถูกโหลดครั้งแรก
    
23.     ''' ใช้สำหรับเตรียมข้อมูลและตั้งค่าเริ่มต้น
    
24.     ''' </summary>
    
25.     Private Sub frmResizeDemo_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
    
26.         '-----------------------------------------------------
    
27.         ' เพิ่มเติม:
    
28.         ' Control ต่างๆที่อยู่บนฟอร์ม จะอยู่ใต้ Panel หลัก
    
29.         '-----------------------------------------------------
    
30. 
    
31.         ' ข้อมูลตัวอย่าง
    
32.         cboCountry.SelectedIndex = 0
    
33.         ' กำหนดค่าเริ่มต้นให้ DateTimePicker
    
34.         dtpBirthDate.Value = DateTime.Now.AddYears(-20)
    
35. 
    
36.         '-----------------------------------------------------
    
37.         ' สำคัญมาก
    
38.         ' ต้องเรียกหลังจาก Control ถูกสร้างครบแล้ว
    
39.         ' เพื่อเก็บตำแหน่งเริ่มต้นของทุก Control
    
40.         '-----------------------------------------------------
    
41.         Resizer.SaveOriginalProperties(Me)
    
42. 
    
43.     End Sub
    
44. 
    
45.     ''' <summary>
    
46.     ''' Event: เกิดขึ้นเมื่อฟอร์มมีการปรับขนาด (เช่น ผู้ใช้ลากขอบฟอร์ม)
    
47.     ''' ใช้สำหรับปรับขนาดคอนโทรลตามสัดส่วน
    
48.     ''' </summary>
    
49.     Private Sub FormDemo_Resize(sender As Object, e As EventArgs) Handles MyBase.Resize
    
50.         '-----------------------------------------------------
    
51.         ' ตรวจสอบว่ามีตัวช่วยปรับขนาดหรือไม่ และบันทึกข้อมูลหรือยัง
    
52.         ' ทุกครั้งที่ Form เปลี่ยนขนาด ให้ปรับ Controls ทั้งหมด
    
53.         '-----------------------------------------------------
    
54.         If Resizer IsNot Nothing Then Resizer.AdjustControls(Me)
    
55.     End Sub
    
56. 
    
57.     Private Sub btnSave_Click(sender As Object, e As System.EventArgs) Handles btnSave.Click
    
58.         MessageBox.Show("ทดสอบเหตุการณ์ในการกดปุ่มคำสั่ง.", "รายงานสถานะ", MessageBoxButtons.OK, MessageBoxIcon.Information)
    
59.     End Sub
    
60. 
    
61.     Private Sub btnCancel_Click(sender As Object, e As System.EventArgs) Handles btnCancel.Click
    
62.         Me.Close()
    
63.     End Sub
    
64. 
    
65.     Private Sub frmResizeDemo_FormClosed(sender As Object, e As System.Windows.Forms.FormClosedEventArgs) Handles Me.FormClosed
    
66.         Me.Dispose()
    
67.         GC.SuppressFinalize(Me)
    
68.         Application.Exit()
    
69.     End Sub
    
70. End Class

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

โค้ดในส่วน Class ของการย่อขยายขนาดของฟอร์มและคอนโทรล (ResizeHelper.vb) ...

1. Imports System.Drawing
   
2. 
   
3. ' ----------------------------------------------------------
   
4. ' คำอธิบาย ResizeHelper
   
5. ' ----------------------------------------------------------
   
6. ' คลาสสำหรับย่อ/ขยาย Form และ Controls ทั้งหมด
   
7. ' ตามขนาดของหน้าต่างที่เปลี่ยนแปลง
   
8. '
   
9. ' หลักการทำงาน
   
10. '
    
11. ' 1. เมื่อเปิดฟอร์มครั้งแรก
    
12. '    -> เก็บตำแหน่ง ขนาด และ Font ของ Control ทุกตัว
    
13. '
    
14. ' 2. เมื่อ Form ถูก Resize
    
15. '    -> คำนวณอัตราส่วนการย่อ/ขยาย
    
16. '
    
17. ' 3. นำอัตราส่วนไปคูณกับค่าดั้งเดิม
    
18. '    -> ทำให้ Control ทุกตัวขยายหรือย่ออย่างสัมพันธ์กัน
    
19. ' ----------------------------------------------------------
    
20. 
    
21. Public Class ResizeHelper
    
22. 
    
23.     '---------------------------------------------------------
    
24.     ' ขนาดของฟอร์มในขณะเริ่มต้น
    
25.     ' ใช้เป็นค่าต้นฉบับสำหรับคำนวณอัตราส่วน
    
26.     '---------------------------------------------------------
    
27.     Private OriginalFormSize As Size
    
28.     '---------------------------------------------------------
    
29.     ' อัตราการย่อ/ขยายแนวนอน
    
30.     ' เช่น
    
31.     ' เดิม 1920
    
32.     ' ใหม่ 960
    
33.     ' ScaleWidth = 960 / 1920 = 0.5
    
34.     '---------------------------------------------------------
    
35.     Private ScaleWidth As Double
    
36. 
    
37.     '---------------------------------------------------------
    
38.     ' อัตราการย่อ/ขยายแนวตั้ง
    
39.     '---------------------------------------------------------
    
40.     Private ScaleHeight As Double
    
41. 
    
42.     '---------------------------------------------------------
    
43.     ' Dictionary สำหรับเก็บข้อมูลเดิมของ Control ทุกตัว
    
44.     ' Key   = Control
    
45.     ' Value = ขนาด/ตำแหน่ง/Font เดิม
    
46.     '---------------------------------------------------------
    
47.     Private ReadOnly ControlProperties As New Dictionary(Of Control, ControlPropertyBag)
    
48. 
    
49.     ' ----------------------------------------------------------
    
50.     ''' <summary>
    
51.     ''' ขั้นตอนที่ 1: บันทึกขนาดและตำแหน่งเดิมของ Form และ Control ทั้งหมด
    
52.     ''' ควรเรียกใช้เพียงครั้งเดียวตอน Form โหลดเสร็จ (Form_Load)
    
53.     ''' </summary>
    
54.     Public Sub SaveOriginalProperties(ByVal frm As Form)
    
55. 
    
56.         ' เก็บขนาดฟอร์มเริ่มต้น
    
57.         OriginalFormSize = frm.Size
    
58. 
    
59.         ' เก็บข้อมูลของ Control ทุกตัว
    
60.         SaveControlProperties(frm)
    
61. 
    
62.     End Sub
    
63. 
    
64.     ' ----------------------------------------------------------
    
65.     ''' <summary>
    
66.     ''' ขั้นตอนที่ 2: คำนวณสัดส่วนและปรับขนาด Control ใหม่
    
67.     ''' ควรเรียกใช้ทุกครั้งที่ขนาด Form เปลี่ยนแปลง (Form_Resize)
    
68.     ''' </summary>
    
69.     Public Sub AdjustControls(ByVal frm As Form)
    
70.         ' ป้องกันการหารด้วยศูนย์ กรณีที่ OriginalFormSize ยังไม่ถูกตั้งค่า
    
71.         If OriginalFormSize.Width = 0 OrElse OriginalFormSize.Height = 0 Then Return
    
72. 
    
73.         ' 1. คำนวณอัตราส่วนใหม่ (ขนาดปัจจุบัน หารด้วย ขนาดเดิม)
    
74.         ' ตัวอย่าง: ถ้าเดิมกว้าง 1000 ปัจจุบันกว้าง 500 -> ScaleWidth = 0.5 (ย่อเหลือครึ่งหนึ่ง)
    
75.         ScaleWidth = frm.Width / OriginalFormSize.Width
    
76.         ScaleHeight = frm.Height / OriginalFormSize.Height
    
77. 
    
78.         ' 2. สั่งให้ Form หยุดการวาดหน้าจอชั่วคราว (สำคัญมาก)
    
79.         ' เพื่อป้องกันอาการหน้าจอกระพริบ (Flickering) และเพิ่มความเร็วในการประมวลผล
    
80.         frm.SuspendLayout()
    
81. 
    
82.         ' 3. เริ่มปรับขนาด Control
    
83.         ResizeControls(frm)
    
84. 
    
85.         ' 4. สั่งให้ Form เริ่มวาดหน้าจอใหม่พร้อมกันทั้งหมด
    
86.         frm.ResumeLayout()
    
87.     End Sub
    
88. 
    
89.     ' ----------------------------------------------------------
    
90.     ''' <summary>
    
91.     ''' คลาสย่อย (Nested Class) สำหรับเก็บ "ข้อมูลต้นฉบับ" ของ Control แต่ละตัว
    
92.     ''' การแยกเป็นคลาสย่อยช่วยให้โค้ดเป็นระเบียบและจัดการข้อมูลได้ง่าย
    
93.     ''' </summary>
    
94.     Private Class ControlPropertyBag
    
95.         Public OriginalSize As Size          ' ขนาดเดิม (กว้าง x สูง)
    
96.         Public OriginalLocation As Point     ' ตำแหน่งเดิม (X, Y)
    
97.         Public OriginalFontSize As Single    ' ขนาดตัวอักษรเดิม
    
98. 
    
99.         ' Constructor: รับค่า Control เข้ามาและบันทึกค่าเดิมทันที
    
100.         Public Sub New(ByVal ctrl As Control)
     
101.             OriginalSize = ctrl.Size
     
102.             OriginalLocation = ctrl.Location
     
103.             OriginalFontSize = ctrl.Font.Size
     
104.         End Sub
     
105.     End Class
     
106. 
     
107.     ' ----------------------------------------------------------
     
108.     ''' <summary>
     
109.     ''' Recursive Function
     
110.     ''' ฟังก์ชันวนลูปบันทึกข้อมูล Control (แบบ Recursive)
     
111.     ''' Recursive คือการที่ฟังก์ชันเรียกตัวเอง เพื่อเจาะเข้าไปใน Control ที่ซ้อนกัน (เช่น Panel, GroupBox)
     
112.     ''' </summary>
     
113.     Private Sub SaveControlProperties(ByVal parent As Control)
     
114.         ' วนลูปดู Control ลูกทุกตัวที่อยู่ใน Control แม่
     
115.         For Each child As Control In parent.Controls
     
116.             ' ถ้ายังไม่เคยบันทึกข้อมูลของ Control นี้ ให้บันทึก
     
117.             If Not ControlProperties.ContainsKey(child) Then
     
118.                 ControlProperties.Add(child, New ControlPropertyBag(child))
     
119.             End If
     
120. 
     
121.             ' ถ้า Control นี้มีลูกซ้อนอยู่ข้างในอีก (เช่น GroupBox มี TextBox อยู่ข้างใน)
     
122.             ' ให้เรียกฟังก์ชันนี้ซ้ำ (Recursive) เพื่อเจาะลงไปบันทึกข้อมูลของลูกด้วย
     
123.             If child.HasChildren Then SaveControlProperties(child)
     
124.         Next
     
125. 
     
126.     End Sub
     
127. 
     
128.     ' ----------------------------------------------------------
     
129.     ''' <summary>
     
130.     ''' ฟังก์ชันวนลูปปรับขนาด Control (แบบ Recursive)
     
131.     ''' </summary>
     
132.     '''
     
133.     Private Sub ResizeControls(ByVal parent As Control)
     
134.         For Each child As Control In parent.Controls
     
135.             ' ตรวจสอบว่ามีข้อมูลต้นฉบับของ Control นี้เก็บไว้หรือไม่
     
136.             If ControlProperties.ContainsKey(child) Then
     
137.                 Dim props As ControlPropertyBag = ControlProperties(child)
     
138.                 '---------------------------------------------
     
139.                 ' ปรับตำแหน่ง X และ Y ตามสัดส่วน
     
140.                 '---------------------------------------------
     
141.                 child.Left = CInt(props.OriginalLocation.X * ScaleWidth)
     
142.                 child.Top = CInt(props.OriginalLocation.Y * ScaleHeight)
     
143. 
     
144.                 '---------------------------------------------
     
145.                 ' ปรับขนาดความกว้างและความสูง ตามสัดส่วนที่คำนวณไว้
     
146.                 '---------------------------------------------
     
147.                 child.Width = CInt(props.OriginalSize.Width * ScaleWidth)
     
148.                 child.Height = CInt(props.OriginalSize.Height * ScaleHeight)
     
149. 
     
150.                 '---------------------------------------------
     
151.                 ' ปรับขนาด Font ใช้ Scale ที่น้อยกว่า
     
152.                 ' เพื่อไม่ให้ Font สูงเกินไป
     
153.                 '---------------------------------------------
     
154.                 Dim fontScale As Double
     
155.                 ' ใช้ค่า Scale ที่น้อยที่สุดระหว่างกว้างกับสูง เพื่อป้องกันตัวหนังสือล้นกรอบ
     
156.                 fontScale = Math.Min(ScaleWidth, ScaleHeight)
     
157.                 Dim newFontSize As Single
     
158.                 newFontSize = props.OriginalFontSize * CSng(fontScale)
     
159.                 ' ป้องกันขนาดฟอนต์เล็กเกินไปจนอ่านไม่ออก (ขั้นต่ำ 4 pt)
     
160.                 If newFontSize > 4 Then child.Font = New Font(child.Font.FontFamily, newFontSize, child.Font.Style)
     
161.             End If
     
162.             '---------------------------------------------
     
163.             ' Resize Control ลูกต่อ
     
164.             '---------------------------------------------
     
165.             If child.HasChildren Then ResizeControls(child)
     
166.         Next
     
167.     End Sub
     
168. End Class

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

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