หน้าที่ของคอนโทรล ComboBox คอนโทรล ComboBox ใช้สาหรับเก็บรายการตัวเลือกโดยการเขียนรหัสคาสั่งเพื่อบรรจุ รายการเข้า ปกติจะแสดงตัวเลือกที่บรรจุไว้ครั้งละ 1 รายการ เมื่อผู้ใช้คลิกที่ปุ่ม (Drop Down) จะ ปรากฏแถบแสดงรายการ เมื่อคลิกเลือกรายการ แถบจะถูกเก็บ และรายการที่เลือกจะไปปรากฏบน คอนโทรล (ลักษณะเหมือนขั้นตอนการเปิดลิ้นชักหยิบของมาวางบนโต๊ะ) ซึ่งนักศึกษาจะพบคอนโทรลนี้ในแถบเครื่องมือเปลี่ยนขนาดฟอนต์ของ Word
การจัดวางคอนโทรล ComboBox ลงบนฟอร์ม ขั้นตอนมีดังต่อไปนี้ 1. คลิกเมาส์ที่ปุ่ม ComboBox ที่แถบเครื่องมือ 1 ครั้ง(ปุ่มจะยุบลง)
2 1
3
2. เลื่อนเมาส์ไปยังพื้นที่ฟอร์ม คลิกเมาส์ค้างไว้วาดลงบนฟอร์ม แล้วปล่อยปุ่มเมาส์ 3. ย้าย หรือ ปรับขนาด(ความกว้าง) ของ ComboBox ตามความเหมาะสม
คุณสมบัติ (Properties) ที่สาคัญของคอนโทรล ComboBox Properties Name
รายละเอียด ชื่อของคอนโทรลที่ใช้อ้างถึงในโปรแกรม
ListCount
ค่าที่ได้จากจานวนรายการทั้งหมดของ ComboBox รูปแบบการแสดงรายการของ ComboBox รายละเอียดคือ 0-Dropdown Combo แสดงรายการให้คลิกเลือกและพิมพ์ข้อความ ได้เหมือน TextBox 1-Simple Combo เหมือน TextBox แต่เลือกรายการด้วยแป้น พิมพ์ โดยการกดแป้นลูกศร ขึ้น-ลง 2-Dropdown List แสดงรายการให้คลิกเลือก แต่พิมพ์ข้อความลง ใน ComboBox ไม่ได้(หัวข้อนี้นิยมใช้) ค่าเลขลาดับที่ได้จากการคลิกเลือกรายการใน ComboBox เข้าถึงรายการตามตาแหน่งที่ระบุ(ใช้ได้ทั้งกาหนดค่าและอ่านค่า) นิยม ใช้ร่วมกับคุณสมบัติ ListIndex
Style
ListIndex List
หมายเหตุ ตัวอักษรในตารางที่ไม่เป็นตัวหนาคือค่า Properties พื้นฐานสามารถกาหนดได้ เหมือนกับคอนโทรลทั่วไป ซึ่งในบทนี้จะเสนอเฉพาะที่จาเป็นและนิยมใช้ กับ คอนโทรล ComboBox เท่านั้น
เหตุการณ์ (Event) สาคัญที่เกิดขึ้นกับคอนโทรล ComboBox Event Change Click DblClick GotFocus LostFocus
รายละเอียด เมื่อมีการเปลี่ยนแปลงค่าในคอนโทรล ขณะ Run โปรแกรม เมื่อคลิกเมาส์ที่คอนโทรล เมื่อดับเบิลคลิกเมาส์ที่คอนโทรล เมื่อคอนโทรลได้รับการโฟกัส(ถูกเลือก) เมื่อคอนโทรลไม่ได้รับการโฟกัส(ไม่ถูกเลือก)
หมายเหตุ ส่วนมากการใช้งาน จะสนใจค่า Properties ที่ส่งค่ารายการที่เลือกออกมา ส่วน Event นักศึกษาก็ยังสามารถนาไปประยุกต์ใช้ ได้ตามความเหมาะสม
ความสามารถ (Method) ที่สาคัญของคอนโทรล ComboBox Method AddItem RemoveItem Clear
รายละเอียด เพิ่มรายการเข้าไปบรรจุใน ComboBox ลบรายการที่ระบุ ออกจาก ComboBox ลบรายการทั้งหมดออกจาก ComboBox
หมายเหตุ การกาหนด Method สามารถทาได้ที่หน้าต่างการเขียนรหัสโปรแกรมเท่านั้น
ตัวอย่างการใช้ Propertiesและ Method ที่สาคัญของคอนโทรล ComboBox 1. การกาหนด Properties หัวข้อ Style(รูปแบบแสดงรายการให้เลือก) ของคอนโทรลและทดสอบการ ทางาน ขั้นตอนมีดังนี้ 1.1. วาดคอนโทรล Label ลงบนฟอร์ม 3 คอนโทรล และกาหนด Properties หัวข้อ Caption พิมพ์ Style = 0-Dropdown Combo ,Style = 1-Simple Combo และ Style = 2-Dropdownlist ตามลาดับ จัดขนาดและวางตามตาแหน่งดังรูป 1.1 1.2
1.2. วาดคอนโทรล ComboBox ลงบนฟอร์ม 3 คอนโทรล บริเวณใต้คอนโทรล Label ทั้งสาม 1.3. กาหนด Properties ของคอนโทรล ComboBox ทั้ง 3 ตัว ดังนี้ 1.3.1. กาหนดหัวข้อ Style(รูปแบบแสดงรายการให้เลือก) ของคอนโทรล Combo1
1.3.2
1.3.3
1.3.2. คลิกเลือก 1 ครั้งบนคอนโทรล Combo1 (สังเกตจะปรากฏกล่องสี่เหลี่ยมล้อม) 1.3.3. กาหนด Properties หัวข้อ Style เลือก 0-Dropdown Combo 1.3.4. กาหนดหัวข้อ Style(รูปแบบแสดงรายการให้เลือก) ของคอนโทรล Combo2
1.3.5
1.3.6
1.3.5. คลิกเลือก 1 ครั้งบนคอนโทรล Combo2 (สังเกตจะปรากฏกล่องสี่เหลี่ยมล้อม) 1.3.6. กาหนด Properties หัวข้อ Style เลือก 1-Simple Combo 1.3.7. กาหนดหัวข้อ Style(รูปแบบแสดงรายการให้เลือก) ของคอนโทรล Combo3
1.3.8
1.3.9
1.3.8. คลิกเลือก 1 ครั้งบนคอนโทรล Combo3 (สังเกตจะปรากฏกล่องสี่เหลี่ยมล้อม) 1.3.9. กาหนด Properties หัวข้อ Style เลือก 2-Dropdown List 1.4. กาหนดคาสั่งตามเหตุการณ์ให้กับฟอร์มดังนี้ 1.5. เมื่อเกิดเหตุการณ์ Form Load (เมื่อฟอร์มถูกเรียกให้ทางาน) 1.6. ดับเบิลคลิกบนพื้นที่ของ Form1 จะปรากฏหน้าต่างรหัสโปรแกรม(Code)
1.6
1.7. คลิกเลือกเหตุการณ์ Load 1.7
อธิบายรหัสโปรแกรม เป็นการใช้ Method AddItem เพิ่ม รายการเข้าไปใน ComboBox ทั้งสาม
อธิบายรหัสโปรแกรม กาหนดให้ ComboBox ทุกตัว เริ่มต้นแสดงที่รายการแรก
1.8. พิมพ์คำสั่งดังต่อไปนี้ Combo1.AddItem "รายการที่ 1" Combo1.AddItem "รายการที่ 2" Combo1.AddItem "รายการที่ 3" Combo2.AddItem "รายการที่ 1"
Combo2.AddItem "รายการที่ 2" Combo2.AddItem "รายการที่ 3" Combo3.AddItem "รายการที่ 1" Combo3.AddItem "รายการที่ 2" Combo3.AddItem "รายการที่ 3" Combo1.ListIndex = 0 Combo2.ListIndex = 0 Combo3.ListIndex = 0
1.4. กดแป้นพิมพ์ F5 (Run โปรแกรม หรือคลิก
ที่แถบเครื่องมือด้านบน)
1.5. คลิกเลือกปุ่ม DropDown ของ Combo1 (ใต้ข้อความ Style = 0-Dropdown Combo) จะพบว่า ปรากฏ 3 รายการให้เลือก และสามารถพิมพ์ข้อความใน ComboBox นั้นได้ 1.6. คลิกเลือกข้อความใน Combo2 (ใต้ข้อความ Style = 1-Simple Combo) จะพบว่าปรากฏ เพียง 1 รายการให้เลือก โดยการใช้แป้นพิมพ์ปุ่มทิศทาง ขึ้น-ลง และสามารถพิมพ์ข้อความใน ComboBox นั้นได้ 1.7. คลิกเลือกปุ่ม DropDown ของ Combo3 (ใต้ข้อความ Style = 2-Dropdown List) จะพบว่าปรากฏ 3 รายการให้เลือก แต่ไม่สามารถพิมพ์ข้อความใน ComboBox นั้นได้ 1.8. หยุดการทางานของโปรแกรม คลิก ที่แถบเครื่องมือด้านบน 2. การใช้ Properties หัวข้อ ListCount , ListIndex , List และ Method AddItem , RemoveItem , Clear ของคอนโทรลและทดสอบการทางาน ขั้นตอนมีดังนี้ 2.1. วาดคอนโทรล Frame ลงบนฟอร์ม 2 คอนโทรล และกาหนด Properties หัวข้อ Caption พิมพ์ Properties ของ ComboBox และ Method ของ ComboBox ตามลาดับ จัดขนาดและวางตาม ตาแหน่งดังรูป 2.1
2.2. วาดคอนโทรล ComboBox ลงบนฟอร์ม 1 คอนโทรล กาหนด Properties หัวข้อ Style เลือก 2Dropdown List วาด CommandButton ลงบน Frame1(Properties ของ ComboBox) จานวน 3 ปุ่ม กาหนด Propertiesหัวข้อ Caption พิมพ์ แสดงจานวนรายการทั้งหมด ,แสดงลาดับที่เลือก และ แสดงรายการที่เลือก ตามลาดับ จัดขนาดและวางตามตาแหน่งดังรูป
2.2
2.3. วาดคอนโทรล Label ลงบน Frame2(Method ของ ComboBox) จานวน 2 คอนโทรล กาหนด Properties หัวข้อ Caption พิมพ์ พิมพ์ข้อมูลที่ต้องการเพิ่ม, พิมพ์ตาแหน่งที่จะลบ ตามลาดับ จัด ขนาดและวางตามตาแหน่งดังรูป 2.4. วาดคอนโทรล TextBox ลงบน Frame2(Method ของ ComboBox) จานวน 2 คอนโทรล กาหนด Properties หัวข้อ Text ให้ลบออกให้เป็นช่องว่าง ทั้ง 2 คอนโทรล จัดขนาดและวางตามตาแหน่ง ดังรูป 2.5. วาดคอนโทรล CommandButton ลงบน Frame2(Method ของ ComboBox) จานวน 3 ปุ่ม กาหนด Properties หัวข้อ Caption พิมพ์ เพิ่ม , ลบ และ ลบรายการทั้งหมด ตามลาดับ จัดขนาดและวาง ตามตาแหน่งดังรูป
2.4
2.3
2.5
2.6. กาหนดคาสั่งตามเหตุการณ์ Command1_Click() (เมื่อคลิกที่ปุ่ม ) ดับเบิลคลิกบนปุ่ม จะปรากฏหน้าต่างรหัสโปรแกรม(Code)
2.7
อธิบายการทางาน แสดงจานวนรายการทั้งหมดใน Combo1 โดยใช้ Properties หัวข้อ ListCount
2.7. คลิกเลือกเหตุการณ์ Click พิมพ์รหัสโปรแกรมดังรูป 2.8. กาหนดคาสั่งตามเหตุการณ์ Command2_Click() (เมื่อคลิกที่ปุ่ม ) ดับเบิลคลิกบนปุ่ม จะปรากฏหน้าต่างรหัสโปรแกรม(Code)
2.9
อธิบายการทางาน แสดงตาแหน่งรายการที่เลือกโดยใช้ Properties หัวข้อ ListIndex (ตาแหน่งจริง ต้องลบด้วย 1 เพราะรายการแรกตาแหน่ง จะเริ่มต้นจาก 0)
2.9. คลิกเลือกเหตุการณ์ Click พิมพ์รหัสโปรแกรมดังรูป
2.10. กาหนดคาสั่งตามเหตุการณ์ Command3_Click() (เมื่อคลิกที่ปุ่ม ) ดับเบิลคลิกบนปุ่ม จะปรากฏหน้าต่างรหัสโปรแกรม(Code) 2.11
อธิบายการทางาน แสดงรายการที่เลือกโดยใช้ Properties หัวข้อ List โดยใช้ ListIndex เป็นดัชนีใน การชี้ตาแหน่งรายการ
2.11. คลิกเลือกเหตุการณ์ Click พิมพ์รหัสโปรแกรมดังรูป 2.12. กาหนดคาสั่งตามเหตุการณ์ Command4_Click() (เมื่อคลิกที่ปุ่ม ปุ่ม จะปรากฏหน้าต่างรหัส โปรแกรม(Code)
) ดับเบิลคลิกบน
2.13
อธิบายการทางาน เพิ่มข้อความที่อยู่ใน Text1 เข้าไปใน Combo1 โดยใช้ Method AddItem
2.13. คลิกเลือกเหตุการณ์ Click พิมพ์รหัสโปรแกรมดังรูป 2.14. กาหนดคาสั่งตามเหตุการณ์ Command5_Click() (เมื่อคลิกที่ปุ่ม ปุ่ม จะปรากฏหน้าต่างรหัส โปรแกรม(Code)
) ดับเบิลคลิกบน
2.15
อธิบายการทางาน ลบรายการตาแหน่งตามตัวเลขในช่อง Text2 ออกจาก Combo1 โดยใช้ Method RemoveItem
1.1. คลิกเลือกเหตุการณ์ Click พิมพ์รหัสโปรแกรมดังรูป 1.2. กาหนดคาสั่งตามเหตุการณ์ Command6_Click() (เมื่อคลิกที่ปุ่ม ) ดับเบิลคลิกบนปุ่ม ปรากฏหน้าต่างรหัสโปรแกรม(Code)
จะ
2.17
อธิบายการทางาน ลบราการทั้งหมดออกจาก Combo1 โดย ใช้ Method Clear
1.3. คลิกเลือกเหตุการณ์ Click พิมพ์รหัสโปรแกรมดังรูป 1.4. กดแป้นพิมพ์ F5 (Run โปรแกรม หรือคลิก
ที่แถบเครื่องมือด้านบน)
1.5. คลิกเลือกปุ่ม DropDown ของ Combo1 จะพบว่ายังไม่ปรากฏรายการใดๆ ให้เลือก 1.6. คลิกเลือกในช่อง ปุ่ม
พิมพ์ ส้มโอ แล้วคลิกที่
1.7. ทาขั้นตอนที่ 2.20 ซ้าโดยการพิมพ์ มังคุด ละมุด 1.8. คลิกเมาส์ที่ปุ่ม ใน Combo1 ซึ่งขณะนี้มี 3 รายการ
จะปรากฏหน้าต่างแสดงจานวนรายการ ทั้งหมด
2.15. คลิกที่ปุ่ม DropDown ของ Combo1 เลือกรายการ มังคุด
2.23
2.16. คลิกเมาส์ที่ปุ่ม จะปรากฏหน้าต่างแสดงลาดับของรายการที่เลือก ใน Combo1 ซึ่ง มังคุด จะอยู่ในลาดับที่ 2 แต่ค่าจริงคือ 1 เนื่องจากรายการแรกคือ ส้มโอ จะอยู่ใน ตาแหน่งที่เริ่มจาก 0
2.17. คลิกเลือกในช่อง
พิมพ์ 1 แล้วคลิกที่ ปุ่ม
2.18. คลิกที่ปุ่ม DropDown ของ Combo1 จะพบว่ารายการ มังคุด หายไป เนื่องจากผลของคาสั่งลบ รายการตาแหน่งที่ 1 (ตาแหน่งจริงคือรายการที่ 2 ) ตาแหน่ง
รายการ 0 1 2
ส้มโอ มังคุด ละมุด
2.19. คลิกเมาส์ที่ปุ่ม ใน Combo1 ซึ่งขณะนี้เหลือ 2 รายการ
2.20. คลิกเมาส์ที่ปุ่ม
ถูกลบ
จะปรากฏหน้าต่างแสดงจานวนรายการ ทั้งหมด
2.21. คลิกที่ปุ่ม DropDown ของ Combo1 จะพบว่าไม่ปรากฏรายการใดๆ ให้เลือก เนื่องจากผลของ คาสั่ง Clear 2.29
2.22. หยุดการทางานของโปรแกรม คลิก
ที่แถบเครื่องมือด้านบน
ตัวอย่างการใช้ ComboBox กับคอนโทรลพื้นฐานมาสร้าง โปรแกรม 1. คลิกที่เมนูคาสั่ง File > New Project 2. ปรับขนาดฟอร์ม ดังรูป 3. วาดคอนโทรล ลงบนพื้นที่ฟอร์มดังนี้ 3.1. วาดคอนโทรล TextBox ลงบนฟอร์ม จานวน 1 คอนโทรล กาหนด Properties หัวข้อ Text พิมพ์ ข้อความ 3.2. วาดคอนโทรล Frame ลงบนฟอร์ม จานวน 1 คอนโทรล กาหนด Properties หัวข้อ Caption พิมพ์ ลักษณะอักษร 3.3. วาดคอนโทรล CheckBox ลงใน Frame จานวน 3 คอนโทรล กาหนด Properties หัวข้อ Caption พิมพ์ ตัวหนา , ตัวเอียง และ ขีดเส้นใต้ ตามลาดับ
3.1 3.2 3.3
3.4
3.5 3.6
1.1. วาดคอนโทรล Label ลงบนฟอร์ม จานวน 2 คอนโทรล กาหนด Properties หัวข้อ Caption พิมพ์ สีอักษร และ ขนาด ตามลาดับ 1.2. วาดคอนโทรล ComboBox ลงบนฟอร์ม จานวน 2 คอนโทรล กาหนด Properties หัวข้อ Style เลือก 2-Dropdown List 1.3. วาดคอนโทรล CommandButton ลงบนฟอร์ม จานวน 2 คอนโทรล กาหนด Properties หัวข้อ Caption พิมพ์ ตกลง และ ยกเลิก ตามลาดับ 2. กาหนดคาสั่งตามเหตุการณ์ให้กับคอนโทรลดังนี้ 2.1. เมื่อเกิดเหตุการณ์ Form_Load() (เมื่อฟอร์มเริ่มทางาน) 2.1.1. ดับเบิลคลิกที่คอนโทรล Form1 จะปรากฏหน้าต่างรหัสโปรแกรม(Code) 4.1.2
อธิบายการทางาน เพิ่มรายการตัวเลือกสีอักษรคือ แดง,น้าเงิน และ ดา โดยใช้ Method AddItem ของ Combo1 อธิบายการทางาน เพิ่มรายการตัวเลือกขนาดอักษรคือ 8,16 และ 32 โดยใช้ Method AddItem ของ Combo2
2.1.2. คลิกเลือกเหตุการณ์ Load 2.1.3. พิมพ์คาสั่งดังนี้ Combo1.AddItem "แดง" Combo1.AddItem "น้าเงิน" Combo1.AddItem "ดา" Combo2.AddItem 8 Combo2.AddItem 16 Combo2.AddItem 32
3.4. เมื่อเกิดเหตุการณ์ Click บนคอนโทรล Command1 ( 3.4.1. ดับเบิลคลิกที่คอนโทรล Command1 ( (Code)
) ) จะปรากฏหน้าต่างรหัสโปรแกรม
4.2.2
3.4.2. คลิกเลือกเหตุการณ์ Click 3.4.3. พิมพ์คาสั่งดังนี้ Text1.FontBold = False Text1.FontItalic = False Text1.FontUnderline = False If Check1.Value = Checked Then Text1.FontBold = True If Check2.Value = Checked Then Text1.FontItalic = True If Check3.Value = Checked Then Text1.FontUnderline = True If Combo1.ListIndex = 0 Then Text1.ForeColor = RGB(255, 0, 0) If Combo1.ListIndex = 1 Then Text1.ForeColor = RGB(0, 0, 255) If Combo1.ListIndex = 2 Then Text1.ForeColor = RGB(0, 0, 0) If Combo2.ListIndex = 0 Then Text1.FontSize = 8 If Combo2.ListIndex = 1 Then Text1.FontSize = 16 If Combo2.ListIndex = 2 Then Text1.FontSize = 32
อธิบายการทางานของรหัสโปรแกรม Text1.FontBold = False <-กาหนดให้ตัวอักษรใน Text1 แบบ ไม่เป็นตัวหนา Text1.FontItalic = False <-กาหนดให้ตัวอักษรใน Text1 แบบ ไม่เป็นตัวเอียง Text1.FontUnderline = False <-กาหนดให้ตัวอักษรใน Text1 แบบ ไม่มีเส้นใต้ If Check1.Value = Checked Then Text1.FontBold = True ถ้า ถูกเช็ค ให้ตัวอักษรใน Text1 เป็นแบบตัวหนา If Check2.Value = Checked Then Text1.FontItalic = True ถ้า ถูกเช็ค ให้ตัวอักษรใน Text1 เป็นแบบตัวเอียง If Check3.Value = Checked Then Text1.FontUnderline = True ถ้า ถูกเช็ค ให้ตัวอักษรใน Text1 เป็นแบบมีเส้นใต้
If Combo1.ListIndex = 0 Then Text1.ForeColor = RGB(255, 0, 0) ถ้าเลือกรายการแรก ให้สีอักษรใน Text1 เป็นสีแดง If Combo1.ListIndex = 1 Then Text1.ForeColor = RGB(0, 0, 255) ถ้าเลือกรายการที่ 2 ให้สีอักษรใน Text1 เป็นสีน้าเงิน If Combo1.ListIndex = 2 Then Text1.ForeColor = RGB(0, 0, 0) ถ้าเลือกรายการที่ 3 ให้สีอักษรใน Text1 เป็นสีดา
หมายเหตุ RGB เป็นฟังก์ชันให้ค่าสีโดยการผสมแม่สี 3 สี คือ แดง,เขียว,น้าเงิน ซึ่งแต่ละ แม่สีสามารถกาหนดได้ 256 เฉดสี เมื่อรวมกันแล้วจะได้ถึง 16.7 ล้านสี(256x256x256) If Combo2.ListIndex = 0 Then Text1.FontSize = 8 ถ้าเลือกรายการแรก ให้ขนาดอักษรใน Text1 เป็น 8 If Combo2.ListIndex = 1 Then Text1.FontSize = 16 ถ้าเลือกรายการแรก ให้ขนาดอักษรใน Text1 เป็น 16 If Combo2.ListIndex = 2 Then Text1.FontSize = 32 ถ้าเลือกรายการแรก ให้ขนาดอักษรใน Text1 เป็น 32
1.1. เมื่อเกิดเหตุการณ์ Click บนคอนโทรล Command2 (
)
1.1.1. ดับเบิลคลิกที่คอนโทรล Command2 ( (Code)
) จะปรากฏหน้าต่างรหัสโปรแกรม
4.3.2
1.1.2. คลิกเลือกเหตุการณ์ Click 1.1.3. พิมพ์คาสั่งดังนี้ Unload Me
อธิบายการทางานของรหัสโปรแกรม Unload Me <-ปิดฟอร์มปัจจุบันที่แสดงผลอยู่
2. กดแป้นพิมพ์ F5 (Run โปรแกรม หรือคลิก ที่แถบเครื่องมือด้านบน 3. คลิกเมาส์เลือกที่ และ เลือกสีอักษร เลือกขนาดอักษร 4. คลิกเมาส์ที่ปุ่ม จะได้ผลดังรูป
6 8 7
12.คลิกที่ปุ่ม
โปรแกรมจะหยุดการทางาน