การใช้ Control Object เบื้องต้น

หน่วยที่ 2 การใช้ Control Object ก า ร เ ขี ย น โ ป ร แ ก ร ม โ ด ย ใ ช้ เ ค ร่ื อ ง มื อ ก ร า ฟิ ก โ ห ม ด : จุ ฬ า ลั ก ษ ณ์ ถ า ไ ช ย ล า ภ า ค วิ ช า ค อ ม พิ ว เ ต อ ร์ ธุ ร กิ จ วิ ท ย า ลั ย อ า ชี ว ศึ ก ษ า ม ห า ส า ร ค า ม

หนว่ ยที่ 2 การใช้ Control Object Control Object คือสงิ่ ที่ผู้พัฒนาโปรแกรมจะนามาวางไวบ้ นฟอรม์ เช่น ปุ่มกด ช่องกรอกข้อมลู ลติ สแ์ สดง รายการ เปน็ ตน้ สามารถเรียกใช้งานได้จาก ToolBox ซ่งึ จะแบ่งการใชง้ านออกเป็นหมวดๆ การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

การใช้งาน Button Control Button Control หรือปุ่มกด อย่ใู นกลมุ่ Common Controls เปน็ คอนโทรลทีม่ กี ารใชง้ านบ่อยมากใน การพัฒนาโปรแกรม เนือ่ งจากผู้ใชง้ านโปรแกรมส่วนใหญค่ นุ้ เคยกบั การคลิกปุม่ เพื่อสั่งใหโ้ ปรแกรมทางานตาม ตอ้ งการ การใชง้ านคอนโทรล มีขั้นตอนดังนี้ 1. ไปท่ี ToolBox เลอื กกลุ่ม Common Controls 2. คลกิ เมาสค์ ้างท่ีรายการ Button แลว้ ลากเมาสน์ า Button มาวางทฟ่ี อร์ม แลว้ ปลอ่ ยเมาส์ 3. จะได้ Button หรือปุม่ กด 4. เมือไดป้ ุ่มกดแล้ว ไปท่ี Properties Text เปลย่ี นข้อความเป็น “CLICK” การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

การใชง้ าน TextBox Control TextBox Control คือ ชอ่ งสาหรับให้ผู้ใช้งานโปรแกรมไดท้ าการกรอกขอ้ มลู เชน่ ช่ือ-นามสกลุ เป็นตน้ เพื่อสง่ ค่าขอ้ มูลนั้นใหโ้ ปรแกรมนาไปประมวลผล มีขนั้ ตอนการใช้งานดงั น้ี 1. ไปที่ ToolBox เลือกกลมุ่ Common Controls 2. คลิกเมาส์ค้างทีร่ ายการ TextBox แล้วลากเมาส์นา TextBox มาวางทฟ่ี อรม์ แลว้ ปล่อยเมาส์ 3. เมื่อได้ TextBox แล้ว ไปที่ Properties Name เปลย่ี นขอ้ ความเป็น Txt1 การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

การใช้งาน Label Control Label Control คอื คอนโทรลทใ่ี ช้สาหรบั แสดงข้อความบนฟอรม์ มขี ั้นตอนการใช้งานดงั น้ี 1. ไปท่ี ToolBox เลอื กกลุม่ Common Controls 2. คลกิ เมาสค์ ้างทรี่ ายการ Label แลว้ ลากเมาสน์ า Label มาวางที่ฟอรม์ แล้วปลอ่ ยเมาส์ 3. เมื่อได้ Label แล้ว ไปท่ี Properties Text เปลี่ยนขอ้ ความเป็น ช่ือ – นามสกุล การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

วธิ ีการเขียนโค้ดกับโปรแกรม Visual Basic 1. ดับเบลิ คลิกท่ี Button “CLICK” 2. โปรแกรมจะเปิดในส่วนโคด้ ขึน้ มาเพอื่ ใหเ้ ขียนโปรแกรมเข้าไปทีป่ ุม่ ได้ 3. จะมี cursor กระพริบอยใู่ นบรเิ วณทส่ี ามารถเขียนโคด้ เขา้ ไปได้ 4. สงั่ Run Program โดยกดปุม่ แลว้ ปอ้ นชอื่ -นามสกลุ การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

