Chapter 2

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

การสรางโปรแกรมดวย VB ในขนตอนแรกๆ จะเปนการออกแบบหนาจอทตดตอกบผใช โดยน าคอนโทรลท

มอยมาออกแบบฟอรมใหเหมาะสม จ าเหนไดวาทงฟอรมและคอนโทรลนนเปนเครองมอพนฐานทส าคญในการ

เขยนโปรแกรม VB ส าหรบบนนจะกลาวถงหลกการพนฐานเกยวกบฟอรม และคอนโทรลทควรทราบ เพอให

เขาใจหลกการออกแบบหนาจอมากยงขน

2.1 คณสมบต เมธอด และอเวนต

ในการท างานกบฟอรมและคอนโทรล เราจะตองท าความคนเคยกบ 3 ค าตอไปน คอ คณสมบต

(Properties), เมธอด (Method) และ อเวนต (Event)

2.1.1 คณสมบต (Properties)

เราก าหนดลกษณะตางๆของ ฟอรมและคอนโทรล เชน ปมค าสง ชอ Button1 มคณสมบตทเรา

ก าหนดได

ภาพท 2.1

2.1.2 เมธอด (Method)

ความสามารถของ Object เปนค าสงใหฟอรมและคอนโทรลท างานตามทเราตองการ

คณสมบต Text

คณสมบต Height

คณสมบต Width

2

2.1.3 อเวนต (Event)

เปนเหตการณทเกดขนกบฟอรม หรอคอนโทรลทเราสามารถใสค าสงเพอตอบสนองได เชน ถาเรา

ตองการตอบสนองตออเวนต Click ของปมค าสงชอ Button1 ใหเราดบเบลคลกปมเพอเขาสหนาตางการเขยน

โคด และใสค าสง Button1.Text = “Click” จากนนเมอรนโปรแกรมใหคลกปมค าสงบนหนาตางโปรแกรม

สงเกตเหนค าวา “Button1” บนปมค าสง จะเปนเปน “Click” ดงภาพท 2.2

ภาพท 2.2

2.2 เนมสเปซ (Namespaces)

หลกการทส าคญมากอยางหนงในการเขยนโปรแกรม VB กคอ เนมสเปซ ซงจะชวยใหการจดการไลบราร

คลาส และออบเจกตตางๆ ไดงายขน ท าใหไมเกดความก ากวมเมออางองถงออบเจกต และระบบขอบเขตการ

ใชงานของออบเจกต รายละเอยดของเนมสเปซจะกลาวในบทการเขยนโปรแกรมเชงวตถ สวนบทนจะกลาวถง

วธการอางองถงเนมสเปซ

การอางองเนมสเปซ ท าใหเราเรยกใชคลาสไดงาย เชน คลาส System.WinForms.Button เปนการ

เรยกชอแบบเตมๆ ซงยาวและยงยาก แตถาเราอางองดวยค าสง import ดงตวอยาง

ท าใหเราสามารถเรยกใชคลาสภายใน WinForms ทงหมดไดในทนท เชน เรยกใชคลาส Button แทนการ

ใชค าวา System.WinForms.Button ซงจะสนกวาและสะดวกกวามาก

2.3 การใชงานฟอรม (Windows Forms)

2.3.1 ฟอรม หรอทเรยกวา WinForms เปนเครองมอทใชบอยมากในการสรางโปรแกรมดวย VB โดยผใช

จะตดตอท างานผานทางคอนโทรลตางๆ ทเราวางบนฟอรม

ฟอรมและคอนโทรลตางๆ ทมใน VB นน เปนคลาสทมอยในเนมสเปซชอ System.Windows.Forms ซง

จะมคลาสตางๆ ทชวยเราในการสรางแอพพลเคชนทรนบนวนโดวส (ส าหรบความหมายของคลาสและออบ

3

เจกต เราจะกลาวถงรายละเอยดเพมเตม ในบทเรองการเขยนโปรแกรมเชงวตถ) โดยเนมสเปซ

System.Windows.Forms จะมใชในโปรเจกตเราอยแลวตงแตแรก โดยสามารถเขาไปดไดทหนาตาง Solution

คลกขวาทชอโปรเจคแลวเลอก Properties จากนนไปทเมน References ดงภาพท 2.3

ภาพท 2.3

2.3.2 คณสมบตทส าคญของฟอรม

ฟอรมมคณสมบตตางๆ มากมาย แตทเราจ าเปนตองรจก มดงตอไปน

