(Basic Control)

บทที่ 5 การใช้งานคอนโทรลพื้นฐาน
(Basic Control)

คอนโทรล (Control)
• คอนโทรล คือ ส่วนประกอบที่ใช้ในการสร้างหน้าจอของโปรแกรม ซึ่งมี
ความส าคัญ เนื่องจากเป็นส่วนที่ติดต่อกับผู้ใช้โดยตรง
• การเลือกคอนโทรลที่เหมาะสมในการออกแบบโปรแกรม จะช่วยให้โปรแกรมใช้
งานง่าย และสามารถเขียนโค้ดได้ง่ายด้วย
• ส าหรับ Common Control ซึ่งมีคอนโทรลมากที่สุด และถูกใช้งานบ่อย
ที่สุด โดยสามารถแบ่งตามหน้าที่การท างานได้เป็น 4 กลุ่ม ดังนี้
- คอนโทรลเกี่ยวกับการออกค าสั่ง - คอนโทรลเกี่ยวกับข้อความ
- คอนโทรลเกี่ยวกับการเลือก - คอนโทรลอื่นๆ

คอนโทรล Label
• ลาเบล หรือป้ายข้อความ เป็นคอนโทรลที่ใช้แสดงข้อความที่ไม่ต้องการให้ผู้ใช้
แก้ไขได้
• Property ที่ส าคัญ
oBorderStyle ก าหนดรูปแบบของเส้นขอบ โดยค่าที่ก าหนดได้ คือ
None, FixedSingle และ Fixed3D
oFont ก าหนดรูปแบบตัวอักษรของข้อความที่แสดงใน Label
oText ก าหนดข้อความที่จะแสดงใน Label
oTextAlign ก าหนดรูปแบบการจัดวางข้อความใน Label

คอนโทรล Textbox
• เป็นช่องรับข้อความ หรือแสดงข้อความที่ให้ผู้ใช้แก้ไขได้
• Property ที่ส าคัญ
o Multiline หากก าหนดค่าเป็น TRUE จะกลายเป็น Textbox แบบหลายบรรทัด
หากค่าเป็น FALSE เป็น Textbox ที่แสดงและรับข้อความได้เพียงบรรทัดเดียว
o PasswordChar ถ้าก าหนดตัวอักษรใดๆ จะท าให้ Textbox กลายเป็นช่องรับ
รหัสผ่าน โดยตัวอักษรที่ผู้ใช้ป้อนเข้ามา จะถูกแทนที่ด้วยตัวอักษรที่ก าหนดแทน
o Readonly หากก าหนดค่าเป็น TRUE ผู้ใช้จะไม่สามารถป้อนข้อความ หรือแก้ไข
ข้อความใน Textbox ได้ (อ่านได้อย่างเดียว)
o Text ก าหนดข้อความใน Textbox หรือใช้อ่านข้อความใน Textbox

คอนโทรล Textbox
• Method ที่ส าคัญ
oClear ใช้ลบข้อความที่อยู่ใน Textbox
oUndo ใช้ยกเลิกการแก้ไขข้อความครั้งล่าสุด
• Event ที่ส าคัญ
oTextChanged เกิดขึ้นเมื่อข้อความใน Textbox เปลี่ยนไป ซึ่งเกิด
จากผู้ใช้ และโค้ดโปรแกรมเพื่อก าหนดค่าของ Textbox

คอนโทรล Button
• เป็นคอนโทรลที่ให้ผู้ใช้คลิก เพื่อให้โปรแกรมท างานตามที่ก าหนดไว้ใน Event Click
• Property ที่ส าคัญ
o BackgroundImage ก าหนดรูปภาพพื้นหลังของปุ่ม โดยรูปภาพจะถูกน ามาเรียง
ซ้ าๆ กันจนเต็มพื้นที่ของปุ่ม
o Cursor ก าหนดรูปแบบของตัวชี้เมาส์ เมื่อผู้ใช้น าเมาส์มาวางที่ปุ่ม
o Image ก าหนดรูปภาพบนปุ่ม โดยสามารถก าหนดต าแหน่งของรูปภาพได้ด้วย
Property ImageAlign
o Text ก าหนดข้อความที่แสดงบนปุ่ม
• Event ที่ส าคัญ
o Click เกิดขึ้นเมื่อผู้ใช้ท าการคลิกที่ปุ่ม

การใช้งานคอนโทรล Label, Textbox และ Button
• การใช้งานคอนโทรล Label, Textbox และ Button
txtSet
lblShow
btnClear
btnOk
btnUndo

การใช้งานคอนโทรล Label, Textbox และ Button