ใบงานที่ 2 การใช้งาน Control Label การสร้าง Label บน Form 1. เลือก Control Label จาก ToolBox 2. เล่ือนเมาสไ์ ปวางบนพน้ื ท่ีของ Form จะปรากฏเครื่องหมาย + คลิกเมาส์ซา้ ยคา้ งไวแ้ ลว้ ลากจากมุมซา้ ย บนมายงั มุมขาวลา่ ง จะปรากฏ Label บนฟอร์ม หรือดบั เบลิ คลิกท่ี Control Label การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

3. สรา้ ง Label จานวน 3 ขอ้ ความ กาหนดคุณสมบตั ดิ งั น้ี Object Properties ค่าที่กาหนด Label1 Name LBLName BackColor เหลืองอ่อน Label2 ForeColor แดง Font Angsana New ขนาด 12 Label3 Text ช่ือ – สกลุ TextAlign ก่ึงกลาง (Middle Center) Name LBLExpense BackColor โปร่งใส (Transparent) เลือก Tab Web ForeColor ดา Font Angsana New ขนาด 20 Text คา่ ใชจ้ า่ ยส่วนตวั TextAlign มุมขวาบน (TopRight) Name LBLAmount BackColor ขาว ForeColor น้าเงนิ Font Angsana New ขนาด 18 Text จานวนเงนิ TextAlign ชิดขอบซา้ ย (MiddleLeft) การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

ใบงานที่ 3 การสร้างและกาหนดคุณสมบตั ิ TextBox 1. คลิกเลือก Control TextBox จาก ToolBox 2. เลื่อนเมาส์มาบริเวณ Form คลิกเมาสซ์ า้ ยคา้ งไวแ้ ลว้ ลากจากมุมบนซา้ ยลงมามุมล่างขวา หรือดบั เบิลคลิก ท่ี Control TextBox กาหนด Properties ของ TextBox ตามตอ้ งการ การปรบั ขนาดของ TextBox ใหต้ ้งั ค่า Properties Multiline เป็น True 3. สร้าง Control Label และ TextBox กาหนดคุณสมบตั ิดงั น้ี Object Properties ค่าท่ีกาหนด Label1 Name LBLName Font Microsoft Sans Serif ขนาด 12 Text ช่ือสินคา้ TextAlign ชิดขอบบนซา้ ย (TopLeft) TextBox1 BackColor สีฟ้ า TextBox2 กาหนดแบบ Multiline BackColor สีเหลืองอ่อน กาหนดแบบ Multiline Font Microsoft Sans Serif ขนาด 14 Scroll Bar แนวต้งั (Vertical) Text รายละเอียดสินคา้ TextAlign ชิดขอบซา้ ย (Left) การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

ใบงานที่ 4 การเขียนคาส่ังใน TextBox ใบงาน 4.1 สร้าง Project ใหม่ สรา้ ง TextBox และ Label กาหนดคุณสมบตั ิดงั น้ี Object Properties คา่ ทก่ี าหนด TextBox1 Name txtHello กาหนดแบบ Multiline TextBox1 Text TextBox1 TextAlign ก่ึงกลาง (Center) Label1 Name txtName กาหนดแบบ Multiline Label2 Text TextBox2 TextAlign ก่ึงกลาง (Center) Name LBLHello BackColor สีเขยี วอ่อน Text Label1 TextAlign ก่ึงกลาง (MiddleCenter) Name LBLName BackColor สีชมพู Text Label2 TextAlign ก่ึงกลาง (MiddleCenter) การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

การเขียนคาสงั่ เมื่อป้ อนขอ้ มูลใน TextBox1 ให้แสดงผลใน Label1 1. ดบั เบิลคลิกท่ี TextBox1 จะปรากฏหนา้ ต่าง Code 2. ใส่ Code เพอื่ ใหต้ วั อกั ษรทใ่ี ส่ลงใน TextBox1 แสดงผลใน Label1 3. ดบั เบิลคลิกท่ี TextBox2 จะปรากฏหนา้ ต่าง Code 4. ใส่ Code เพอ่ื ใหต้ วั อกั ษรทใี่ ส่ลงใน TextBox2 แสดงผลใน Label2 5. RUN Program คลิกป่ มุ การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

