การออกแบบหน้าจอและคอนโทรลพื้นฐาน

จากที่ได้กล่าวในบทที่ผ่านมาว่าการสร้างโปรแกรมด้วย VB ในขั้นตอนแรกจะเป็นการออกแบบหน้าจอที่ติดต่อกับผู้ใช้ ซึ่งเป็นการนำคอนโทรลที่มีอยู่มาออกแบบฟอร์มให้เหมาะสม โดยจะพบว่าทั้งฟอร์มและคอนโทรลนั้นเป็นเครื่องมือพื้นฐานที่สำคัญในการเขียนโปรแกรมด้วย VB สำหรับในบทนี้จะกล่าวถึงหลักการพื้นฐานเกี่ยวกับฟอร์มและคอนโทรลที่จำเป็นต้องทราบ เพื่อให้เราเข้าใจหลักการในการออกแบบหน้าจอมากขึ้น

จากการเขียนโปรแกรมเริ่มต้นในบทที่ผ่านมาจะพบว่าในการทำงานกับฟอร์มและคอนโทรลผู้เขียนโปรแกรมจะต้องทำความคุ้นเคยกับ 3 คำต่อไปนี้
1. คุณสมบัติ (Properties) ใช้สำหรับกำหนดลักษณะต่างๆ ของฟอร์มและคอนโทรล เช่น ปุ่มคำสั่ง ชื่อ Button1 มีคุณสมบัติที่กำหนดขึ้นดังรูป

ในการพัฒนาโปรแกรมเราสามารถกำหนดคุณสมบัติสำหรับคอนโทรลต่างๆ ผ่านทางหน้าต่างคุณสมบัติ (Properties) หรือจะใช้คำสั่งก็ได้ โดยมีรูปแบบดังนี้

การกำหนดคุณสมบัติทั้งสองวิธีจะใช้ในสถานการณ์ที่แตกต่างกัน การกำหนดที่หน้าต่างคุณสมบัติจะใช้ในกรณีที่ต้องการกำหนดค่าตอนโปรแกรมเริ่มทำงาน หรือการออกแบบหน้าจอของโปรแกรม และเมื่อโปรแกรมทำงานอยู่แต่ต้องการเปลี่ยนค่าคุณสมบัติ เราจะใช้การกำหนดผ่านการเขียนโค้ดคำสั่ง
2. เมธอด (Method) เป็นการสั่งให้ฟอร์มและคอนโทรลทำงานตามที่ขอร้อง เช่น การสั่งให้ปุ่มคำสั่งชื่อ Button1 ในตัวอย่างที่ผ่านมาเป็นคอนโทรลที่ถูกเลือก (ได้รับการโฟกัสบนฟอร์ม) ดังรูป สำหรับการสั่งให้ปุ่มคำสั่งทำงานตามที่เราต้องการข้างต้น จะต้องเขียนคำสั่งดังต่อไปนี้

3. อีเวนต์ (Events) เป็นเหตุการณ์ที่เกิดขึ้นบนฟอร์ม หรือคอนโทรลที่เราสามารถใส่คำสั่งเพื่อตอบสนองได้ เช่น ถ้าเราต้องการตอบสนองต่ออีเวนต์ Click ของปุ่มคำสั่งชื่อ Button1 โดยเมื่อคลิกที่ปุ่มแล้วให้ข้อความบนปุ่มเปลี่ยนเป็น Click ดังต่อไปนี้

การเขียนโปรแกรมตอบสนองอีเวนต์ Click ให้กับปุ่มจะเขียนได้โดยดับเบิลคลิกที่ปุ่มเพื่อเข้าสู่หน้าต่างการเขียนโค้ด แล้วเขียนลงไปดังนี้

จากตัวอย่างคำสั่งข้างต้น เมื่อรันโปรแกรมแล้วคลิกปุ่มคำสั่ง คำว่า "Button1" บนปุ่มคำสั่งจะเปลี่ยนเป็น "Click

หลักการที่สำคัญมากประการหนึ่งในการเขียนโปรแกรมด้วย VB ก็คือ เนมสเปซ (Namespaces) ซึ่งจะช่วยทำให้การจัดการไลบรารี คลาส และออบเจ็กต์ เป็นระเบียบมากขึ้นและทำให้เกิดความกำกวมเมื่ออ้างอิงถึงออบเจ็กต์และควบคุมขอบเขตการใช้งานของออบเจ็กต์
การอ้างอิงถึงเนมเสปซ ทำให้เรียกใช้คลาสได้ง่าย เช่น คลาส System.WinForms.Button นี่คือการเรียกแบบเต็มๆ ซึ่งยาวและยุ่งยาก แต่ถ้าเราอ้างถึงด้วยสำคั่ง Imports เช่น

ในดอตเน็ตเฟรมเวิร์ก (.NET Framework) การทำงานทุกอย่างของคลาศพื้นฐานจะอยู่ในเนมสเปซที่เรียกว่า System โดยจะมีคลาสต่างๆ ดังตัวอย่างต่อไปนี้

ทำให้เราสามารถเรียกใช้คลาสทั้งหมดภายใน WinForms ได้ทันที เช่น เรียกใช้คลาส Button แทนการเขียนคำสั่งว่า System.WinForms.Button ทำให้เขียนโปรแกรม เขียนสั้นกว่าและสะดวกกว่ามาก
ในดอตเน็ตเฟรมเวิร์ก (.NET Framework) การทำงานทุกอย่างของคลาศพื้นฐานจะอยู่ในเนมสเปซที่เรียกว่า System โดยจะมีคลาสต่างๆ ดังตัวอย่างต่อไปนี้