ชอคณสมบต ค าอธบาย Name * ก าหนดชอของฟอรมทเราใชอางองถงในโปรแกรม FormBorderStyle ก าหนดลกษณะการเปลยนขนาดขอบของฟอรม MinimizeBox หรอ MaximizeBox

ก าหนดวาใหขยายหรอยอฟอรม

ControlBox ก าหนดใหฟอรมมเมนระบบทางมมซายบนสดดวยหรอไม Text * ก าหนดขอความทแสดงบนไตเตลบารของฟอรม Icon ก าหนดรปไอคอนของฟอรมเมอยอ (Minimize) ฟอรม Size * ก าหนด Height : ความสง และ Width : ความกวางของฟอรม Location * ก าหนดต าแหนงของฟอรมโดยคดจากต าแหนงบนซายของหนาจอ

4

ชอคณสมบต ค าอธบาย WindowState ก าหนดวาเมอเรมตนเรยกฟอรม จะใหอยในแบบขยาย

(Maximize), แบบยอ (Minimize) หรอแบบธรรมดา Enabled * ก าหนดใหฟอรมสามารถตอบสนองตออเวนตไดหรอไม TopMost ก าหนดวาฟอรมนจะแสดงอยเหนอฟอรมอนๆ เสมอหรอไม

หมายเหต * เปนคณสมบตทใชกบคอนโทรลอนได โดยมความหมายใกลเคยงกน

2.3.3 เมธอดและอเวนตทส าคญของฟอรม

ฟอรมมเมธอดและอเวนตทเราจ าเปนตองรจก ดงตารางตอไปน

ชอเมธอด, อเวนต ค าอธบาย Load เปนอเวนตทเกดเมอเรยกฟอรมขนมาครงแรก Resize เปนอเวนตทเกดเมอมการเปลยนขนาดของฟอรม Activated เปนอเวนตทเกดขนเมอฟอรมนนเปนฟอรมทเราก าลงท างานดวย Deactivate เปนอเวนตทเกดเมอฟอรมอนๆ กลายเปนฟอรมทแอคทฟแทน Click เปนอเวนตทเกดเมอมการใชเมาสคลกบนฟอรม DoubleClick เปนอเวนตทเกดเมอมการใชเมาสดบเบลคลกบนฟอรม Show เปนเมธอดทใชแสดงฟอรมขนมา Hide เปนเมธอดทใชซอนฟอรมไว Close เปนเมธอดทใชปดฟอรม Activate เปนเมธอดทใชท าใหฟอรมถกเลอกใชงานในขณะนน

2.3.4 ตวอยางโปรแกรมแสดงการท างานของฟอรม

ตวอยางนเปนเปนโปรแกรมทชวยใหเราเขาใจสงตางๆ เกยวกบฟอรมมากยงขน ซงเปนการส รางฟอรมหนง

ฟอรม และแสดงอเวนตตางๆ ทเกดขนบนฟอรมวาเกดขนในตอนใด ดผลลพธไดจากหนาตาง Output โดย

โปรแกรมจะเรยกเมธอด WriteLine ของออบเจกต Console ค าสง Console.WriteLine เพอพมพชออเวนตท

เกดขนบนฟอรมออกมา โดยมการท างานดงน

5

ภาพท 2.4

ขนตอนการสรางโปรเจกต

1) สรางโปรเจกตใหมชนด Windows Forms App

2) เลอก View -> Code หรอ กด F7 เพอเปดหนาตางโคดขนมา จากนนใหเลอกอเวนตตางๆ ของฟอรม

ตามค าสงในโปรแกรม โดยเลอกจาก (Form1 Events) และเลอกอเวนตของฟอรทตองการตอบสนอง ในทน

เลอก 6 อเวนต คอ Load, Activated, Click, Deactivate, DoubleClick, Resize

ภาพท 2.5 สรางโปรเจกตใหม

6

ภาพท 2.6 เลอก (Form1 Events) และเลอกอเวนตตอบสนอง 6 ตว

ภาพท 2.7 โปรแกรมยอยหลงจากทเลอกอเวนต

7

3) จากนนในหนาตางโคดโปรแกรม ใหเราใสค าสงโปรแกรมตอไปนลงไปในอเวนตตางๆ ดงน

ภาพท 2.8

4) บนทกโปรเจกตและรนทดสอบโปรแกรม โดยเลอก Debug และคลก Start โดยผลลพธการรน