คอนโทรล Checkbox
• เป็นคอนโทรลที่ให้ผู้ใช้ก าหนดตัวเลือก
• Property ที่ส าคัญ
oChecked บอกสถานะของ checkbox ว่าถูกเลือกหรือไม่ หากไม่มี
เครื่องหมายถูก จะมีค่าสถานะเป็น False แสดงว่า checkbox ไม่ได้
ถูกเลือกไว้ แต่ถ้ามีเครื่องหมายถูก จะมีค่าสถานะเป็น True แสดงว่า
checkbox ถูกเลือก
oCheckState ตรวจสอบสถานะของ checkbox โดยค่าที่เป็นไปได้
เช่น Unchecked, Checked และ Indeterminate
oText ก าหนดข้อความของ Checkbox

คอนโทรล Checkbox
• Event ที่ส าคัญ
o CheckedChange เกิดขึ้นเมื่อค่า Property Checked ของ Checkbox
เปลี่ยนแปลง โดยสามารถเขียนโค้ดใน event นี้ เมื่อต้องการให้โปรแกรมท างาน
ทันทีที่ผู้ใช้คลิก checkbox ไม่ว่าคลิกเลือก หรือคลิกยกเลิกก็ตาม
o CheckStateChange เกิดขึ้นเมื่อค่า Property CheckState เปลี่ยนไป
Checked = False
CheckState = Unchecked
Checked = True
CheckState = Checked
Checked = True
CheckState = Indeterminate

คอนโทรล RadioButton
• เป็นคอนโทรลที่ให้ผู้ใช้ก าหนดตัวเลือกเหมือน checkbox แต่ใช้วงกลมแทนสี่เหลี่ยม
และเมื่อถูกเลือก ภายในวงกลมจะถูกระบายสีทึบแทน
• Property ที่ส าคัญ
o Checked บอกสถานะของ RadioButton ว่าถูกเลือกหรือไม่ โดยในการเขียน
โค้ดจะเป็นการตรวจสอบสถานะของปุ่ม Radio ว่าออบเจ็คใดในกลุ่มที่ถูกเลือก
o Text ก าหนดข้อความของปุ่ม Radio
• Event ที่ส าคัญ
o CheckedChange เกิดขึ้นเมื่อค่า Property Checked ของ
RadioButton เปลี่ยนแปลง
o Click เกิดขึ้นปุ่ม Radio ถูกคลิก

คอนโทรล RadioButton
Checked = True
Checked = False
Checked = False
Checked = True
Checked = False

dbTree
rdbFlower
picShow
rdbDesert
rdbNoborder
rdbborder
rdb3d
chkFile
lblShowFile

การใช้งานคอนโทรล Checkbox, RadioButton

คอนโทรล ListBox
• เป็นคอนโทรลที่ใช้แสดงกลุ่มของตัวเลือกหรือไอเท็ม (Item) เพื่อให้ผู้ใช้เลือกไอเท็มที่
ต้องการ โดยสามารถก าหนดให้เลือกเพียงไอเท็มเดียว หรือหลายไอเท็มพร้อมกันได้ ด้วย
properties ชื่อ SelectionMode
• Property ที่ส าคัญ
o Item เป็นค่า collection ที่บรรจุไอเท็มทั้งหมดของ listbox ไว้ โดยสามารถ
เขียนโค้ดเพื่อด าเนินการกับไอเท็มดังนี้
ListboxName.Items.Add (Item)
• ListboxName : ชื่อ listbox
• Item : ข้อความที่ต้องการเพิ่มเข้าไปใน listbox

คอนโทรล ListBox
• การนับจ านวนไอเท็มใน Listbox
ListboxName.Items.Count()
• การลบไอเท็มที่มีค่า Index ตามที่ระบุ
ListboxName.Items.RemoveAt(Index)
• การลบไอเท็มทั้งหมดใน Listbox
ListboxName.Items.Clear()

คอนโทรล ListBox
o SelectedIndex ให้ค่า Index ของไอเท็มที่ถูกเลือก โดย Index ของไอเท็ม
แรกจะมีค่าเท่ากับ 0 และเรียงล าดับไปเรื่อยๆ ส าหรับ index ถัดไป และคืนค่าเป็น
-1 ถ้าไม่มีไอเท็มใดถูกเลือก
o SelectedItem ให้ค่าเป็น object ที่เป็นตัวแทนของไอเท็มที่ถูกเลือก
o Sorted ถ้าก าหนดค่าเป็น TRUE ไอเท็มใน Listbox จะถูกเรียงล าดับตาม
ตัวอักษร
o GetSelected ใช้ตรวจสอบว่าไอเท็มหนึ่งๆ ถูกเลือกหรือไม่ โดยจะให้ผลลัพธ์เป็น
ค่า TRUE หรือ FALSE
ListboxName.GetSelected(Index)