ฟอร์มหรือที่เรียกว่าวินโดว์ เป็นเครื่องมือที่ใช้บ่อยมากในการเขียนโปรแกรมด้วย VB ให้ทำงานบนระบบปฏิบัติการวินโดว์ โดยที่ฟอร์มจะเป็นหน้าต่างที่ผู้ใช้ติดต่อทำงานด้วย ผ่านทางคอนโทรลต่างๆ ที่เรานำมาวางบนฟอร์ม ดังนั้น ในหัวข้อนี้จะศึกษาคุณสมบัติ เมธอด และอีเวนต์ของฟอร์มที่จำเป็นต้องใช้
สำหรับการใช้งานคลาส WinForms รวมทั้งคอนโทรลต่างๆ ในบทนี้นั้นจะมาจากเนมสเปซชื่อ System.Windows.Forms ซึ่งเป็นค่าเริ่มต้นที่มีในโปรเจ็กต์อยู่แล้ว สามารถดูได้โดยเลือกจากหน้าต่าง Solution Explorer ดังรูป

ฟอร์มและคอนโทรลต่างๆ ทีมีใน VB นั้น เป็นคลาสที่มีอยู่ในเนมสเปซชื่อ System.Windows.Forms ซึ่งจะมีคลาสต่างๆ ที่ช่วยเราในการสร้างแอพพลิเคชันที่รันบนวินโดว์ สำหรับความหมายคลาสและออบเจ็กส์จะกล่าวถึงต่อไปในเรื่องการเขียนโปรแกรมเชิงวัตถุ
สำหรับการกำหนดคุณสมบัติให้กับฟอร์ม ทำได้โดยกำหนดผ่านทางหน้าต่างคุณสมบัติในขณะที่ออกแบบโปรแกรม หรือกำหนดผ่านการเขียนคำสั่งในโปรแกรมได้

คุณสมบัติที่สำคัญของฟอร์ม
ฟอร์มมีคุณสมบัติต่างๆมากมาย ดังตัวอย่างในตารางต่อไปนี้ ซึ่งบางคุณสมบัติจะมีในคอนโทรลอื่นๆด้วย

ตัวอย่างโปรแกรมแสดงการทำงานของฟอร์ม (FormDemo)
ตัวอย่างต่อไปเป็นโปรแกรมที่ทำให้เข้าใจฟอร์มมากยิ่งขึ้น ซึ่งเป็นการสร้างฟอร์มขึ้นมา 1 ฟอร์ม โดยจะแสดงอีเวนต์ต่างๆ ที่เกิดขึ้นบนฟอร์มว่า แต่ละอีเวนต์จะเกิดขึ้นในตอนใดโดยแสดงออกทางหน้าต่าง Output โดยในโปรแกรมจะเรียกเมธอด WriteLine ของออบเจ็กต์ Console เพื่อพิมพ์ชื่ออีเวนต์ที่เกิดขึ้นบนฟอร์มออดมา โดยการทำงานเป็นดังตัวอย่างต่อไปนี้

การออกแบบโปรแกรมทำได้ตามขั้นตอนต่อไปนี้
1. ให้สร้างโปรเจ็กต์ใหม่ โดยเลือกต้นแบบโปรเจ็กต์เป็นแบบ Windows Application
2. กดคีย์ <F7> เพื่อเข้าสู่หน้าต่างเขียนโปรแกรม และเลือกอีเวนต์ต่างๆ ของฟอร์ม โดยเลือก (Form1 Events) และเลือกอีเวนต์ต่อไปนี้ Load, Activated, Click, Deactivate, DoubleClick, Resize

3. เมื่อเลือกอีเวนต์แล้ว จะแสดงโปรแกรมย่อยสำหรับแต่ละอีเวนต์ออกมา ให้เขียนโค้ดโปรแกรมให้กับแต่ละอีเวนต์ดังนี้

ให้ทดลองรันโปรแกรมโดยเปิดหน้าต่าง Output เพื่อแสดงคำสั่ง Console.WriteLine โดยกดคีย์บอร์ด <Ctrl+Alt+O> แล้วรันโปรแกรม เมื่อคลิกเมาส์หรือกระทำกับฟอร์ม โปรแกรมจะแสดงผลลัพธ์ดังนี้

การเขียนโปรแกรมด้วย VB โดยทั่วไปแล้วจะเป็นการเขียนโปรแกรมให้ทำงานในระบบวินโดว์ซึ่งจะใช้วิธีติดต่อกับผู้ใช้แบบกราฟิก ในการออกแบบโปรแกรมนั้น VB มีคอนโทรลให้เลือกใช้มากมาย โดยคอนโทรลต่างๆ จะเก็บไว้ในทูลบ็อกซ์ (Toolbox) คอนโทรลแต่ละตัวจะมีคุณสมบัติและอีเวนต์ให้เลือกใช้ ในหัวข้อนี้จะกล่าวถึงคอนโทรลพื้นฐานที่ใช้บ่อยๆ ส่วนคอนโทรลอื่นๆ จะกล่าวต่อไปเมื่อต้องนำคอนโทรลตัวนั้นมาใช้งาน

คอนโทรลปุ่มคำสั่ง (Button)
ปุ่มคำสั่งจะทำหน้าที่ตอบสนองการคลิกเมาส์ของผู้ใช้ เพื่อสั่งงานไปยังโปรแกรมว่าต้องการให้โปรแกรมทำอะไรต่อไป สำหรับการทำให้เกิดอีเวนต์คลิกของปุ่มคำสั่งนั้นเกิดได้จากหลายๆกรณีดังต่อไปนี้
• เกิดจากการคลิกเมาส์ของผู้ใช้งาน (ใช้งานมากที่สุด)
• เกิดจากกดคีย์ <Enter> สำหรับปุ่มที่ถูกกำหนดในคุณสมบัติ AcceptButton ของฟอร์ม
• เกิดจากการกดคีย์ <Esc> สำหรับปุ่มที่ถูกกำหนดในคุณสมบัติ CancelButton ของฟอร์ม