โปรแกรมจะปรากฏชอ Form1 ขนมา และเมอมอเวนตเกดขน โปรแกรมจะพมพอเวนตทเกดขนบนหนาตาง

Output ดงรป

ภาพท 2.9

8

เพมเตม ค าสง Console.WriteLine จะมประโยชนมากในการแสดงคาขอมลในโปรแกรมของเราออกมา

ทางหนาตาง Output สามารถเรยกขนมาแสดงไดโดยไปทเมน View-> Output หรอกดปม <Ctrl+Alt+O>

2.3.5 คอนโทรลและคอมโพเนนตพนฐาน

ทลบอกซ ประกอบดวยเครองมอทใชน ามาวางบนฟอรมเพออกแบบสวนตดตอผใชงาน มเครองมอ

2 ประเภท คอ คอนโทรล ออบเจกตทวางบนฟอรมทผใชสามารถมองเหน เชน ปม กลองขอความ เปนตน และ

คอมโพเนนต ออบเจกตทวางบนฟอรมแตผใชมองไมเหน เชน การนบเวลา เปนตน

คอนโทรล ค าอธบาย Button ใหผใชคลกสงงานมายงโปรแกรม Label แสดงขอมลใหผใชเหนเพยงอยางเดยว Textbox รบขอมลจากผใชทปอนเขามาในโปรแกรมและแสดงผลขอมล CheckBox ใหผใชเลอกไดมากกวา 1 ตวเลอก RadioButton ใหผใชเลอกไดตวใดตวหนงจากกลมตวเลอกทงหมด ListBox ใหผใชเลอกโดยการเลอนดรายการทตองการได ComboBox ใหผใชเลอกคลายกบลสตบอกซ แตสามารถพมพขอมลเขาไปไดดวย CheckedListBox ใหผใชเลอกรายการไดโดยเชกทหนารายการนน GroupBox รวมคอนโทรลใหอยในกลมเดยวกน PictureBox ใสภาพประกอบและตกแตงใหสอความหมายและสวยงาม ScrollBar เลอนดขอมลทงหมดทไมสามารถแสดงในคราวเดยวบนพนททจ ากด

คอมโพเนนต ค าอธบาย Timer ใชนบเวลาตามชวงเวลาทก าหนดเพอควบคอมการท างานบางอยาง

9

2.3.5.1 คอนโทรลปมค าสง (Button)

ปมค าสงมหนาทหลกคอ ตอบสนองตอการคลกเมาสของผใชงานทสงงานมายงโปรแกรมวา

ตองการใหโปรแกรมท าอะไรตอ

ตวอยางโปรแกรมทใชปมค าสง

ในตวอยางน จะแสดงการใชงานปมค าสง ถาเราไมใสขอความในเทกซบอกซ ปมค าสงจะไม

ตอบสนองการท างาน แตถาเราใสขอความในเทกซบอกซ ปมค าสงจะตอบสนองตอการคลกเมาส โดยแสดงชอ

ทพมพในเทกซบอกซบนกลองขอความ

1) สรางโปรเจคใหมชนด Windows Forms App จากนนใหวางคอนโทรล และเปลยนชอ

ปมกบลาเบล ดงภาพท 2.10

ภาพท 2.10

2) สงเกตไดวาทปมมรปภาพไอคอนเพมขนมา โดยโปรแกรม Visual Studio มคลงภาพให

นกพฒนาโปรแกรมสามารถดาวนโหลดมาใชประกอบในโปรแกรมไดฟร เรยกวา Visual Studio Image

Library ในตวอยางเราจะใชไฟลภาพ UserProfile_16x.png มาตกแตงบนปม มขนตอนดงน

- เปดเวบ Google แลว Search ค าวา Microsoft Visual Studio Image Library

- เขาเวบ https://www.microsoft.com/en-us/download/details.aspx?id=35825

- คลกท Download

- เลอก VS2017 Image Library.zip จากนนคลกปม Next

- ท าการ Save บนทกไวในเครองคอมพวเตอร

- จะไดไฟล VS2017 Image Library.zip ทเกบภาพไอคอนและกราฟฟกจ านวนมาก

10

- จากนนแตกไฟล .zip ออกมา แลวหาโฟลเดอร UserProfile

- กอปปไฟล UserProfile_16x.png มาใสในโฟลเดอรโปรเจกตของเรา

- คลกเลอกคอนโทรลปมทเราตองการวางภาพประกอบ

