บทความประกอบการเรียนรู้ => เทคนิคการอินเตอร์เฟส Visual C# => ข้อความที่เริ่มโดย: admin ที่ กันยายน 15, 2018, 11:37:32 AM
-
การเรียนรู้ครั้งที่ 2 เป็นการเตรียมหน้าต่างโปรแกรมให้พร้อมที่จะเขียนโค้ดในส่วนอื่น ๆ (การดำเนินการนี้จะต้องมีการทำทุกโปรแกรมที่สร้าง) ซึ่งหัวข้อนี้เป็นการดำเนินการดังนี้
1. เพิ่มปุ่ม About และ Exit ในหน้าต่างหลัก
2. เพิ่มหน้าต่าง About (หน้าต่างแสดงข้อมูลเกี่ยวกับโปรแกรมที่สร้างขึ้น)
3. การใส่โค้ดควบคุมปุ่มทั้ง 2 หน้าต่าง
4. การใส่รูปไอคอนสำหรับตัวโปรแกรม
เริ่มด้วย..
1. เริ่มเปิดโปรแกรม Visual Studio คลิกสร้างโปรเจคใหม่
(http://www.praphas.com/PhotoForum/interface/HowTo2/1.png)
2.สร้างโปรเจคใหม่โดยเลือกเป็น windows form มีขั้นตอนดังรูป
(1) เอาเครื่องหมายออกเพื่อไม่ให้สร้างโฟลเดอร์ซ้อน
(2) หาโฟลเดอร์ที่ต้องการเก็บงาน
(3) ตั้งชื่อโปรเจคไฟล์
(http://www.praphas.com/PhotoForum/interface/HowTo2/2.png)
3. ปรับขนาดหน้าต่างโปรแกรมตามต้องการ
(http://www.praphas.com/PhotoForum/interface/HowTo2/3.png)
4. กำหนดตำแหน่งโปรแกรมเมื่อเริ่มรันให้อยู่กลางจอ
(http://www.praphas.com/PhotoForum/interface/HowTo2/4.png)
5. สร้างปุ่มกดโดยลากจาก ToolBox มาวางแล้วแก้ข้อความใน Text ใน Properties ของปุ่มกดให้เป็นดังรูป
(http://www.praphas.com/PhotoForum/interface/HowTo2/5.png)
6. เพิ่มหน้าต่าง Form2 เป็นหน้าต่าง About
(http://www.praphas.com/PhotoForum/interface/HowTo2/6.png)
7. คลิกเลือก Windows Form
(http://www.praphas.com/PhotoForum/interface/HowTo2/7.png)
8. คลิกที่ Form2 เปลี่ยนชื่อหัวโปรแกรม
(http://www.praphas.com/PhotoForum/interface/HowTo2/8.png)
9. กำหนดตำแหน่งโปรแกรมเมื่อเริ่มรันให้อยู่กลางจอ
(http://www.praphas.com/PhotoForum/interface/HowTo2/9.png)
10. สร้างปุ่มกด แก้ชื่อเป็น OK
(http://www.praphas.com/PhotoForum/interface/HowTo2/10.png)
11. ดับเบิลคลิกที่ปุ่ม OK แล้วเขียนโค้ดเพื่อปิดหน้าต่าง About
(http://www.praphas.com/PhotoForum/interface/HowTo2/11.png)
12. คลิกที่ Form1 ดับเปิลคลิกทั้ง 2 ปุ่ม แล้วเขียนโค้ด
(http://www.praphas.com/PhotoForum/interface/HowTo2/12.png)
13. การแก้ไขรูปไอคอนโปรแกรม โดยการหารูปไอคอนที่เป็นไฟล์ ico เข้าเวปไซต์ ค้นหารูปตามต้องการแล้วคลิกที่ปุ่ม ico เพื่อดาวน์โหลด
http://www.iconarchive.com/ (http://www.iconarchive.com/)
(http://www.praphas.com/PhotoForum/interface/HowTo2/13.png)
14. แก้ไข Properties ของ Form1 ในส่วนไอคอนเพื่อให้แสดงรูปไอคอนที่ต้องการ คลิกแล้วเลือกรูปที่ดาวน์โหลดมา
(http://www.praphas.com/PhotoForum/interface/HowTo2/14.png)
15. ไอคอนมุมของหน้าต่างโปรแกรมจะมีไอคอนตามที่ตั้งค่าไว้
(http://www.praphas.com/PhotoForum/interface/HowTo2/15.png)
16. แก้ไขรูปไอคอนของตัวโปรแกรม โดยคลิกตามขั้นตอนดังรูป
(http://www.praphas.com/PhotoForum/interface/HowTo2/16.png)
17. คลิกแล้วเลือกไอคอนที่ดาวน์โหลดมา
(http://www.praphas.com/PhotoForum/interface/HowTo2/17.png)
18. หลังจากทดสอบการรันโปรแกรมแล้วเปิดโฟลเดอร์ที่เก็บไฟล์ exe ของโปรเจค (อยู่ในโฟลเดอร์ /bin/Debug) จะเห็นว่าโปรแกรมจะมีไอคอนตามต้องการ
(http://www.praphas.com/PhotoForum/interface/HowTo2/18.png)
-
...
-
...