• เกิดจากผู้ใช้กดคีย์ < Alt + ตัวอักษรที่ขีดเส้นใต้อยู่ >
• เกิดจากการย้ายโฟกัสไปยังปุ่มคำสั่งด้วยการกดคีย์ <Tab> และเลือกปุ่มนั้น โดยการกดคีย์ < Spacebar> หรือ <Enter>
• เกิดจากการเรียกใช้เมธอด PerformClick ในโค้ดโปรแกรม
เมื่อนำปุ่มคำสั่งมาวางบนฟอร์ม โปรแกรมจะตั้งชื่อสำหรับอ้างถึงออบเจ็กต์ปุ่มคำสั่งเป็น Button1 เมื่อนำปุ่มต่อไปมาวาง โปรแกรมจะให้ชื่อเป็น Button2 ตามลำดับไปเรื่อยๆ และกำหนดข้อความบนปุ่มให้อัตโนมัติ ผู้เขียนโปรแกรมสามารถกำหนดชื่อปุ่มใหม่และกำหนดข้อความบนปุ่มได้ในหน้าต่างคุณสมบัติของปุ่มนั้นๆ คุณสมบัติที่น่าสนใจของปุ่มคำสั่งมีดังตารางต่อไปนี้

คอนโทรลเลเบล (Label)
เลเบลเป็นคอนโทรลที่ใช้แสดงข้อมูลให้ผู้ใช้เห็นบนฟอร์ม โดยที่ผู้ใช้ไม่สามารถแก้ไขข้อมูลนั้นได้ คุณสมบัติที่สำคัญของเลเบลมีดังนี้

เมื่อนำเลเบลมาวางบนฟอร์มโปรแกรมจะตั้งชื่อเลเบลแรกให้เป็น Label1 ซึ่งผู้ใช้สามารถเปลี่ยนชื่อได้ในหน้าต่างคุณสมบัติ และสามารถกำหนดข้อความให้เลเบลได้ในคุณสมบัติ Text นอกจากนี้ยังเขียนโปรแกรมให้เปลี่ยนข้อความของเลเบลได้อีกด้วยโดยกำหนดค่าสตริงลงไปให้กับคุณสมบัติ Text ของเลเบลที่เลือก ตัวอย่างเช่น ถ้าต้องการใช้เลเบลชื่อ Label1 แสดงคำว่า Computer จะเขียนได้ดังนี้

คอนโทรลเท็กซ์บ็อกซ์ (TextBox)
คอนโทรลกล่องข้อความหรือเท็กซ์บ็อกซ์เป็นคอนโทรลที่ใช้งานบ่อยมากในการรับข้อมูลจากผู้ใช้ที่ป้อนเข้ามาในโปรแกรมของเรา หรือใช้แสดงผลและให้ผู้ใช้แก้ไขข้อมูลได้ด้วย โดยทั่วไปแล้วเท็กซ์บ็อกซ์จะแสดงข้อความเพียงบรรทัดเดียว ถ้ามีข้อความเกิดขนาดของเท็กซ์บ็อกซ์ โปรแกรมจะแสดงเท่ากับขนาดของตัวเท็กซ์บ็อกซ์เอง แต่เรายังสามารถเลื่อนเคอร์เซอร์ไปมาเพื่อดูข้อความทั้งหมดได้ ถ้าหากต้องการให้เท็กซ์บ็อกซ์แสดงข้อความหลายบรรทัดให้กำหนดที่คุณสมบัติ MultiLine เป็น True และถ้าต้องการให้มีสกอร์บาร์ด้วย เราต้องกำหนดคุณสมบัติ ScrollBars ให้เป็นไปตามที่ต้องการ โดยคุณสมบัติจองเท็กซ์บ็อกซ์ที่สำคัญมีดังตารางต่อไปนี้

สำหรับข้อความที่อ่านจากเท็กซ์บ็อกซ์หรือเขียนลงไปในเท็กซ์บ็อกซ์จะเป็นข้อความชนิดสตริง สำหรับตัวอย่างการประยุกต์ใช้งานให้ศึกษาจากตัวอย่างโปรแกรม

ตัวอย่าง เป็นการออกแบบโปรแกรมโดยนำคอนโทรลกดปุ่ม เลเบล และเท็กซ์บ็อกซ์มาใช้ โดยโปรแกรมที่สร้างขึ้นจะให้เราใส่ชื่อและนาม-สกุลลงไป เมื่อใช้เมาส์คลิกที่ปุ่ม Show โปรแกรมจะแสดงข้อความที่ใส่เข้าไปออกมาทางเท็กซ์บ็อกซ์อีกช่องหนึ่ง
ขั้นตอนการพัฒนาโปรแกรมทำได้ดังต่อไปนี้
1. สร้างโปรเจ็กต์แบบ Windows Application โดยนำคอนโทรลต่างๆและกำหนดชื่อให้กับคอมโทรล ดังรูป

2. ปรับค่าคุณสมบัติให้กับคอนโทรลและฟอร์มดังต่อไปนี้