- ทหนาตาง Properties ใหคลกก าหนดคณสมบต Image ท เพอใสภาพปม

- จะปรากฏหนาตาง Select Resource ท Project resource file ใหคลก Import เพอ

เขาไปเลอกไฟลภาพทตองการน ามาวางบนปม

- ปรากฏหนาตาง Open ใหเลอกไฟลภาพทจดเตรยมเพอน ามาวางบนปมและคลก Open

- กลบมาทหนาตาง Select Resource ท Project resource file ใหเลอก

UserProfil_16x และคลกปม OK จากนนภาพจะถกวางบนปม ท าการจดต าแหนงใหเรยบรอยทหนาตาง

Properties ก าหนดคณสมบตท ImageAlign

3) ดบเบลคลกบนปมเพอเขาส Code Editor จากนนสรางโคดอเวนต

TextBox1_TextChanged แลวใหใสค าสงภายในอเวนตตางๆ ดงน

ภาพท 2.10

ภาพท 2.11

11

2.3.5.2 คอนโทรลเทกซบอกซ (TextBox)

เปนคอนโทรลทเราใชบอยมากในการรบขอมลจากผใชทปอนเขามาในโปรแกรม รวมทง

สามารถแสดงผลและใหผใชแกไขขอมลไดดวย การปรบแตงจะอยในสวยของ Properties

ตวอยางโปรแกรมแสดงการใชงานเลเบล เทกซบอกซ และปมกด

ขนตอนการสรางโปรแกรม

1) สรางโปรเจคใหมเปนชนด Windows Forms App จากนนวางคอนโทรลตางๆ บนฟอรม และ

ก าหนดคณสมบต ดงน

ภาพท 2.12

2) ดบเบลคลกทปม Login เพอเขาสหนา Code Editor ใหใสค าสงใน Event Button1_Click

จากนนดบเบลคลกทวางบนฟอรมสรางโคดอเวนต Form1_Load และใสโคดการท างานดงน

12

ภาพท 2.13

3) รนโปรแกรมทสรางมา จะไดผลลพธดงรป

ภาพท 2.14

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

คอนโทรลเชกบอกซจะใหผใชเลอกวาจะเชก หรอไมเชก เพยงอยางใดอยางหนง

เทานน คาของคอนโทรลเชกบอกซจะอยในคณสมบต Checked ทมคาเปน True หรอ False หรอคณสมบต

CheckState

ตวอยางโปรแกรมแสดงการใชงานเชกบอกซ

ตวอยางตอไปนเปนโปรแกรมแสดงการท างานของเชกบอกซ โดยเราจะใชเชกบอกซในการเลอกวา

ตองการตวอกษรแบบตวเนน (Bold) หรอแบบตวเอยง (Italic) จากนนจะปรากฏกลองขอความแสดงสงทเรา

เลอก

ขนตอนการสรางโปรแกรม

1) สรางโปรเจคชนด Windows Forms App ใหมขนมา และใหเราวางคอนโทรลตางๆ ตามรป

ภาพท 2.15

13

2) ไปทหนาตาง Code Editor จากนนใสค าสงโปรแกรมดงน

ภาพท 2.16

3) รนโปรแกรมทสรางมาจะไดผลลพธดงรป

ภาพท 2.17

14

2.3.5.4 คอนโทรลเรดโอบตทอน (RadioButton)

คอนโทรลเรดโอบตทอน ท าหนาทคลายกบเชกบอกซ แตคอนโทรลนจะสามารถเลอก

ไดเพยงตวเลอกเดยวเทานนในกลมหนง

Example จากโจทยเดมขางตน ใหเปลยนจาก CheckBox เปน RadioButton โดยใหเลอก Bold กบ Italic

เหมอนเดม แลวรนใหไดผลลพธออกมาตามทเลอก

2.3.5.5 คอนโทรลกรปบอกซ (GroupBox)

คอนโทรลกรปบอกซใชส าหรจกลมคอนโทรลทใชรวมกน ชวยเพมความเรยนรอย

และความสวยงามของหนาตาโปรแกรมมากขน เชน ใชแบงเรดโอบตทอน บนฟอรมออกเปนกลมๆ เปนตน

ตวอยางโปรแกรมการใชงานกรปบอกซ

เปนการใชกรปบอกซจดกกลม เรดโอบตทอน เชกบอกซ และคอนโทรลอนๆ ออกแบบหนาจอเปน

แบบฟอรมส าหรบผใชกรอกขอมล และเมอคลกปม Ok จะแสดงขอมลทงหมดบนกลองขอควา

