GumDotNet Form Viewer

VS Code extension ที่แสดง preview ของ WinForms Designer files (.Designer.cs / .Designer.vb) เหมือน Visual Studio Designer แล้วคลิก control เพื่อกระโดดไป event handler ใน user code
v0.2.0: เพิ่ม code panel ด้านล่าง preview พร้อม splitter ปรับขนาดได้ และ edit ได้ live (พิมพ์แก้ → แสดงผลใน preview ทันที)

Features

• 🪟 Preview ฟอร์ม WinForms ทันที — เปิดไฟล์ .Designer.cs หรือ .Designer.vb แล้วเห็นหน้าฟอร์มเหมือน Visual Studio
• 👆 คลิก control → กระโดดไป event handler — เปิดไฟล์ .cs / .vb ฝั่งข้าง ไปที่ <ControlName>_<Event>(...)
• 📝 Code panel ด้านล่าง — แสดง Designer code, แก้ไขได้ live (preview อัปเดตทันที), Ctrl+S save
• ↕️ Splitter ลากปรับขนาดได้ ระหว่าง preview กับ code panel — ขนาดที่ปรับจะถูกจำไว้
• 📋 Sidebar รายการ controls ค้นหา/กรองได้, คลิกเพื่อ scroll code ไปบรรทัดของ control
• 🇹🇭 รองรับภาษาไทย — ใช้คำสั่ง GumDotNet: Configure Workspace for Thai (Windows-874) ตั้งค่าครั้งเดียวต่อ workspace
• 🔄 รองรับทั้ง C# (.Designer.cs) และ VB.NET (.Designer.vb)

Controls ที่รองรับ

• ✅ Form (title bar + client area)
• ✅ Label, TextBox, MaskedTextBox (รวม PasswordChar / ReadOnly)
• ✅ Button, CheckBox, RadioButton
• ✅ GroupBox + Panel (รวม nested children)
• ✅ ComboBox, ListBox
• ✅ PictureBox / DataGridView / TabControl (placeholder)
• ✅ MenuStrip / StatusStrip / ToolStrip (placeholder)
• ✅ Timer / ToolTip / ImageList (icon — invisible runtime)
• ⚠️ Custom controls (3rd party) → render เป็นกล่อง outline + ชื่อชนิด

Usage

1. ติดตั้ง extension
2. เปิดไฟล์ *.Designer.cs (หรือ *.Designer.vb) ใน VS Code
3. extension จะเปิด preview ให้อัตโนมัติ
4. คลิก control → กระโดดไป event handler ใน companion file (MyForm.cs / MyForm.vb)

Settings

ภาษาไทย (Thai-encoded files)

ถ้า Designer ของคุณบันทึกเป็น windows-874 / TIS-620 (มาตรฐานไทยเก่า) แล้ว preview แสดงภาษาไทยเป็น ????? ให้รัน:

Ctrl+Shift+P → GumDotNet: Configure Workspace for Thai (Windows-874)

เพียงครั้งเดียวต่อ workspace — extension จะตั้ง files.encoding=windows874 ใน .vscode/settings.json ให้ครับ จากนั้น VS Code ทั้ง preview และ text editor จะ decode เป็นไทยถูก

ที่มา

extension นี้พัฒนาขึ้นเพื่อช่วยอ่าน/ทำความเข้าใจโค้ดของระบบ Line of Business เก่าที่ port มาจาก VB6 → C# WinForms — โดยเฉพาะการหาว่า control ตัวไหนมี event handler อยู่ในไฟล์ไหนบรรทัดอะไร โดยไม่ต้องเปิด Visual Studio

ถ้าคุณใช้ VS Code เป็นหลัก และต้องอ่านโค้ด WinForms (legacy หรือใหม่) extension นี้จะช่วยให้นำทางในโปรเจกต์ได้เร็วขึ้นมาก

ข้อจำกัด

• Static preview — แสดง layout เท่านั้น ไม่รัน data binding
• ไม่รองรับ WPF (.xaml) — เฉพาะ WinForms
• Custom 3rd-party controls (DevExpress, Telerik, Infragistics) → render เป็น placeholder
• รูป/icon จาก .resx (binary base64) → ไม่ render
• Property values ที่อ้าง resources (resources.GetObject(...)) → skip
• Control ที่ใช้ BindingSource หรือ data binding → แค่แสดง layout

Companion file lookup

ถ้าหาไฟล์ companion ไม่เจอ extension จะแสดงข้อความให้เลือก reveal field declaration ใน Designer แทน

Related Extensions

• VB6 Form Viewer — ดู/preview ฟอร์ม VB6 (.frm)
• GumGo Preview — preview Go HTML templates (Fiber/Gin/Echo) + click-to-jump

License

MIT