3. เขียนโปรแกรม โดยจากข้อกำหนดของโปรแกรมเมื่อคลิกปุ่มจะต้องอ่านข้อมูลจาก เท็กซ์บ็อกซ์ชื่อ TextBox1 มาแสดงผลในเท็กซ์บ็อกซ์ชื่อ Text2 ดังนั้นจะต้องเขียนโปรแกรมให้เป็น อีเวนต์ของปุ่มกด ให้ดับเบิลคลิกที่ปุ่มกดบนฟอร์มแล้วเขียนคำสั่งลงไปดังต่อไปนี้

ต้องการให้เท็กซ์บ็อกซ์ที่สองแสดงเครื่องหมาย # ตอนเริ่มต้นโปรแกรม ดังนั้นจะต้องเขียน อีเวนต์ให้กับฟอร์มตอนที่โหลดโปรแกรม ซึ่งทำได้ดังนี้

คำสั่งทั้งหมดของโปรแกรมจะเป็นดังนี้

ให้ทดลองรันโปรแกรม ผลลัพธ์จะเป็นดังนี้

คอนโทรลเช็คบ็อกซ์ (CheckBox)

ในบางครั้งการสร้างโปรแกรมจะต้องการให้ผู้ใช้เลือกตัวเลือกที่ต้องการได้ ซึ่งจะทำให้โปรแกรมใช้งานได้สะดวกกว่าการคีย์ข้อมูลเข้าไปในเท็กซ์บ็อกซ์ คอนโทรลเช็คบ็อกซ์เป็นคอนโทรลที่จะให้ผู้ใช้เลือกว่าจะเช็ค (ให้มีเครื่องหมายถูกในช่อง) หรือไม่เช็ค (ไม่มีเครื่องหมายถูก) เพียงอย่างใดอย่างหนึ่งเท่านั้น ค่าของคอนโทรลเช็คบ็อกซ์จะหาได้จากค่าคุณสมบัติ Ckecked ที่มีค่าเป็น True กับ False หรือคุณสมบัติ CheckState ซึ่งจะมีค่าดังตารางต่อไปนี้

สำหรับสถานะ Indeterminate เป็นสถานะที่ใช้ในกรณีที่เราต้องการตัวเลือกที่สามารถเลือกได้สามสถานะ คือ ใช่, ไม่ หรือไม่แน่ใจ เราสามารถกำหนดสถานะ Indeterminate ได้โดยการเขียนโค้ด แต่ถ้าเราต้องการให้ผู้ใช้โปรแกรมสามารถเลือกสถานะ Indeterminate ได้เอง คือ สามารถเลือก เช็คบ็อกซ์ได้สามสถานะ เราต้องการกำหนดคุณสมบัติ Threestate ของเช็คบ็อกซ์ตัวนั้นให้เป็น True
การกำหนดคุณสมบัติให้กับเช็คบ็อกซ์สามารถกำหนดเป็นค่าเริ่มต้นได้โดยกำหนดผ่านหน้าต่างคุณสมบัติของเช็คบ็อกซ์แต่ละตัว นอกจากนี้ยังสามารถกำหนดคุณสมบัติผ่านการเขียนโค้ดได้ ตัวอย่างเช่น ถ้าหากต้องการให้เช็คบ็อกซ์ถูกเลือกดังรูปต่อไปนี้

จากรูปที่ผ่านมา ถ้าหากต้องการกำหนดคุณสมบัติโดยการเขียนโค้ดจะเขียนได้ดังนี้

ถ้าหากในฟอร์มที่เช็คบ็อกซ์อยู่หลายเช็คบ็อกซ์ เราสามารถเลือกเช็คได้หลายเช็คบ็อกซ์พร้อมกันได้ นอกจากนี้ถ้าหากต้องการกำหนดข้อความที่แสดงบนคอนโทรลตัวนี้ เราสามารถทำได้ผ่านทางคุณสมบัติ Text นอกจากนี้ยังมีคุณสมบัติ CheckAlign ที่ใช้กำหนดตำแหน่งของตัวเช็คบ็อกซ์ได้อีกด้วย
สำหรับการตรวจสอบการเช็ค ให้ตรวจสอบผ่านทางอีเวนต์ Click ของเช็คบ็อกซ์ ซึ่งจะเกิดขึ้นเมื่อผู้ใช้คลิกเมาส์ที่คอนโทรลในขณะรันโปรแกรม ทำให้เราสามารถตรวจสอบสถานะของเช็คบ็อกซ์ได้

คอนโทรลเรดิโอบัตทอน (RadioButton)
คอนโทรลเรดิโอบัตทอนนั้นจะคล้ายกับเช็คบ็อกซ์ แต่คอนโทรลนี้สามารถเลือกได้เพียงตัวเดียวเท่านั้นในกลุ่มหนึ่ง ถ้าเปลี่ยนเลือกตัวเลือกอื่นในกลุ่ม ตัวเลือกที่เลือกไว้ก่อนหน้าจะไม่ถูกเลือกโดยอัตโนมัติ การใช้งานเรดิโอบัตทอนนั้นมักจะใช้ร่วมกับคอนโทรลกรุ๊ป เพื่อใช้ในการแบ่งกลุ่มตัวเลือก โดยการใช้งานจะวางคอนโทรลกรุ๊ปลงไปก่อนแล้วจึงนำเรดิโอบัตทอนวางลงไป
เมื่อผู้ใช้คลิกเมาส์เลือกเรดิโอบัตทอน True ว่าเป็น True (ถูกเลือก) หรือเป็น False (ไม่ถูกเลือก) ผ่านทางอีเวนต์ Click ของคอนโทรล และเราสามารถกำหนดข้อความที่จะให้แสดง Radio Button ผ่านทางคุณสมบัติ Text ได้เช่นเดียวกับเช็คบ็อกซ์