1) สรางโปรเจคใหมขนมาชนด Windows Forms App ชอ GroupBox และใหคอนโทรลตางๆ ลง

บนฟอรม พรอมทงก าหนดคณสมบตตางๆดงน

ภาพท 2.18

15

2) ดบเบลคลกทปม Button1 จะแสดงหนาตาง Code Editor จากนนใสโคดโปรแกรม ดงน

ภาพท 2.19

16

3) รนโปรแกรมทสรางมาจะไดผลลพธ ดงภาพ

ภาพท 2.20

2.3.5.6 คอนโทรลลสตบอกซ (ListBox)

เราจะสงเกตไดวาทงเรดโอบตทอนและเชกบอกซนน ถาน ามาใชแสดงตวเลอกหลายๆตว

จะใชเนอทบนฟอรมพอสมควร ในกรณนเราสามารถน าเอาคอนโทรลลสตบอกซมาใชแทนทการแสดงตวเลอก

หลายๆ ตวไดในแบบของรายการ

ตวอยางโปรแกรมการใชงานลสตบอกซ

1) สรางโปรเจกตใหมชนด Windows Forms App ขนมา กดคอนโทรลลสตบอกซมาวางบนฟอรม

ภาพท 2.21

17

2) ไปทหนาตาง Code Editor และใสโคดโปรแกรมดงน

ภาพท 2.22

เมอเปดแสดงหนาจอโปรแกรมจะเรมท างานอเวนต Form1_Load โดยเพมรายการเขาไปในลสต

บอกซดวยค าสง Item.Add() จ านวน 5 รายการ สดทายจะหาคาในรายการทต าแหนง Index(0) โดยใหพมพ

แสดงคาผลลพธในหนาตาง Output

3) คลก Start เพอรนโปรแกรม จะแสดงรายการแรกสดออกมาทางหนาตาง Output คอ One

ภาพท 2.23

4) ใหเพมโคดในสวนอเวนต ListBox1_SelectedIndexChanged เพอใหท างานเมอมการเลอก

รายการ โดยใหแสดงคาจากรายการทถกเลอกดวยคณสมบต Text เปนผลลพธหนาตาง Output ดงน

18

ภาพท 2.24

5) เมอรนโปรแกรม จะแสดงรายการบนลสตบอกซ จากนนใหผใชเลอกรายการ กจะน าคาจาก

คณสมบต Text ออกมาแสดงในหนาตาง Output

ภาพท 2.25

6) เราสามารถหาจ านวนของรายการในลสตบอกซ โดยใชคณสมบต Count ของลสตบอกซ เชน

ภาพท 2.26

19

7) เราสามารถก าหนดวาจะใหผใชเลอกรายการในลสตบอกซไดทละรายการหรอหลายรายการ โดย

ก าหนดทคณสมบต SelectionMode ซงแตละคาจะมความหมายดงน

ภาพท 2.27

- None ไมสามารถเลอกได หมายถง ลสตบอกซทแสดงอยางเดยว ไมสามารถเลอกได

- One เลอกไดรายการเดยว เปนลสตบอกซแบบทวไป

- MultiSimple เลอกไดหลายรายการแบบ 1 กด <Spacebar> จะเปนการเลอก

รายการในลสตบอกซ

- MultiExtended เลอกไดหลายรายการแบบ 2 โดยมวธการกดปมเลอกอย 2 แบบ คอ

กดปม <Shift> พรอมกบการคลก จะเปนการเลอกรายการทอยระหวางท

เลอกไวกอนหนากบรายการทเลอกไวในปจจบน

กดปม <Ctrl> พรอมกบการคลกรายการทตองการ จะเปนการเลอกรายการ

ตางๆ ในลสตบอกซ

ส าหรบลสตบอกซทเลอกไดหลายรายการ เราสามารถทราบวาผใชไดเลอกรายการใด โดยการ

ตรวจสอบคณสมบต SelectedItems ซงเปนคอลเลกชนทเกบออบเจกต Item ทผใชเลอกไว นอกจากนยงม

คณสมบต SelectedIndices ทเกบอนเดกซรายการแตละตวทผใชเลอกไวในลสตบอกซ ดงรป

20

ภาพท 2.28

สรป Items รายการตวเลอก SelectedItems กคอ กลมของ Items ทถกเลอก สวน Items ทไม