คอนโทรล ListBox
o SelectionMode ก าหนดรูปแบบการเลือกไอเท็มใน Listbox
• None ไม่ให้เลือกไอเท็มได้
• One ให้เลือกได้เพียงไอเท็มเดียว
• MultiSimple ให้เลือกได้มากกว่า 1 ไอเท็มพร้อมกัน
• MultiExtended ให้เลือกได้มากกว่า 1 ไอเท็มพร้อมกัน โดยจะต้องกด Shift
หรือ Ctrl รวมกับการคลิกเมาส์
o SelectedIndices ให้ค่าเป็น collection ที่บรรจุ Index ของไอเท็มทั้งหมดที่
ถูกเลือก กรณีก าหนดให้เลือกได้มากกว่า 1 ไอเท็มพร้อมกัน
o SelectedItems ให้ค่าเป็น collection ที่บรรจุไอเท็มทั้งหมดที่ถูกเลือก กรณี
ก าหนดให้เลือกได้มากกว่า 1 ไอเท็มพร้อมกัน

การใช้งานคอนโทรล ListBox
lbxShow
btnAdd
btnRemove
btnClear
txtInputItem

การใช้งานคอนโทรล ListBox

คอนโทรล ComboBox
• เป็นคอนโทรลที่ท างานร่วมกันระหว่าง listbox และ textbox คือ ผู้ใช้สามารถป้อน
ข้อความลงในส่วนของ textbox หรืออาจคลิกเลือกจากรายการตัวเลือก
• Property ที่ส าคัญ
o DropDownStyle ก าหนดรูปแบบของ ComboBox
• Simple ผู้ใช้สามารถพิมพ์ข้อความลงใน textbox ได้เอง หรือเลือกไอเท็มจาก
ในรายการของ combobox โดยรายการจะแสดงที่ด้านล่างของ textbox
เสมอ
• DropDown ผู้ใช้สามารถพิมพ์ข้อความลงใน textbox ได้เอง หรือเลือกไอเท็ม
จากในรายการของ combobox โดยจะต้องคลิกลูกศรเพื่อแสดงรายการ
• DropDownList ผู้ใช้ไม่สามารถพิมพ์ข้อความลงใน textbox จ าเป็นต้อง
เลือกไอเท็มในรายการเท่านั้น

คอนโทรล ComboBox
DropDownStyle
: Simple
DropDownStyle
: DropDown
DropDownStyle
: DropDownList

คอนโทรล ComboBox
• Property ที่ส าคัญ (ต่อ)
o Items ให้ค่าเป็น collection ที่บรรจุไอเท็มทั้งหมดของ ComboBox
o MaxDropDownItems ก าหนดความสูงของ DropDown ว่าจะให้แสดงผลได้กี่
ไอเท็ม ค่าที่ก าหนดได้ คือ ตั้งแต่ 1 ถึง 100
o SelectedIndex ให้ค่า Index ของไอเท็มที่ถูกเลือก ถ้าไม่มีไอเท็มใดในรายการ
ถูกเลือก property จะมีค่าเท่ากับ -1
o Sorted ถ้าก าหนดเป็น TRUE ไอเท็มจะถูกเรียงล าดับตามตัวอักษร
o Text ใช้อ่านหรือก าหนดข้อความที่อยู่ในส่วนของ textbox ของ ComboBox

คอนโทรล ComboBox
• การก าหนดค่า Item ใน ComboBox โดยใช้ค าสั่ง Edit Item
textbox:
txtFullname
textbox:
showDetail
combobox:
BirthDay
DateTimePicker:
BirthDate
button:
btnShow

คอนโทรล ComboBox

คอนโทรล ComboBox
textbox:
addSubject
button:
btnAdd
label:
selectSubject
combobox:
listSubject

คอนโทรล ComboBox
• การสั่งให้ท าการเพิ่ม Item ของ ComboBox จากข้อความใน Textbox
เมื่อท าการกด Enter