คอนโทรลกรุ๊ปบ็อกซ์ (GroupBox)
คอนโทรลกรุ๊ปบ็อกซ์เป็นเหมือนกรอบควบคุม หรือคอนเทนเนอร์ (Container) ใช้สำหรับจัดกลุ่มคอนโทรลที่ต้องการใช้ร่วมกันให้เป็นกลุ่ม เช่น ใช้ในการแบ่งกลุ่มเรดิโอบัตทอนบนฟอร์มออกเป็นกลุ่มๆ เป็นต้น โดยทั่วไปแล้วกรุ๊ปบ็อกซ์เป็นคอนโทรลที่ช่วยเพิ่มความเรียบร้อยและความสวยงามของหน้าตาของโปรแกรมให้ดูดีมากขึ้น
ในการสร้างกลุ่มของคอนโทรลโดยการใช้กรุ๊ปบ็อกซ์ เราจะต้องวางกรุ๊ปบ็อกซ์ลงบนฟอร์มก่อนแล้วจึงวาดคอนโทรลที่ต้องการให้อยู่ในกรุ๊ปบ็อกซ์ลงไปทีหลัง และเวลาที่เลื่อนกรุ๊ปบ็อกซ์ คอนโทรลที่อยู่ในกรุ๊ปบ็อกซ์ก็จะเลื่อนตามไปด้วย ถ้าเราต้องการเลื่อนเฉพาะคอนโทรลที่อยู่ใน กรุ๊ปบ็อกซ์ ให้เราเลื่อนคอนโทรลในกรุ๊ปบ็อกซ์ แล้วจึงเลื่อนคอนโทรลที่เลือกนั้น
กรุ๊ปบ็อกซ์แต่ละตัวจะมีคุณสมบัติ Text ที่ใช้แสดงข้อความเป็นหัวข้อกรุ๊ปบ็อกซ์ ดังรูป
นอกจากนี้ยังสามารถกำหนดคุณสมบัติ Text แบบใช้คีย์ลัดได้เช่นเดียวกับคอนโทรลตัวอื่นๆ โดยใช้ตัวอักขระ & ไว้ด้านหน้าของตัวอักษรที่เราต้องการเลือกให้เป็นคีย์ลัด ซึ่งเมื่อเรากดคีย์ <Alt + ตัวอักขระตัวนั้น> จะเป็นการเลือกกรุ๊ปบ็อกนั้น

ตัวอย่าง แสดงการนำกรุ๊ปบ็อกซ์ เรดิโอบัตทอน และคอนโทรลอื่นๆ มาวางบนฟอร์มให้สร้างโปรเจ็กต์แล้วออกแบบฟอร์มพร้อมทั้งกำหนดชื่อดังต่อไปนี้

                1. นำคอนโทรลกรุ๊ปบ็แกซ์มาวางบนฟอร์ม แล้วเปลี่ยนคุณสมบัติ Text เป็น “ป้อนข้อมูล”
                2. นำคอนโทรลเลเบลวางในกรุ๊ปบ็อกซ์สองตัว ดังรูป แล้วเปลี่ยนคุณสมบัติ Text เป็น Input A และ Input B ตามลำดับ
                3. นำคอนโทรลเท็กซ์บ็อกซ์มาวางในกรุ๊ปบ็อกซ์สองตัว ดังรูป โดยแต่ละตัวมีชื่อเป็น TextBox1 และ TextBox2
                4. ทดลองย้ายกรุ๊ปบ็อกซ์ จะสังเกตเห็นว่าคอนโทรลต่างๆที่อยู่ในกรุ๊ปบ็อกซ์จะเลื่อนไปด้วย
                5. นำคอนโทรลกรุ๊ปบ็อกซ์มาวางบนฟอร์มดังรูป แล้วเปลี่ยนคุณสมบัติ Text เป็น “เลือก”
                6. นำคอนโทรลเรดิโอบัตทอน มาวางในกรุ๊ปบ็อกซ์ที่สอง สองตัวดังรูป แล้วเปลี่ยนคุณสมบัติ Text เป็น A และ B ตามลำดับ
                7. นำคอนโทรลเลเบลตัวที่สามมาวางบนฟอร์มแล้วให้แสดงคำว่า Output
                8. นำคอนโทรลเท็กซ์บ็อกซ์มาวางบนฟอร์ม โดยคอนโทรลตัวนี้มีชื่อเป็น TextBox3

สำหรับโปรแกรมนี้ต้องการให้ผู้ใช้ป้อนข้อมูลเข้าทางเท็กซ์บ็อกซ์อินพุตสองค่า เมื่อนำเมาส์เลือกที่เรดิโอบัตทอนตัวใด ให้โปรแกรมนำข้อความที่เลือกมาแสดงผลทางเท็กซ์บ็อกซ์เอาต์พุต การเขียนโปรแกรมให้ดับเบิลคลิกที่เรดิโอบัตทอนแต่ละตัว เพื่อเลือกอีเวนต์เป็นคลิก แล้วเขียนโปรแกรมลงไปดังนี้

สำหรับการรันโปรแกรมให้ทดลองดังนี้

จาการรันโปรแกรมจะพบว่าเรดิโอบัตทอนที่อยู่ใกล้กรุ๊ปบ็อกซ์เดียวกันจะถูกเลือกได้เพียงตัวเดียวเท่านั้น ในการออกแบบโปรแกรม ถ้าหากบนฟอร์มมีเรดิโอบัตทอนหลายตัว และต้องการเลือกมากกว่าหนึ่งตัว จะต้องนำกรุ๊ปบ็อกซ์มาประยุกต์ใช้