ใบงานที่ 5 การออกแบบฟอร์มด้วยคอนโทรลพนื้ ฐาน **************** 1. สร้าง Project ใหม่ วาง Label ลงบนฟอร์มด้วยหัวข้อต่างๆ ดังรูป รายละเอียดการกาหนดค่าใน Properties ดงั น้ี Object Properties ค่าที่กาหนด Form1 Text ฟอร์มประวตั ิ Label1 Font MS Sans Serif ขนาด 12pt (ใชฟ้ อนตน์ ้ีท้งั หมด) Text ชื่อ-นามสุกล : Labe2 Text คานาหนา้ : Labe3 Text ระดบั ช้นั : Labe4 Text หอ้ ง : Labe5 Text เลขท่ี : Labe6 Text เรียนภาค : Labe7 Text กีฬาท่ชี อบ : การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

2. การรับข้อมูลด้วย เป็นคอนโทรลท่นี ามาใชส้ าหรับป้ อนขอ้ มลู หรือแสดงผล หรือแกไ้ ขขอ้ มูล รายละเอียดการกาหนดคา่ ใน Properties ดงั น้ี Object Properties ค่าที่กาหนด TextBox1 Font MS Sans Serif ขนาด 10pt 60 MaxLength การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

3. การกาหนดตัวเลือกด้วย เป็นคอนโทรลแสดงตวั เลือกภายในลิสต์ (DropDown List) เพอื่ ใหผ้ ใู้ ชเ้ ลือกตวั เลือกจากรายการไดเ้ พยี ง หน่ึงตวั เลือก และยงั สามารถพมิ พข์ อ้ มลู เพมิ่ เตมิ ได้ กรณีค่าท่ีตอ้ งการอยเู่ หนือจากตวั เลือกที่ใหม้ า รายละเอียดการกาหนดค่าใน Properties ดงั น้ี Object Properties ค่าท่ีกาหนด ComboBox1 DropDownStyle DropDown : (ถา้ เลือกเป็น DropDownList จะไมส่ ามารถ Font พมิ พข์ อ้ ความเพม่ิ ได)้ Items MS Sans Serif ขนาด 10pt นาย , นางสาว , นาง การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

4. การกาหนดตวั เลอื กด้วย เป็นคอนโทรลทีใ่ หผ้ ใู้ ชเ้ ลือกรายการตามตวั เลือกทีก่ าหนดไวเ้ ทา่ น้นั ไม่สามารถพมิ พร์ ายการเพมิ่ เหมือนกบั ComboBox รายละเอียดการกาหนดค่าใน Properties ดงั น้ี Object Properties ค่าทีก่ าหนด ListBox1 Items ปวช.1 , ปวช.2 , ปวช.3 ListBox2 Items 1คพ1,1คพ2,1คพ3,2คพ1,2คพ2,2คพ3,3คพ1,3คพ2,3คพ3 TextBox1 MaxLength 2 การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

ส่ัง RUN Program การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

5. การกาหนดตัวเลือกด้วย เป็นคอนโทรลสาหรบั ใหผ้ ใู้ ชเ้ ลือกรายการท่กี าหนดไดเ้ พยี งหน่ึงรายการเท่าน้นั ปกติจะใชง้ านร่วมกบั คอนโทรล โดยจะสร้าง GroupBox ก่อน แลว้ จึงนา RadioButton วางลงไป ข้นั ตอนแรก วาง ลงในฟอร์ม รายละเอียดการกาหนดค่าใน Properties ดงั น้ี ค่าที่กาหนด Object Properties ภาค GroupBox1 Text ตอ่ ไปวาง RadioButton 3 ตวั เลือกลงใน GroupBox การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

รายละเอียดการกาหนดคา่ ใน Properties ดงั น้ี Object Properties ค่าทีก่ าหนด RadioButton 1 Text RadioButton 2 Text เชา้ RadioButton 3 Text บา่ ย ค่า ส่ัง RUN Program การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

6. การกาหนดตวั เลือกด้วย เป็นคอนโทรลท่ใี หผ้ ใู้ ชส้ ามารถเลือกรายการไดม้ ากกวา่ หน่ึงรายการ รายละเอียดการกาหนดคา่ ใน Properties ดงั น้ี Object Properties ค่าท่กี าหนด GroupBox2 Text CheckBox1 Text เลือกประเภทกีฬา CheckBox2 Text บาสเกตบอล CheckBox3 Text วอลเลยบ์ อล CheckBox4 Text วา่ ยน้า CheckBox5 Text แบตมินตนั CheckBox6 Text เทนนิส ฟุตบอล การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

