~ Ó p...2. หล งจากท ค ณดาวน โหลดมาแล ว ก จะเข...
TRANSCRIPT
ตวอยาง
Table of Contents
บทท 1 เตรยมความพรอมกอนพฒนา Windows 10 Apps ...............................1
บทน า ........................................................................................................ 1
แนวทางการน าเสนอในหนงสอเลมน ........................................................... 2
การดาวนโหลดและตดตง Visual Studio 2015............................................ 2
การก าหนดใหแสดงไดอะลอกสรางโปรเจกตใหม ......................................... 5
การก าหนดหมายเลขบรรทดใน Code Editor .............................................. 6
ขนตอนการสรางโปรเจกตใหม .................................................................... 7
ท าความรจกกบสภาพแวดลอมของ VS 2015 ............................................. 8
การทดสอบรนโปรเจกตของ Windows 10 Apps ......................................... 9
การรนโปรเจกตส าหรบหนาจอใหญ PC, Notebook และแทบเลต ................ 9
การรนโปรเจกตส าหรบหนาจอเลก มอถอทตดตง Windows 10 for phones
................................................................................................................ 12
แกไขปญหากรณไมสามารถรน Windows 10 for phones ......................... 15
แกไขปญหากรณ Windows 10 for Phone คางทหนา OS is starting….... 16
การอพเดตเครองมอและรายการ SDK ตางๆ ของ Windows 10 Apps ...... 20
การอพเดต Windows 10 SDK และ Mobile Emulator .............................. 22
การก าหนด build ใหกบโปรเจกต Windows 10 Universal Apps .............. 26
การอพเดต Visual Studio 2015 ............................................................... 28
ตวอยาง
สรปทายบท ............................................................................................. 31
บทท 2 พนฐานทางภาษากอนพฒนา Windows 10 Apps ..............................32
บทน า ...................................................................................................... 32
การอางองคอนโทรลหรออลเมนต ............................................................. 33
วธการเขยนสครปต XAML ....................................................................... 33
การสรางเหตการณในสครปต XAML ........................................................ 34
อธบายการท างานของโคด.................................................................... 38
การ Copy คอนโทรลดวยปม Alt บนคยบอรด ........................................... 39
การยกเลกแกไขคณสมบต ........................................................................ 40
การเลอกโฟกสคอนโทรลทสนใจอย ........................................................... 42
พนฐานการใชคณสมบตทเกยวกบส .......................................................... 43
การลงสเดยวโดยอาศยแปรงทาสแบบ Solid color brush .......................... 44
การลงสแบบไลโทนส Gradient................................................................. 45
การจดต าแหนงคอนโทรลดวยคณสมบตดาน Alignment ........................... 48
การจดระยะหางดวยคณสมบต Margin ..................................................... 51
การปรบแตงแถบ Titlebar ........................................................................ 54
อธบายการท างานของโคด.................................................................... 56
การปรบเพจในโหมดเตมจอ ...................................................................... 57
อธบายการท างานของโคด.................................................................... 59
ตวอยาง
1 | P a g e
บทท 1 เตรยมความพรอมกอนพฒนา Windows 10 Apps
บทน า ในปจจบนไมโครซอฟทพฒนาระบบปฏบตการ Windows 10 ขนมาใหม โดยยดแนวทางทใชระบบปฎบตการ Windows 10 เพยงตวเดยว แตสามารถใชงานไดท ง PC, Notebook, Xbox, มอถอ และแทบเลต ผเขยนขอกลาวใน 2 มมมองทมตอระบบปฎบตการ Windows 10 กลาวคอ 1. ในแงของผใชงาน แนนอนวา การก าหนดใหใชระบบปฏบตการ Windows
10 เพยงหนงเดยว จะท าใหผใชงานคนเคยกบสภาพแวดลอมของ Windows 10 ไดเปนอยางด
2. ในแงของนกพฒนา คณพฒนาโปรเจกตเพยง 1 โปรเจกตใน Visual Studio 2015 ซงเรยกวา “Universal Apps” ผลลพธทไดออกมา กคอ แอพทคณสามารถใชงานไดท ง PC, มอถอ และแทบเลตในคราวเดยวกน
หมายความวา นบจากนไป แอพทคณไดมาจากโปรเจกตแบบ Universal Apps มชองทางการใชงานอยางนอย 3 ชองทาง เหนไดวา มความสะดวกเปนอยางมาก
ตวอยาง
2 | P a g e
แนวทางการน าเสนอในหนงสอเลมน การพฒนาแอพของ Windows 10 ดวยโปรเจกตชนด Universal Apps สามารถตดตงได 4 แพลตฟอรม (PC, แทบเลต, มอถอ และ Xbox) สามารถแบงออกเปน 2 กลมใหญ คอ
1. แอพทใชส าหรบหนาจอใหญ ไดแก PC, แทบเลต ทตดตงระบบปฏบตการ Windows 10
2. แอพทใชส าหรบหนาจอขนาดเลก ไดแก มอถอ ทตดตงระบบปฏบตการ Windows 10 for phones รปแบบการน าเสนอเนอหาเลมน กคอ รปภาพแสดง Output หรอผล
การท างานของแตละตวอยางทได จะยดถอหนาจอใหญเปนหลก ใชในกรณหนาจอเลกกบหนาจอใหญ มผลการท างานเหมอนกนเทานน
แตถามตวอยางไหนกตาม ทม Output หรอผลการท างานแตกตางกนระหวางหนาจอใหญกบหนาจอเลก ผเขยนจะแสดงรปภาพทง 2 กรณ เพอใหคณผอานเหนผลลพธ เหนความแตกตางครบถวน
การดาวนโหลดและตดตง Visual Studio 2015 การพฒนา Windows 10 Apps มขอบงคบไววา คณตองตดตง Visual Studio 2015 บน Windows 10 เทานน มข นตอนดงตอไปน
ตวอยาง
3 | P a g e
1. ใหคณไปทเวบไซด https://www.visualstudio.com/downloads/download-visual-studio-vs เพอดาวนโหลด Visual Studio 2015 มาใชงาน ดงรปท 1-1
รปท 1-1 แสดงการเลอกวธดาวนโหลดโปรแกรม Visual Studio 2015 จากรปท 1-1 คณสามารถเลอกดาวนโหลด Visual Studio Community 2015 มาใชงานไดฟร ขอใหคณเลอกดาวนโหลดแบบไฟล ISO
ตวอยาง
4 | P a g e
2. หลงจากทคณดาวนโหลดมาแลว กจะเขาสข นตอนการตดตงโปรแกรม Visual Studio 2015 ขอใหคณตดตงแบบ Custom ดงรปท 1-2
รปท 1-2 แสดงการเลอกตดตงแบบ Custom 3. ในกรณน เราตองการพฒนา Windows 10 Apps ตองมการก าหนดรายการ
ตดตงเพมเตมอก กลาวคอ ทรายการ Universal Windows App Development Tools ใหคณเลอกตดตงรายการตอไปนดวย o Tools and Windows SDK เวอรชนลาสดเทาทมอย o Emulators for Windows Mobile เวอรชนลาสดเทาทมอย
ตวอยาง
5 | P a g e
รปท 1-3 แสดงการเลอกตดตง Template ส าหรบพฒนา Windows 10 Apps การตดตงรายการขางตน ตองมการตออนเตอรเนตดวย ใชระยะเวลาพอสมควร ใหคณรอจนกระทงตดตงเสรจสมบรณ
การก าหนดใหแสดงไดอะลอกสรางโปรเจกตใหม เพอใหการใชงานโปรแกรม Visual Studio 2015 พรอมใชงานมากยงขน ขอใหคณก าหนดใหแสดงไดอะลอกสรางโปรเจกตใหม ปรากฏขนมาเสมอ โดยการเลอกเมน Tools > Options ทรายการ Environment > Startup ทชอง At startup: ใหเลอกรายการ Show New Project dialog box ดงรปท 1-4
ตวอยาง
6 | P a g e
รปท 1-4 แสดงการก าหนดใหแสดงไดอะลอกสรางโปรเจกตใหม
การก าหนดหมายเลขบรรทดใน Code Editor ล าดบตอมา เปนการก าหนดใหตวเขยนโคด (Code Editor) แสดงหมายเลขบรรทดของโคดแตละบรรทดดวย ทหวขอ Text Editor > All Languages ใหคณเลอกตวเลอก Line numbers ดงรปท 1-5
รปท 1-5 แสดงการก าหนดใหแสดงหมายเลขบรรทดใน Code Editor
ตวอยาง
7 | P a g e
ขนตอนการสรางโปรเจกตใหม มข นตอนดงน 1. ทไดอะลอกสรางโปรเจกตใหม ใหคณเลอกโปรเจกตแบบ Windows >
Universal เลอกโปรเจกตแบบ Blank App (Universal Windows) หมายถง โปรเจกตแบบวาง ดงรปท 1-6
รปท 1-6 แสดงการสรางโปรเจกตแบบ Windows 10 Apps 2. โปรแกรม Visual Studio 2015 จะสรางโปรเจกตแบบ Windows 10 Apps
แบบวางๆ ใหคณโดยอตโนมต ดงรปท 1-7
ตวอยาง