คอนโทรลลิสต์บ็อกซ์ (ListBox) และคอมโบบ็อกซ์ (ComboBox)
การใช้เรดิโอบัตทอนและเช็คบ็อกซ์นั้น ถ้านำมาใช้ในการแสดงตัวเลือกหลายๆตัว จะใช้เนื้อที่บนฟอร์มมาก สำหรับในกรณีที่มีหลายตัวเลือกเราสามารถนำ คอนโทรลลิสต์บ็อกซ์ และ คอมโบบ็อกซ์มาใช้แทนได้ ซึ่งสามารถแสดงตัวเลือกหลายๆตัวในแบบของรายการ ดังรูป

การเพิ่มตัวเลือกลงไปในรายการของคอนโทรลทั้งสองตัวทำได้โดยเรียกใช้เมธอด Add ของคอลเลคชัน Items ดังตัวอย่างต่อไปนี้ (คอลเลคชันเป็นกลุ่มของออบเจ็กต์ชนิดเดียวกัน ซึ่งจะอธิบายเพิ่มเติมในเรื่องการเขียนโปรแกรมเชิงวัตถุ )

ตัวอย่าง ถ้าหากสร้างคอนโทรลลิสต์บ็อกซ์ชื่อ ListBox1 การเพิ่มรายการลงไปทำได้ดังนี้

ลิสบ็อกซ์เป็นคอนโทรลที่ใช้แสดงรายการดังที่กล่าวมา ผู้ใช้สามารถคลิกเมาส์เลือกตัวเลือกที่ต้องการได้จากรายการที่แสดงในลิสต์ โดยรายการที่ผู้ใช้เลือกจะถูกนำมาเก็บไว้ในคุณสมบัติ Text ของลิสต์บ็อกซ์ตัวนั้น
สำหรับคอมโบบ็อกซ์นั้นเราสามารถเลือกตัวเลือกได้จากรายการ หรือจะพิมพ์ข้อมูลนอกรายการลงไปก็ได้ ไม่เหมือนกับลิสต์บ็อกซ์ที่เลือกจากรายการได้เพียงอย่างเดียว คอมโบบ็อกซ์มีลักษณะดังรูป โดยเราสามารถตรวจสอบรายการที่เลือกได้จากคุณสมบัติ Text เช่นกัน

สำหรับลิสต์บ็อกซ์และคอมโบบ็อกซ์นั้นมีอีเวนต์ที่สำคัญ คือ SelectedIndexChanged ที่เกิดเมื่อมีการเลือกตัวเลือก ส่วนของคอมโบบ็อกซ์นั้นจะมีอีเวนต์ที่สำคัญคือ TextChanged ซึ่งจะเกิดขึ้นเมื่อมีการเปลี่ยนข้อความในคอมโบบ็อกซ์

ตัวอย่าง แสดงการใช้งานลิสต์บ็อกซ์และคอมโบบ็อกซ์ โดยให้ผู้ใช้เลือกรายการ แล้วโปรแกรมนำรายการนั้นมาแสดงทางกล่องข้อความดังรูป

ขั้นตอนการสร้างโปรแกรมทำได้ดังนี้
1. สร้างโปรเจ็กต์ใหม่ นำคอนโทรลลิสต์บ็อกซ์และคอนโทรลคอมโบบ็อกซ์มาวางบนฟอร์ม แล้วกำหนดชื่อดังต่อไปนี้

2. ใช้เมาส์คลิกที่ฟอร์ม แล้วเลือกอีเวนต์ Load ที่หน้าต่างคุณสมบัติ ดับเบิลคลิกที่ Load เพื่อเข้าสู่หน้าต่างการเขียนโปรแกรม แล้วเขียนโปรแกรมกำหนดค่าเริ่มต้นให้กับลิสต์บ็อกซ์ และ คอมโบบ็อกซ์

3. ใช้เมาส์คลิกที่ลิสต์บ็อกซ์ แล้วเลือกอีเวนต์ SelectedIndex ที่หน้าต่างคุณสมบัติดับเบิลคลิกเพื่อเข้าสู่หน้าต่างการเขียนโปรแกรม แล้วเขียนโปรแกรมให้แสดงข้อความที่เลือกทางกล่องข้อความ
4. ใช้เมาส์คลิกที่คอมโบบ็อกซ์ แล้วเลือกอีเวนต์ TextChanged ดับเบิลคลิกเพื่อเข้าสู่หน้าต่างการเขียนโปรแกรม แล้วเขียนโปรแกรมให้แสดงข้อความที่เลือกทางกล่องข้อความ
โปรแกรมทั้งหมดที่เขียนเป็นดังนี้

Public Class Form1
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
Handles MyBase.Load

End Sub
Private Sub ListBox1_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles
ListBox1.SelectedIndexChanged
'แสดงข้อความที่เลือกในลิสบ็อกซ์
MsgBox ("List1 : " & ListBox1 .Text ,MsgBoxStyle.OkOnly)
End Sub
Private Sub ComboBox1_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles
ComboBox1.TextChanged
'แสดงข้อความที่เลือกในคอมโบบ็อกซ์
MsgBox("Combo1 : " & ComboBox1.Text, MsgBoxStyle.OkOnly)
End Sub
End Class

จากนั้นให้ทดลองรันโปรแกรม แล้วเลือกรายการต่างๆ และสังเกตผลที่ได้
การเพิ่มรายการในลิสต์บ็อกซ์
เราสามารถเพิ่มรายการเข้าไปในลิสต์บ็อกซ์ได้โดยใช้เมธอด Add ของคุณสมบัติ Items ซึ่งมีรูปแบบดังนี้

นอกจากนี้เรายังสามารถแทรกรายการเข้าไปในลิสบ็อกซ์ได้ โดยเรียกใช้เมธอด Insert ของคุณสมบัติ Items ซึ่งมีรูปแบบดังน