เลอกจะไมอยในกลมน ดงนน SelectedItems จงเปนซบเซตของ Items เสมอ จากภาพ 2.28 จะเหนวา

Items จะม Index 5 ต าแหนง แต SelectedItems จะม Index เพยง 3 ต าแหนง โดยคาของ Index ใน Items

และ SelectedItems จะอางองถงรายการทแตกตางกน เชน Index คา 1 ใน Items คอรายการ Two แตคา

ใน SelectedItems จะเปนรายการ Three ซงจดนเปนจดทท าใหสบสนและงงกนมาก

เพมเตม จาก Code เดม ใหก าหนดคณสมบตของ SelectionMode ของลสตบอกซในหนาตาง

ค ณ ส ม บ ต เ ป น MultiExtended จ า ก น น ไ ป ท ห น า ต า ง Code Editor แ ล ว ส ร า ง โ ค ด อ เ ว น ต

SelectionIndexChanged ของ ListBox1 ใหท างานเมอผใชเลอกรายการโดยจะแสดงรายการทถกเลอกดวย

คณสมบต SelectedItem ดงน

ภาพท 2.29

ListBox1.Item(0)

ListBox1.Item(1)

ListBox1.Item(2)

ListBox1.Item(3)

ListBox1.Item(4)

ListBox1.SelectedItem(0)

ListBox1.SelectedItem(1)

ListBox1.SelectedItem(2)

21

เมอรนโปรแกรม จะแสดงรายการทงหมดทผใชเลอกบนหนาตาง Output

ภาพท 2.30

2.3.5.7 คอนโทรลคอมโบบอกซ (ComboBox)

คอมโบบอกซ จะรวมความสามารถของเทกซบอกซและลสตบอกซเขาไวดวยกน ท าใหเรา

สามารถเลอกรายการไดเชนเดยวกบลสตบอกซ และแกไขรายการไดเหมอนกบเทกซบอกซ แตใชพนทนอยกวา

ลสตบอกซ และใชค าสงในการท างานคลายกน ดงนนเราสามารถน าความรเกยวกบลสตบอกซมาใชกบคอมโบ

บอกซได

การก าหนดคารปแบบของคอมโบบอกซ เราจะก าหนดผานทางคณสมบต DropDownStyle โดย

คอมโบบอกซมอย 3 รปแบบ ไดแก

- ซมเปลคอมโบบอกซ (Simple ComboBox) เปนคอมโบบอกซทแสดงรายการอย

ตลอดเวลา และเมอจ านวนรายการเกนความสงของคอนโทรล คอนโทรลจะแสดงสกอลบารแนวตง เพอใชเลอน

ดรายการทเหลอได

- ดรอปดาวนคอมโบบอกซ (Dropdown ComboBox) เปนคอมโบบอกซทผใชสามารถใส

คาลงไปไดโดยตรง หรอเลอกจากรายการทมอยกได โดยการคลกทปมลกศรลง เมอเลอกตวเลอกใดในรายการ

แลว ตวเลอกนนจะแสดงอยชองบนสดของคอนโทรล

- ดรอปดาวนลสตบอกซ (Dropdown ListBox) เปนคอมโบบอกซทคลายกบลสตบอกซ

แตจะประหยดเนอททใชแสดงรายการมากกวา โดยทผใชไมสามารถใสคาเองได จะเลอกขอมลจากรายการทม

อยไดเทานน

22

ตวอยางการใชงานโปรแกรมลสตบอกซและคอมโบบอกซ

1) สรางโปรเจคใหมชนด Windows Forms App ขนมา และใหวางคอนโทรลตางๆ ลงบนฟอรม

พรอมทงก าหนดคณสมบตตางๆ ของฟอรม ดงภาพ

ภาพท 2.31

2) ดบเบลคลกทพนทวางบนฟอรม จะได Events Load ขนมา และเขาสหนา Code Editor จะ

ท าการสรางโคดอเวนต Form1_Load เอาไว แลวใหเราใสคาเรมตนของลสตบอกซและคอมโบบอกซเพมเตม

ดงน

ภาพท 2.32

23

3) คลกทลสตบอกซ จากนนไปทหนาตางคณสมบตและแทบ Events ใหดบเบลคลกทอเวนต

SelectedIndexChanged จะเขาสหนาตาง Code Editor ส าหรบเขยนโปรแกรม จากนนใหใสโคดแสดง

ขอความจากรายการทผใชเลอกในลสตบอกซปรากฎในกลองขอความ