สง่ั RUN Program กรณตี ้องการแทรกรายการเพม่ิ ทลี่ าดบั แรกในฟอร์ม รายละเอียดการกาหนดคา่ ใน Properties ดงั น้ี Object Properties ค่าท่กี าหนด Label8 Text TextBox3 MaxLength รหสั นกั ศกึ ษา : 8 เมื่อสงั่ Run ตาแหน่งโฟกสั จะไม่เรียงลาดบั รหสั นกั ศกึ ษาจะถูกป้ อนอนั ดบั สุดทา้ ย ดงั น้นั จงึ ควรจดั ลาดบั โฟกสั ใหม่ โดยคลิกทีค่ อนโทรแลว้ แกไ้ ขรายการ TabIndex ในหนา้ ต่าง Properties ใหม่ท้งั หมด หรือคลิกท่เี มนู VIEW > Tab Order ทฟี่ อร์มจะปรากฏลาดบั หมายเลขใหเ้ ห็น การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

ใหพ้ จิ ารณาตวั เลขลาดบั ท่ใี ชส้ าหรับป้ อนขอ้ มูลเป็ นหลกั จากน้นั ใชเ้ มาสค์ ลิกที่คอนโทรลตวั แรก (ช่อง ป้ อนรหสั นกั ศกึ ษา) และคลิกตวั ถดั ไปเร่ือยๆ ตวั โปรแกรมจะลาดบั ตวั เลขใหอ้ ตั โนมตั ิ เมื่อดาเนินการเสร็จใหก้ ด ป่ มุ ESC แลว้ RUN ใหม่ การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

7. การแสดงรูปภาพด้วย นามาใชแ้ สดงรูปภาพ รายละเอียดการกาหนดคา่ ใน Properties ดงั น้ี Object Properties ค่าทกี่ าหนด PictureBox3 SizeMode Visible Zoom Image False (จะไม่แสดงภาพ จนกวา่ จะคลิกป่ มุ Display) ระบุตาแหน่งโฟลเดอร์ท่ีเกบ็ ภาพ การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

สง่ั RUN Program ไม่แสดงรูปจนกวา่ จะคลิกป่ มุ ใหแ้ สดง การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

8. การสร้างป่ ุมคาส่ังด้วย เป็นคอนโทรลป่ มุ คาสงั่ ที่ตอบสนองการคลิกเมาสเ์ พอื่ สงั่ งานใหท้ าตามบทบาทของป่ มุ น้นั ๆ รายละเอียดการกาหนดค่าใน Properties ดงั น้ี Object Properties ค่าทีก่ าหนด Button1 Name Text cmdDisplayPic Button2 Name Display Text cmdExit Exit ดบั เบิลคลิกท่ีป่ มุ แลว้ เขียนโคด้ การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

ดบั เบลิ คลิกทปี่ ่ มุ แลว้ เขียนโคด้ สงั่ RUN Program แลว้ คลิกป่ มุ ออกจากโปรแกรมคลกิ ป่ มุ การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

ใบงานท่ี 6 แบบฟอร์มกรอกข้อมูล ******************** 1. สร้าง Project ใหม่ นาคอนโทรลต่างๆ มาวางเพื่ออกแบบฟอร์มกรอกขอ้ มลู สมคั รงาน ดงั รูป การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จุฬาลกั ษณ์ ถาไชยลา

ข้นั ตอนการสร่างป่ มุ Browse เพือ่ ให้ผู้ใช้เลอื กรูปถ่ายทบี่ รรจุในโฟลเดอร์ต่าง ๆ ในเครื่อง การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

ท่ี ToolBox ให้ลากคอนโทรล มาวางในฟอร์ม จะพบคอนโทรล แสดงอยู่ด้านล่าง ดบั เบิลคลิกท่ปี ่ มุ และเขียนโค้ดคาส่ัง ดังนี้ การเขียนโปรแกรมโดยใช้เครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา

RUN Program คลิกป่ ุม เพอ่ื เลือกไฟล์ภาพ ถ้าเลือกชนิดของไฟล์ไม่ถูกต้อง เช่น จะแสดงข้อความให้เลอื กไฟล์ใหม่เป็ นชนิดรูปภาพให้ถูกต้อง การเขียนโปรแกรมโดยใชเ้ ครื่องมือกราฟิกโหมด : จฬุ าลกั ษณ์ ถาไชยลา