ถ้าหากต้องการเพิ่มรายการ โดยแทรกระหว่างรายการที่มีอยู่แล้วข้างต้น ให้เราใส่พารามิเตอร์ Index (ตำแหน่งที่จะใส่) ลงไปด้วย ดังตัวอย่าง

นอกจากวิธีการใช้คำสั่ง เรายังสามารถเพิ่มรายการเข้าไปในลิสต์บ็อกซ์ในตอนออกแบบโปรแกรมได้ด้วย โดยการใส่รายการที่ต้องการให้มีลิสต์บ็อกซ์เข้าไปในคุณสมบัติ Item ในหน้าต่างคุณสมบัติ ดังรูป

การเรียงรายการในลิสต์บ็อกซ์
การเรียงรายการในลิสต์บ็อกซ์ทำได้โดยกำหนดคุณสมบัติ Sorted ให้มีค่าเป็น True เพื่อให้รายการในลิสต์บ็อกซ์นั้นเรียงลำดับตัวอักษร โดยลักษณะการเรียงลำดับจะถือว่าอักขระตัวใหญ่กับตัวเล็กนั้นเหมือนกัน

การลบรายการออกจากลิสต์บ็อกซ์
เราสามารถลบรายการออกจากลิสต์บ็อกซ์ได้ โดยใช้เมธอด RemoveAt ของคุณสมบัติ Items ซึ่งมีรูปแบบการใช้งานดังนี้

จากรูปแบบข้างต้น Index เป็นตำแหน่งของรายการที่จะลบออกจากลิสต์บ็อกซ์ โดย O คือตำแหน่งรายการที่ 1 แต่ถ้าหากต้องการลบรายการทั้งหมดออกจากลิสต์บ็อกซ์ให้ใช้เมธอด Clear โดยมีรูปแบบดังนี้

การเข้าถึงรายการในลิสต์บ็อกซ์
เราสามารถเข้าถึงรายการในลิสต์บ็อกซ์ได้โดยผ่านคุณสมบัติ Items และอ้างอิงตำแหน่งตามลำดับรายการในลิสต์ โดยมีรูปแบบดังนี้

โดย Index จะเป็นตำแหน่งที่เราต้องการเข้าถึงค่าของรายการในลิสต์บ็อกซ์ ตัวอย่างเช่นถ้าหากเขียนคำสั่งเป็น

กำหนดค่า Index เป็น 0 เมื่อรันโปรแกรมจะแสดงรายการแรกสุดออกมาทางหน้าต่าง Output แต่ถ้าต้องการแสดงรายการที่ถูกเลือก ณ เวลานั้น จะใช้คุณสมบัติ SelectedIndex ซึ่งเป็นคุณสมบัติที่มีตอนรันโปรแกรมเท่านั้น โดยคุณสมบัตินี้จะคืนค่า Index หรือตำแหน่งที่ผู้ใช้ได้เลือกไว้ ถ้าค่านี้เป็น -1 หมายความว่ายังไม่มีรายการใดถูกเลือก

การหาจำนวนรายการในลิสต์บ็อกซ์
เราสามารถตรวจสอบจำนวนรายการในลิสต์บ็อกซ์ได้ โดยผ่านคุณสมบัติ Count ของคุณสมบัติ Items ของลิสต์บ็อกซ์เช่น

การกำหนดวิธีเลือกรายการในลิสต์บ็อกซ์
เราสามารถกำหนดว่า จะให้ผู้ใช้เลือกรายการในลิสต์บ็อกซ์ทีละรายการ หรือหลายรายการโดยกำหนดที่คุณสมบัติ SelectionMode ซึ่งแต่ละค่าจะมีความหมายดังตารางต่อไปนี้

ตัวอย่าง เป็นตัวอย่างการเขียนโปรแกรมรับข้อมูลจากเท็กซ์บ็อกซ์ เมื่อคลิกปุ่ม Add จะนำข้อมูลไปในลิสต์บ็อกซ์

วิธีการออกแบบโปรแกรม
1. สร้างโปรเจ็กต์ใหม่ แล้วนำคอนโทรลต่างๆมาวางบนฟอร์ม โดยกำหนดชื่อและคุณสมบัติต่างๆ ดังนี้

2. เขียนโปรแกรมให้กับปุ่ม Add โดยดับเบิลคลิกที่ปุ่มแล้วเขียนโปรแกรมอ่านข้อมูลจากเท็กซ์บ็อกซ์ไปเพิ่มในลิสต์บ็อกซ์
3. เขียนโปรแกรมให้กับปุ่ม Remove โดยลบข้อมูลที่เลือกในลิสต์บ็อกซ์

โปรแกรมที่เขียนขึ้นจะเป็นดังนี้

การกำหนดค่ารูปแบบของคอมโบบ็อกซ์
คอมโบบ็อกซ์เป็นคอนโทรลที่รวมความสามารถของเท็กซ์บ็อกซ์และลิสต์บ็อกซ์เข้าไว้ด้วยกันทำให้เราสารถเลือกรายการได้เช่นเดียวกับลิวต์บ็อกซ์ รวมทั้งสามารถแก้ไขรายการได้เหมือนกับเท็กซ์บ็อกซ์ คอมโบ บ็อกซ์จะใช้พื้นที่น้อยกว่าลิสต์บ็อกซ์ และใช้คำสั่งในการทำงานคล้ายกันดังนั้นเราสามารถนำความรู้เกี่ยวกับลิสต์บ็อกซ์มาใช้กับคอมโบบ็อกซ์ได้