4) คลกทคอมโบบอกซ จากนนไปทหนาตางคณสมบตและแทบ Events ใหดบเบลคลกทอเวนต

TextChanged จะเขาสหนาตาง Code Editor ส าหรบเขยนโปรแกรม จากนนใหใสโคดแสดงขอความจาก

รายการทผใชเลอกในคอมโบบอกซใหปรากฎในกลองขอความ

ภาพท 2.33

5) รนโปรแกรม จะแสดงผลลพธดงภาพ

ภาพท 2.34

24

ตวอยางโปรแกรมแสดงการเพมและลบรายการในลสตบอกซ/คอมโบบอกซ

1) สรางโปรเจคใหมชนด Windows Forms App ขนมา และใหวางคอนโทรลตางๆ บนฟอรม

พรอมก าหนดคณสมบต ดงภาพ

ภาพท 2.35

2) เขยนโปรแกรมใหกบปม Add โดยดบเบลคลกปม Add จะปรากฏหนาตาง Code Editor และ

เกดอเวนต Button1_Click จากนนใหใสโคดรบขอมลจากเทกซบอกซมาเพมเปนรายการอยในลสตบอกซ

3) เขยนโปรแกรมใหกบปม Remove โดยดบเบลคลกปม Remove จะเกดอเวนต Button2_Click

จากนนใหใสโคดตรวจสอบวาผใชไดเลอกรายการในลสตบอกซเพอจะลบออกหรอไม ถามจะถอดรายการท

เลอกออก ถาไมมจะแจงผานกลองขอความวาไมสามารถถอดรายการออกได

4) เขยนโปรแกรมใหกบปม Clear โดยดบเบลคลกปม Clear จะเกดอเวนต Button3_Click

จากนนใหใสโคดลบรายการทงหมดออกจากลสตบอกซ ดงภาพ

Label

TextBox

ListBox

25

ภาพท 2.36

5) ท าการคลกรนโปรแกรม ทดสอบผลลพธทไดดงภาพ

ภาพท 2.37

26

2.3.5.8 คอนโทรลพกเจอรบอกซ (PictureBox)

เปนคอนโทรลทใชแสดงภาพและยงสรางเปนภาพแบกกราวดใหกบฟอรมไดดวย ซง

การน ารปภาพ ไอคอน หรอภาพสญลกษณตางๆ มาใชบนฟอรมจะชวยสอความหมายผใชงานไดดยงขน

ตวอยางโปรแกรมการเพมและซอนภาพในพกเจอรบอกซ

1) สรางโปรเจคชนดใหมเปนชนด Windows Forms App ขนมา จากนนใหวางคอนโทรลพกเจอร

บอกซและปมบนฟอรม ตามภาพ

ภาพท 2.38

2) คลกเลอกคอนโทรลพกเจอร ไปท Properties และคลกคณสมบต Image เพอเขาไปเลอก

รปภาพทจะน ามาแสดงในคอนโทรลพกเจอร โดยใหน าภาพมาเกบไวใน Resources เพราะเมอเราบลด

โปรแกรมจะแพกเกจไฟลภาพนไปดวย ท าใหสามารถรนโปรแกรมแดสงภาพบนเครองตางๆ ไดอยางถกตอง

ภาพท 2.39

27

3) เขยนโปรแกรมใหกบปม Show และ Hide

ภาพท 2.40

4) รนโปรแกรม จะไดผลลพธตามภาพ

ภาพท 2.41

28

2.3.5.8 คอมโพเนนตไทเมอร (Timer)

การใชคอมโพเนนตไทเมอรจะท าใหมการท างานบางอยางในทกๆ ชวงเวลาทเรา

ก าหนด ซงจะชวยใหเราสามารถท าอยางอน โดยทงโปรแกรมนใหท างานตามเวลาทตงไว คอมโพเนนตไทเมอร

จดเปนคอนโทรลประเภททเรยกวา Non Visual interface หมายถง จะไมเหนตวคอนโทรลในขณะท รน

โปรแกรมขนมา ซงจะพบไดบอยในการประยกตสรางเกม แบบทดสอบ หรอการจ ากดเวลาในการแสดงหนาจอ

การท างานบางอยาง

- อเวนตทส าคญของ Timer คอ Tick เปนอเวนตทเกดขนในทกชวงเวลาทเราไดก าหนด

ไวในคณสมบต Interval

- เมธอดของไทเมอร Start() คอเรมจบเวลา และ Stop() คอหยดจบเวลา

