ตวอยาง

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

ตวอยาง