เราสามารถกำหนดรูปแบบของคอมโบบ็อกซ์ได้ โดยผ่านทางคุณสมบัติ DropDownStyle โดยคอมโบบ็อกซ์มีรูปแบบที่ใช้งานอยู่ 3 รูปแบบดังตารางต่อไปนี้

สำหรับรายละเอียดของคอมโบบ็อกซ์แต่ละรูปแบบเป็นดังนี้
1. ซิมเปิลคอมโบบ็อกซ์ (Simple ComboBox) เป็นคอมโบบ็อกซ์ที่มีลักษณะดังรูป ซึ่งจะแสดงรายการที่มีอยู่ตลอดเวลา และเมื่อจำนวนรายการเกินความสูงของคอนโทรล ตัวคอนโทรลจะแสดงสกรอลบาร์แนวตั้ง เพื่อให้เลื่อนดูรายการที่เหลือได้

2. ดรอปดาวน์คอมโบบ็อกซ์ (Dropdown ComboBox) เป็นคอมโบ บ็อกซ์ที่มีลักษณะดังรูป ซึ่งผู้ใช้สามารถใส่ค่าลงไปได้โดยตรง หรือเลือกจากรายการที่มีอยู่ได้ โดยการคลิกที่ปุ่มลูกศรชี้ลง เมื่อเลือกตัวเลือกใดในรายการแล้ว ตัวเลือกนั้นจะแสดงอยู่ช่องข้างบนสุดของคอนโทรล

3. ดรอปดาวน์ลิสต์บ็อกซ์ (Dropdown ListBox) เป็นคอมโบบ็อกซ์ที่มีลักษณะดังรูป เป็นคอมโบบ็อกซ์ที่คล้ายกับลิสต์บ็อกซ์แต่จะประหยัดเนื้อที่ที่ใช้แสดงรายการมากกว่า โดยที่เราต้องคลิกเมาส์ปุ่มลูกศรลงเพื่อดูรายการทั้งหมด และคอมโบบ็อกซ์แบบนี้จะไม่สามารถใส่ค่าเองได้ จะเลือกข้อมูลจากรายการที่มีอยู่ได้เท่านั้น

สำหรับการเพิ่มรายการ การเรียงรายการ การลบรายการ การหาตำแหน่งรายการ การเข้าถึงรายการ เป็นส่วนที่มีการใช้งานเหมือนกับลิสต์บ็อกซ์ทุกประการ ดังนั้นเราสามารถย้อนกลับไปดูวิธีจัดการได้ ในเนื้อหาของลิวต์บ็อกซ์

คอนโทรลพิกเจอร์บ็อกซ์ (PictureBox)
การแสดงรูปภาพบนฟอร์มสามารถทำได้โดยการนำคอนโทรลพิกเจอร์บ็อกซ์ (Picture Box) มาใช้ คอนโทรลตัวนี้สามารถแสดงรูปภาพได้หลายรูปแบบ สำหรับคุณสมบัติพื้นฐานที่ควรรู้จักในเบื้องต้นมีดังนี้
Image เป็นออบเจ็กต์ที่ใช้สำหรับอ้างถึงรูปภาพ
Visible ใช้สำหรับกำหนดให้แสดงหรือไม่แสดงรูปภาพ
(กำหนดเป็น True หรือ False)
SizeMode ใช้สำหรับกำหนดรูปแบบการแสดงรูปภาพ โดยสมีโหมดดังนี้
• Normal แสดงรูปตามขนาดจริง
• CenterImage แสดงรูปกลางพิกเจอร์บ็อกซ์ตามขนาดจริง
• StretchImage แสดงรูปพอดีขนาดของพิกเจอร์บ็อกซ์
• AutoSize ปรับขนาดของพิวเจอร์บ็อกซ์ตามขนาดของรูป
• Zoom ย่อหรือขยายรูปให้อยู่ในพิกเจอร์บ็อกซ์ตามสัดส่วนจริง

ตัวอย่าง แสดงการใช้พิกเจอร์บ็อกซ์เบื้องต้น โดยเขียนโปรแกรมให้คลิกปุ่ม Show แล้วแสดงรูปภาพ ให้สร้างโปรเจ็กต์ใหม่ตามขั้นตอนต่อไปนี้
1. นำคอนโทรลพิกเจอร์บ็อกซ์ และคอนโทรลปุ่มคำสั่งมาวางบนฟอร์ม
2. เปลี่ยนคุณสมบัติ Text ของปุ่มคำสั่งเป็น "Show"
3. คลิกเมาส์ที่พิกเจอร์บ็อกซ์บนฟอร์มแล้วเลือกคุณสมบัติ Image ในหน้าต่างคุณสมบัติเพื่อเลือกรูปภาพที่จะนำมาแสดง

4. เมื่อคลิกปุ่มเลือกรูปภาพจะปรากฏหน้าต่าง Select Resource ให้คลิกปุ่ม Import แล้วเลือกไฟล์รูปภาพจากเครื่องคอมพิวเตอร์ จากนั้นคลิกปุ่ม OK

5. เลือกคุณสมบัติ Visible ของพิกเจอร์บ็อกซ์ให้เป็น False เพื่อไม่ให้แสดงภาพ และ เลือก SideMode ให้เป็น StretchImage

6. เขียนโปรแกรมให้กับปุ่มคำสั่ง โดยดับเบิลคลิกที่ปุ่ม Show แล้วเขียนโค้ดโดยเปลี่ยนคุณสมบัติ Visible เป็น True

เมื่อรันโปรแกรมแล้วใช้เมาส์คลิกที่ปุ่ม Show โปรแกรมจะแสดงภาพออกมา ดังนี้