ตวอยางโปรแกรมการแสดงเวลาโดยใชไทเมอร

1) สรางโปรเจกตใหมขนมา จากนนวางคอนโทรลและคอมโพเนนตบนฟอรม และก าหนดคณสบต

ของไทเมอร ดงภาพ

ภาพท 2.42

29

ภาพท 2.43

2) ดบเบลคลกทคอมโพเนนต Timer เขาสหนาตาง Code Editor ใสค าสงดงน

ภาพท 2.44

My.Computer.Clock.LocalTime.ToLongTimeString คอ การดงเวลาปจจบนบน

คอมพวเตอรเครองนนออกมาอยในรปของขอความ

3) คลกรนโปรแกรมจะไดผลลพธตามภาพ

ภาพท 2.45

30

ตวอยางการท าแบบทดสอบแบบจบเวลา

โปรแกรมตอไปนจะแสดงการใชงานคอมโพเนนตไทเมอร โดยจะใชเมธอด Start() เรมจบเวลา เมอ

มการตอบค าถาม และเมธอด Stop() จะหยดการจบเวลา และหากไมสามารถตอบในเวลาทก าหนด จะเรยกใช

เมธอด Stop() เพอหยดการจบเวลา

1) สรางโปรเจกตใหมขนมา จากนนวางคอนโทรลและคอมโพเนนตตางๆ ดงภาพ

ภาพท 2.46

2) ไปทหนาตาง Code Editor ก าหนดตวแปร count = 60 เปนเวลาในการท าแบบทดสอบหนง

ขอ และตวแปล time เกบจ านวนเวลาทใชในการท าแบบทดสอบ

3) คลกพนทวางบนฟอรม จากนนไปทหนาตางคณสมบตและแทบ Events ใหดบเบลคลกอเวนต

Load จะเขาสหนาตาง Code Editor ส าหรบเขยนโคดการท างานในหนา Load ของ Form1 โดยใหก าหนด

Interval คาการจบเวลาและเรยกใชเมธอด Start() ใหไทเมอรเรมจบเวลา

31

ภาพท 2.47

4) ดบเบลคลกทปมกด จะแสดงหนาตาง Code Editor จากนนแทรกโคดหยดนบเวลา ตรวจ

ค าตอบ แสดงผลค าตอบและเวลาทใชไป

5) ดบเบลคลกทคอมโพเนนตไทเมอรในกรอบดานลาง จะแสดงหนาตาง Code Editor และเกดอ

เวนต Timer1_Tick จากนนใหแทรกโคดส าหรบแสดงการนบเวลาถอยหลง หยดจบเวลาเมอหมดเวลา และ

แสดงกลองขอความแจวาผใชไมสามารถตอบค าถามในเวลาทก าหนด

ภาพท 2.48

6) รนเพอทดสอบโปรแกรม

32

2.3.5.9 คอนโทรลสกรอลบาร (ScrollBar)

สกรอลบารจะใชในโอกาสทไมสามารถแสดงผลขอมลทงหมดไดในคราวเดยว เนองจากม

พนทจ ากด หรออาจจะใชเปนอนพตในการปรบคาขอมลกได ซงคอนโทรลสกรอลบารจะมทงในแนวนอนและ

แนวตง ดงน

ตวอยางโปรแกรมแสดงการใชงานสกรอลบาร

ตวอยางโปรแกรมนจะแสดงการใชงานคอนโทรลสกรอลบาร โดยจะรบคารศมวงกลมผานทางสก

รอลบารแลวแสดงคารศม และค านวณพนทวงกลมมาทางเทกซบอกซ

1) สรางโปรเจกตใหมขนมา จากนนวางคอนโทรลตางๆ ดงตอไปน

ภาพท 2.49

2) ดบเบลคลกทสกรอลบาร จะเขาสหนาตาง Code Editor ส าหรบเขยนโปรแกรม และแทรกโคด

ดงตอไปน

ภาพท 2.50

33

3) คลกทคอนโทรล HScrollBar1 จากนนไปท Properties และดทแทบ Events ใหดบเบลคลกทอ

เวนต ValueChanged จะเขาสหนาตาง Code Editor ส าหรบเขยนโปรแกรม โดยใหแทรกโคดน าคารศมจาก

การปรบสกอรลบารมาค านวณหาพนทของวงกลมและแสดงผลใน TextBox2

ภาพท 2.51

4) รนโปรแกรมจะไดผลลพธดงภาพ

ภาพท 2.52