คอนโทรล MaskedTextbox
• เป็นคอนโทรลที่รับข้อความจากผู้ใช้เหมือนกับ Textbox แต่สามารถก าหนด
รูปแบบการป้อนข้อมูลตามที่ต้องการได้ เช่น เบอร์โทรศัพท์ รหัสประจ าตัว
ประชาชน
• Property ที่ส าคัญ
o Mask ก าหนดรูปแบบของข้อความที่ต้องการ โดยใช้ Mask Element
o Text ข้อความที่กรอกให้กับคอนโทรล
o BeepOnError ก าหนดค่าเป็น True เมื่อต้องการให้มีเสียงเตือนเมื่อผู้ใช้
กรอกข้อมูลผิด
o PromptChar ก าหนดตัวอักษรที่เป็น Prompt (ปกติคือ “_” หรือ
Underscore)
o MaskComplete ให้ผลลัพธ์เป็น TRUE ถ้าข้อมูลใน MaskedTextbox
ตรงตาม Mask

คอนโทรล MaskedTextbox
• Event ที่ส าคัญ
o InputTextChanged เกิดขึ้นเมื่อข้อความในคอนโทรลเปลี่ยนแปลง
o MaskInputRejected เกิดขึ้นเมื่อข้อความที่กรอกไม่ตรงกับ Mask
o MaskChanged เกิดขึ้นเมื่อ Mask เปลี่ยนแปลง
o OutputTextChanged เกิดขึ้นเมื่อข้อความในคอนโทรลเปลี่ยนแปลง
o TextChanged เกิดขึ้นเมื่อข้อความในคอนโทรลเปลี่ยนแปลง

• สัญลักษณ์ที่ใช้ก าหนดรูปแบบข้อความมีดังนี้
Mask Element
คอนโทรล MaskedTextbox
ค าอธิบาย
0 แทนตัวเลข 0 ถึง 9 และต้องใส่ข้อมูลเสมอ
9 แทนตัวเลข 0 ถึง 9 หรือช่องว่าง และจะใส่ข้อมูลหรือไม่ก็ได้
L
แทนอักษร a ถึง z หรือ A ถึง Z และต้องใส่ข้อมูลเสมอ
? แทนอักษร a ถึง z หรือ A ถึง Z และจะใส่ข้อมูลหรือไม่ก็ได้
A
a
แทนอักษร a ถึง z หรือ A ถึง Z หรือตัวเลข 0 ถึง 9 และ
ต้องใส่ข้อมูลเสมอ
แทนอักษร a ถึง z หรือ A ถึง Z หรือตัวเลข 0 ถึง 9 และจะ
ใส่ข้อมูลหรือไม่ก็ได้

คอนโทรล MaskedTextbox
txtName
txtIdCard
txtBirthday
btnProcess

คอนโทรล MaskedTextbox
• การตรวจสอบค่าที่ป้อนบนคอนโทรล MaskedTextbox

คอนโทรล DateTimePicker
• เป็นคอนโทรลที่ใช้รับข้อมูลที่เป็นวันเดือนปี และเวลา โดยมีรูปแบบเป็นปฏิทิน
ท าให้สามารถควบคุมรูปแบบการรับข้อมูลจากผู้ใช้ได้ง่ายขึ้น
• Property ที่ส าคัญ
oMinDate เป็นวันเดือนปีต่ าสุดของ DateTimePicker
oMaxDate เป็นวันเดือนปีสูงสุดของ DateTimePicker
oValue ค่าวันเดือนปีและเวลาที่ได้จากการเลือก
oShowUpDown ถ้าก าหนดเป็น True จะแสดงผลแบบ UpDown
ถ้าก าหนดเป็น False จะแสดงผลแบบ DropDownList

คอนโทรล DateTimePicker
• Property ที่ส าคัญ (ต่อ)
oFormat ก าหนดรูปแบบการแสดงผลวันเดือนปีและเวลาของคอนโทรล
o Long เป็นการแสดงผลวันเดือนปีแบบ Long
o Short เป็นการแสดงผลวันเดือนปีแบบ Short
o Time เป็นการแสดงผลเฉพาะเวลา
o Custom เป็นการก าหนดรูปแบบการแสดงผลตามที่ต้องการ
Long
Short

คอนโทรล DateTimePicker
DateTimePicker:
dtpBirthDate
btnProcess

คอนโทรล DateTimePicker

ค่า Value ของ DateTimePicker ตัวอย่างค่า
datetimepicker.Value.ToLongDateString 03 มีนาคม 2555
datetimepicker.Value.ToShortDateString 03/03/2555
datetimepicker.Value.ToLongTimeString 20:37:05
datetimepicker.Value.ToShortTimeString 20:37
datetimepicker.Value.Hour 20
datetimepicker.Value.Minute 37
datetimepicker.Value.Second 5
datetimepicker.Value.Day 3
datetimepicker.Value.Month 3
datetimepicker.Value.Year 2012
datetimepicker.Value.DayOfWeek
1 (วันจันทร์), 2 (วันอังคาร)
20:37:5