P a g e | 0

คมอเขยน Windows 8 Apps ดวย VB 2012 และ VC# 2012 ส ำหรบผเรมตน

คมอเขยน Windows 8 Apps ดวย VB 2012 และ VC# 2012 ส ำหรบผเรมตน

ผแตง : นายศภชย สมพานช เนอหำ : 18 บท (618 หนา) ฟอนต : www.f0nt.com/

วนทพมพ : กนยายน 2555 ครงทพมพ : 1st Edition

ลขสทธ : สงวนลขสทธตาม พ.ร.บ. ลขสทธ พ.ศ. 2537 หามลอกเลยนแบบ, ดดแปลง, ทาซ า, เผยแพร ไมวาสวนหนงสวนใดของหนงสอเลมน หรอดวยวธการใดๆ กตาม นอกจากจะไดรบอนญาตเปนลายลกษณอกษรจากผเขยนเทาน น

คณผอานสามารถสอบถามปญหา-ตชมเน อหาของหนงสอเลมน ไดท https://www.facebook.com/thaivb.net

Visual Studio เปนเครองหมายทางการคาของบรษท Microsoft Coporation จ ากด โปรแกรมตางๆ ตามทอางในหนงสอเลมน เปนเครองหมายการคาของบรษทนนๆ

ค ำน ำ การพฒนา Windows 8 Apps ใน Visual Studio 2012 ดวย VB 2012 & VC# 2012 ถอวาเปนเรองใหมมากสาหรบโปรแกรมเมอรสาย .NET มาพรอมกบการเปดตวของระบบปฏบตการ Windows 8 และอปกรณแทบเลตของไมโครซอฟททเรยกวา Surface เน อหาทนาเสนอในหนงสอเลมน เหมาะสาหรบคณผอานทเปนมอใหมในโลกของ .NET และโปรแกรมเมอรสาย .NET เดมทตองการพฒนา Windows 8 Apps ดวย VB 2012 & VC# 2012 โดยทผเขยนนาเสนอเน อหาครบถวนท ง 2 ภาษา กลาวคอ

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

สดทายน ผเขยนขอขอบคณสวนชวยเหลอใน MSDN ของไมโครซอฟททชวยแกไขปญหาในระหวางการแตงหนงสอเลมน หากคณผอานทานใด ตองการสอบถามปญหาเน อหาของหนงสอเลมน สามารถโพสถามปญหาไดทแฟนเพจของผเขยนท https://www.facebook.com/thaivb.net โดยทผเขยนขอยกเลกการถาม-ตอบปญหาผานระบบ e-mail ของผเขยนท งหมด

ศภชย สมพานช กนยายน 2555

ตวอยำงทนำสนใจในหนงสอเลมน

กำรสรำงปมควบคมแสดงคลปวดโอระดบ FullHD ในสวนแสดงผลของ Windows 8 Apps

กำรแกไขสวนแสดงผลในคอนโทรล ComboBox แบบท 1

กำรแกไขสวนแสดงผลในคอนโทรล ComboBox แบบท 2

กำรท ำงำนกบคอนโทรล GridView

กำรสรำงไดอะลอกแจงผใชงำน

สวนแสดงผลแบบ Windows Store

กำรคนหำขอมลจำก Bing, Yahoo และ Google ดวย Windows 8 Apps

กำรแสดงขอควำมและรปภำพในคอนโทรล GridView

สำรบญ บทท 1 กำวแรกเขำสโลกของ Windows 8 Apps 1

บทนา 1

ทาความรจกกบ Windows 8 ในข นตน 2

รปแบบของ App ในยคปจจบน 4

แนวทางของโปรแกรมเมอรในยค .NET Framework 4.5 5

การพฒนา Windows 8 Apps ดวย Visual Studio 2012 Express for Windows 8 17

การขอสทธชวคราวในการพฒนา Windows 8 Apps 23

การขอหรอตออาย Developer license 27

โครงสรางของ Windows 8 Apps 28

รปแบบการนาเสนอตวอยางในหนงสอเลมน 31

รปแบบการลงโคด (VB 2012 & VC# 2012) และสครปต XAML ในหนงสอเลมน 32

การจดระเบยบโคดหรอสครปตใน VS 2012 33

สรปทายบท 34

บทท 2 พนฐำนกำรพฒนำ Windows 8 Apps 35

บทนา 35

Windows 8 Apps แรกของคณ 36

การสรางเหตการณในสครปต XAML 46

การทดสอบรน Windows 8 Apps 53

ทาความรจกกบ Simulator ในข นตน 54

การกาหนดเพจเรมตน 61

วธการปด Windows 8 Apps ทถกตอง 62

การคนหาคณสมบตตางๆ 65

การอางองคอนโทรลหรออลเมนต 65

การเลอกโฟกสคอนโทรลทสนใจอย 69

การยกเลกแกไขคณสมบต 71

การ Copy คอนโทรลดวยปม Alt บนคยบอรด 72

การจดตาแหนงคอนโทรลดวยคณสมบตดาน Alignment 73

การจดระยะหางดวยคณสมบต Margin 76

สรปทายบท 78

บทท 3 กำรจดสวนแสดงผลดวยคอนโทรลประเภท Layout 79

บทนา 79

พ นฐานการใชงานคอนโทรล Grid 80

การรวมคอลมนหรอรวมแถวในคอนโทรล Grid 85

การปรบแตง Layout ของคอนโทรล Grid 87

การเปลยนสพ นหลงใหกบตวบรรจ 89

การจดเรยงคอนโทรลตามแนวนอนหรอแนวต งดวยคอนโทรล StackPanel 96

การเปลยนตวบรรจดวยคาสงใน VS 2012 99

การจดกลมคอนโทรลดวยคาสงใน VS 2012 100

การควบคมตวบรรจ 102

การสรางสวนแสดงผลแบบพ นทอสระดวยคอนโทรล Canvas 106

การซอนกนของวตถในสวนแสดงผลแบบ Canvas 108

การแสดงขอมลแบบมแถบเลอนดวยคอนโทรล ScrollViewer 110

สรปทายบท 112

บทท 4 กำรใชงำนคอนโทรลพนฐำน 113

บทนา 113

การสรางชองปอนขอความดวยคอนโทรล TextBox 114

การแสดงขอความหลายบรรทดในคอนโทรล TextBox 116

การสรางปมทมรปและขอความ 118

พ นฐานการแสดงขอความแบบหรหราดวยคอนโทรล RichTextBlock 119

การสรางเน อหาแบบหรหราในคอนโทรล RichTextBlock 121

การสรางตวเลอกดวยคอนโทรล RadioButton 123

การตรวจสอบ Content ของคอนโทรล RadioButton กรณทมการปรบแตง 124

การสรางตวเลอกดวยคอนโทรล CheckBox 129

การสรางปมกดคางดวยคอนโทรล RepeatButton 133

การสรางบราวเซอรขนาดเลกดวยคอนโทรล WebView 137

พ นฐานการเลนคลปวดโอดวยคอนโทรล MediaElement 143

การสรางเครองเลนคลปวดโอดวยคอนโทรล MediaElement 145

สรปทายบท 153

บทท 5 กำรใชงำนคอนโทรลประเภท list 154

บทนา 154

การใชงานคอนโทรล ComboBox 155

พ นฐานการใชงานคอนโทรล ListBox 160

การแสดงรปภาพในรายการของคอนโทรล ListBox 168

การเพมและลบรายการในคอนโทรล ListBox 175

สรปทายบท 179

บทท 6 กำรปรบแตงคอนโทรลดวย Style 180

บทนา 180

การใชงาน Style 181

การกาหนดขอบเขตการใชงานของ Resources 184

การกาหนดขอบเขตการใชงาน Resources ระดบ Local 185

การกาหนดขอบเขตการใชงาน Resources ระดบ Container 186

การใชงาน Resources ทมขอบเขตระดบ Application 186

การเรยกใชแบบภายใน 187

การเรยกใชแบบภายนอก 188

การกาหนดธมใน Windows 8 Apps ตามทเราตองการ 190

การควบคมธมโดยการเขยนโคด 192

สรปทายบท 198

บทท 7 กำรผกตดขอมล (Data Binding) ใน Windows 8 Apps 199

บทนา 199

การผกตดขอมลระหวางคอนโทรลของ Windows 8 Apps 200

รปแบบการผกตดขอมล 201

การสรางถาดผสมส 205

การผกตดขอมลจากคลาสแบบปกต 210

การผกตดขอมลโดยการเขยนโคด 217

สรปทายบท 222

บทท 8 กำรแกไขสวนแสดงผลในคอนโทรลผำนระบบ Template 223

บทนา 223

การผกตดขอมลกบคลาสโดยการแกไข Template 224

การแกไข Template ในขณะออกแบบ 236

การปรบแตงรายการในคอนโทรล ComboBox 248

พ นฐานการแสดงขอมลในคอนโทรล ListView แบบแกไข Template 255

สรปทายบท 266

บทท 9 ระบบไฟลใน Windows 8 Apps 267

บทนา 267

การเรยกระบบจดเกบขอมลใน Windows 8 268

แนวความคดของการเขยนโปรแกรมแบบขดจงหวะได (Asynchronous Programming) 268

พ นฐานการสราง, เขยนและอานไฟลใน Windows 8 Apps 269

ทาความรจกกบโฟลเดอรระบบในข นตนของ Windows 8 283

การเปดไฟล pdf หรอไฟลประเภทอนๆ ดวย Windows 8 Apps 286

การอานพาธของโฟลเดอร Assets และ Common 292

การคนหาไฟล 295

การเพมประสทธภาพคนหาไฟลดวย Advanced Query Syntax 304

ทางานกบระบบจดเกบขอมลดวยคอนโทรล FileOpenPicker 309

สรปทายบท 316

บทท 10 ท ำงำนกบรปภำพ 317

บทนา 317

การแสดงรปภาพดวยคอนโทรล Image 318

การลงสขอความดวยรปภาพ 319

การกาหนดความเขม-จางดวยคณสมบต Opacity 320

การเปลยนรปภาพโดยการเขยนโคด 322

สรปทายบท 325

บทท 11 กำรออกแบบสวนแสดงผลใน Windows 8 Apps 326

บทนา 326

การตรวจสอบความละเอยดของสวนแสดงผล 327

การสรางสวนแสดงผลแบบชองเปลยนเน อหาไดดวยคอนโทรล FlipView 330

การสรางอลบ มรปดวยคอนโทรล FlipView 336

การสรางสวนแสดงผลหลายแบบ (Multiple View) ดวยคอนโทรล FlipView 339

การสรางสวนแสดงผลแบบเปลยนหลายหนาได 355

การรบ-สงขอมลระหวางเพจ 359

การรกษาสถานะขอมลดวยระบบแคช (Cache) 367

การสรางสวนแสดงผลแบบตารางสเหลยมดวยคอนโทรล GridView 371

การเพมรายการในคอนโทรล GridView โดยการเขยนโคด 381

สรปทายบท 390

บทท 12 ระบบเมนและไดอะลอก 391

บทนา 391

การแสดงขอมลแบบ Popup ดวยคอนโทรล Popup 392

การสรางเมนจากการคลกขวา (ContextMenu) 395

พ นฐานการใชงาน AppBar 398

การปรบแตงแถบ AppBar โดยใช Style สาเรจรป 403

การสรางเมนใหกบแถบ AppBar 408

การสรางกรอบขอความดวยคลาส MessageDialog 413

การใช MessageDialog แบบมการตรวจสอบปมทถกเลอก 415

การสราง MessageDialog กอนออกจาก App 419

สรปทายบท 421

บทท 13 ท ำควำมรจกกบ Blend for Visual Studio 2012 422

บทนา 422

การใชงาน VS 2012 รวมกบ Blend 424

การปรบแตงสภาพแวดลอมของ Blend 429

ทาความรจกกบ Artboard 430

การซม Artboard 434

โหมดการทางานใน Blend 434

วธการรนโปรเจกตใน Blend 436

การกาหนดคณสมบตตางๆ ของคอนโทรล 436

การปรบคาใหกบคณสมบตทเปนตวเลข 437

คณสมบตทเกยวของกบระบบส 437

วธการเลอกส 440

การใชงาน Style ใน Blend 443

การเรยกใช Style เดมทมอย 449

การเปลยนขอบเขตเรยกใชงานของ Style 451

สรปทายบท 454

บทท 14 กำรใชงำนแหลงขอมล XML ใน Windows 8 Apps 455

บทนา 455

โครงสรางของภาษา XML 456

ความหมายของคาวาแทก (Tag) กบอลเมนต (Element) 456

กฎ กตกาเบ องตนสาหรบการสรางแหลงขอมล XML 457

พ นฐานการใชงานแหลงขอมล XML ดวยคลาส XElement 460

ขอความทมรปแบบ XML 463

การแสดงขอมลจากไฟล XML ดวยคลาส XDocument 465

การสรางแหลงขอมล XML โดยอาศยคลาส XDocument 474

การทางานกบโครงสรางของแหลงขอมล XML 479

การจดการแหลงขอมล XML ทเกบอยในคลาส XElement 483

สรปทายบท 487

บทท 15 กำรใชประโยชนจำกแหลงขอมล XML ดวย LINQ to XML 488

บทนา 488

พ นฐานการใชงาน LINQ to XML 489

การควรขอมลจากไฟล XML ภายนอก (*.xml) 489

การควรขอมลทอยในรปแบบ XML 496

การแสดงขอมล XML รวมกน 498

คา Null ใน XML 503

การควรขอมลจากแหลงขอมล XML แบบระบลาดบอลเมนต 509

การควรขอมลจาก XMLแบบแอตทรบวต 519

การสรางแหลงขอมล XML จากอารเรย 525

การสรางแหลงขอมล XML จากคลาส 526

การแสดงแหลงขอมล XML ดวย HTML 534

สรปทายบท 540

บทท 16 กำรแสดงขอมลใน XML ดวย XSLT 541

บทนา 541

การแสดงผลแหลงขอมล XML ดวยภาษา XSLT แบบไมมเงอนไข 542

สรปทายบท 555

Workshop 1 : กำรสรำงหนำ Login 556

การสรางหนา Login 556

Workshop 2 : กำรสรำง Windows 8 Apps แบบเปลยนสพนหลงได 560

การสราง Windows 8 Apps แบบเปลยนสพ นหลงได 560

Workshop 3 : กำรสรำงสวนแสดงผลแบบ Windows Store 565

การสรางสวนแสดงผลแบบ Windows Store 565

Workshop 4 : กำรคนหำขอมลผำน Bing, Yahoo และ Google 574

การคนหาขอมลผาน Bing, Yahoo และ Google 574

Workshop 5 : กำรแสดงขอมลและรปภำพในคอนโทรล GridView 582

การแสดงขอมลและรปภาพในคอนโทรล GridView 582

บทท 17 กำรปรบแตงโปรเจกต Windows 8 Apps 600

บทนา 600

การปรบแตง Windows 8 Apps ในไฟล Package.appxmanifest 601

การกาหนดหนาจอ Splash screen 603

การกาหนดไฟลรปภาพโลโก 604

การกาหนดขอความกากบโลโก 609

การกาหนดรปแบบสวนแสดงผล 611

การสราง App Package 612

สรปทายเลม 618

บทท 1 กำวแรกเขำสโลกของ Windows 8 Apps

บทน ำ ในปจจบน ไมโครซอฟทเปดตวระบบปฎบตการตวใหม มชอเรยกวา “Windows 8” ความพเศษของระบบปฏบตการรนใหมน กคอ เปนระบบปฏบตการ Windows รนแรกทถกสรางข นมาใหทางานไดท งบนคอมพวเตอร (PC), Notebook และอปกรณแทบเลต (Tablet) โดยทไมโครซอฟทเรยกอปกรณแทบเลตของตวเองวา เซอรเฟส (Surface) หนงสอ “คมอเขยน Windows 8 Apps ดวย VB 2012 และ VC# 2012 สาหรบผเรมตน” เลมน เปนการนาเสนอพ นฐานการพฒนา Windows 8 Apps โดยการใชภาษา VB 2012 & VC# 2012 ซงเปนภาษาทไดรบนยมอยในปจจบน เน อหาทนาเสนอในหนงสอเลมน เรมตนต งแตระดบพ นฐาน ไลไปจนกระทงถงการกาหนดรายละเอยดตางๆ เพอให Windows 8 Apps ของคณ ตรงกบมาตรฐานทไมโครซอฟทกาหนดไว ซงถอเปนรากฐานทมความสาคญเปนอยางมาก กอนทจะพฒนาเขาสระดบการสราง Windows 8 Apps เพอขายจรงใน Windows Store ในลาดบตอไป

ท ำควำมรจกกบ Windows 8 ในขนตน เราสามารถแยก Windows 8 ออกเปน 2 แพลตฟอรม คอ

1.บนคอมพวเตอร เรยกวา Windows 8 Pro รนบนสถาปตยกรรมซพยแบบ x86 (32 บต) และ x64 (64 บต) ทคนเคยกนเปนอยางด คอ ซพยของอนเทล (Intel) และเอเอมด (AMD) โดยท Windows 8 Pro ทรนบนซพยตระกล x86/x64 น สามารถใชงาน Windoows 8 ไดทงแบบ Desktop Mode กบ Modern UI Style Mode

รปท 1-1 แสดง Windows 8 แบบ Modern UI Style Mode จากรปท 1-1 แอพพลเคชนทตดต งบน Windows 8 แบบน ผเขยนขอเรยกวา Windows 8 Apps

รปท 1-2 แสดง Windows 8 แบบ Desktop Mode จากรปท 1-2 เปนสภาพแวดลอมของ Windows ทเราคนเคยกนเปนอยางดมาต งแต Windows 7 และเวอรชนกอนหนาน 2.บนอปกรณแทบเลต สาหรบ Windows 8 ทรนอยบนแทบเลต ยงสามารถแยกออกเปน 2 แบบ คอ

รนบนสถำปตยกรรมซพยแบบ x86/x64 สงผลใหคณสามารถใช Windows 8 ไดท งแบบ Desktop Mode กบ Modern UI Style Mode ยงคงเรยกวา Windows 8 Pro เชนเดม

รนบนสถำปตยกรรมซพยแบบ ARM เรยกวา Windows RT สาหรบแทบเลตทใชซพยแบบ ARM สามารถรน Windows RT ไดเพยงอยางเดยวเทาน น โดยท Windows RT กคอ Windows 8 ทม Modern UI Style Mode เปนแกนหลก ถกสรางข นมาใหทางานกบอปกรณแทบเลตเทาน น สงผลใหโปรแกรมสาย .NET จงมพ นทใหมทไมเคยมมากอน นนคอ การเขยนโปรแกรมทเรยกวา

Windows 8 Apps ทสามารถรนไดท งบน PC, Notebook และอปกรณแทบเลตทตดต ง Windows 8 หรอ Windows RT นนเอง

รปแบบของ App ในยคปจจบน เพอใหคณมองเหนภาพในยคปจจบนชดเจนข นวา เรากาลงทาอะไรกนอย ผเขยนขอแยกรปแบบ App ออกเปน 5 แบบ ดงน 1.Command App หรอแอพพลเคชนทผใชตองมการปอนคาสงดวยการปอนคาสง command เราคนเคยกนดในชอ Console Application ในยคของ DOS รวมไปถงแอพพลเคชนบางประเภท ทรนอยบนระบบปฎบตการ Server ทยงคงอาศยการปอนคาสงแบบขอความโดยตรง 2.Click App เราคนเคยกบแอพพลเคชนประเภทน มากทสด ใชเมาสเคอรเซอรคลกไอคอนตางๆ สงงานใหแอพพลเคชนทางาน 3.Touch App เราเขามาสยคทโทรศพทมอถอ และแทบเลตกมแอพพลเคชนตางๆ อยดวยเชนกน เรยกส นๆ วา App คณสงการให App เหลาน ทางาน โดยการสมผสหนาจอ เพราะความทน วมอของคณ มขนาดใหญกวาเคอรเซอรของเมาส จงทาใหผทตองการเขามาพฒนา App ในสวนน ตองแกไขสวนแสดงผลใหม ใหรองรบกบการสมผสดวยน วมอของผใชแทนเคอรเซอรของระบบคลก 4.Motion App หรอ App ทจบการเคลอนไหวของผใช แลวแปลงการเคลอนไหวดงกลาว ไปเปนคาสงใน App เพอสงการตางๆ ตามทไดกาหนดไว สาหรบคณผอานทชอบเลนเกม Console ของ Xbox คนเคยกนเปนอยางด กบ App กลมน 5.Voice App หรอ App ทสงการดวยคาพดของมนษย เรากาลงเรมตนเขาสยคของการสง App ใหทางานดวยคาพดของเรา โดยทเราไมจาเปนตองเขาไปแตะตอง หรอสมผสใดๆ เลยกบอปกรณ Hardware ทเราลงสนใจอย คนเคยกนเปนอยางดกบคณผอานทชอบดหนงประเภทไซไฟตางๆ ทตวละครมกจะพดสงใหซอฟทแวรตางๆ ทางาน

แนวทำงของโปรแกรมเมอรในยค .NET Framework 4.5 การอพเดตของไมโครซอฟทในยคของ .NET 4.5 และการมาของ Windows 8 ถอเปนการปรบปรงคร งใหญอกคร งหนง ใหคณดรปท 1-3 ประกอบคาอธบาย

รปท 1-3 แสดงประเภทแอพพลเคชนของ .NET 4.5 ในขนตน การพฒนาแอพพลเคชนกอนหนาน (เวอรชน 4.0 และเวอรชนเกากวา) โปรแกรมเมอรสาย .NET มพ นทใหคณทางาน 2 สวนใหญๆ คอ 1. Desktop Application

2. Web Application การพฒนาแอพพลเคชนท ง 2 สาย เปนพ นทเดมทเราคนเคยกนเปนอยางด ข นอยกบความสนใจ

ของคณวา จะเลอกเดนไปในเสนทางใด กแลวแตความชอบ ความถนดของแตละบคคล แตในยคปจจบน .NET Framework ถกพฒนามาถงเวอรชน 4.5 และเขาสยคของ Windows 8

โปรแกรมเมอรสาย .NET มพ นใหมข นมาอก 1 แหง ทางานบนอปกรณ Tablet เปนททราบกนดวา ในยคปจจบน ผคนโดยทวไปตางคนเคยกบการใชแทบเลต (Tablet) และสมารทโฟน (Smart Phone) หลายคนเปลยนพฤตกรรมจากทเคยทาบนเครองคอมพวเตอร มาทาบนอปกรณเหลาน แทน เชน การเลนอนเตอรเนต, การเลนเกมส, การใชแอพพลชนตางๆ ฯลฯ เปนตน

ในโลกของ .NET เราเรยกแอพพลเคชนตางๆ ทรนบนอปกรณเหลาน วา Windows 8 Apps และเรยกอปกรณเหลาน โดยรวมวา Smart Devices

กลาวไดอกนยหนงวา ถาคณตองการพฒนาแอพพลเคชนบน Smart Devices เหลาน ดวย .NET คณตองพฒนาแอพพลเคชนแบบ Windows 8 Apps นนเอง

รปท 1-4 แสดงโปรเจกตแบบ Windows 8 Apps ใน Visual Studio 2012 บน Windows 8 ไมโครซอฟทออกแบบให Windows 8 ทางานไดท ง PC (คอมพวเตอร) และ Tablet ซงเปนพ นทแหงใหมของโปรแกรมเมอรสาย .NET ทางานรวมกบ .NET Framework 4.5 ความสาคญอกประการหนง กคอ คณตองทราบใหไดกอนวา คณกาลงอยสวนไหนในโลกของ .NET 4.5 บน Windows 8 กลาวคอ

1.Desktop Application คณมทางเลอก 3 ทาง คอ Windows Forms Application พ นทเดมทหลายคนคนเคยกนเปนอยางดกบการพฒนาแอพ

พลเคชนทมสวนแสดงผลแบบมาตรฐาน สามารถพฒนาดวยภาษา Visual Basic หรอ Visual C#

รปท 1-5 แสดงโปรเจกตแบบ Windows Forms Application ใน Visual Studio 2012 บน Windows 8

WPF Application ในกรณทคณตองการพฒนาแอพพลเคชนทสามารถแกไขสวนแสดงผลใหตรงตามความตองการของคณ โปรเจกตประเภทน คอ คาตอบของคณ โดยการแบงสวนแสดงผล (อยในความรบผดชอบของสครปต XAML) กบสวนการทางาน (โคดภาษา Visual Basic หรอ Visual C#) ออกจากกนอยางชดเจน

รปท 1-6 แสดงโปรเจกตแบบ WPF Application ใน Visual Studio 2012 บน Windows 8

LightSwitch พฒนาแอพพลเคชนบนแนวความคดทวา เขยนโคดใหนอยทสด หรอไมตองเขยนโคดเลย โดยใชระยะเวลาพฒนาไมนาน เรยกแนวความคดน วา Rapid Application Development (RAD) ผลงานทไดออกมา เพยงพอตอการใชงานจรงอกดวย

รปท 1-7 แสดงโปรเจกตแบบ LightSwitch ใน Visual Studio 2012 บน Windows 8 จากรปท 1-7 โปรเจกตแบบ LightSwitch ของ VS 2012 ครอบคลมท ง Desktop Application (VB 2012 กบ VC# 2012) และ Web Application (ตามมาตรฐาน HTML5) ดงน น จงเปนอก 1 ทางเลอกทสาคญมาก สาหรบโปรแกรมเมอรสาย .NET ทตองเรยนร

2.Web Application คณมทางเลอก 3 ทาง คอ ASP.NET เปนการพฒนาเวบแอพพลเคชนโดยการแยกสวนแสดงผล (*.aspx) กบโคดการ

ทางาน (ภาษา Visual Basic (*.vb) หรอภาษา Visual C# (*.cs)) ออกจากกน

รปท 1-8 แสดงโปรเจกตของ ASP.NET ใน Visual Studio 2012 บน Windows 8

ASP.NET Web Matrix ไมโครซอฟทสรางโครงการทเรยกวา Web Matrix ข นมา เพอเปนอก 1 ทางเลอกสาหรบนกพฒนาเวบแอพพลชนดวย ASP.NET ขอแตกตางทสาคญ กคอ ไมโครซอฟทรวมสวนแสดงผลเขากบโคดการทางาน แยกออกเปน 2 กรณ คอ ภาษา Visual Basic (*.vbhtml) และภาษา Visual C# (*.cshtml)

รปท 1-9 แสดงโครงการ Web Matrix ของไมโครซอฟท เครองมอทใชพฒนา ASP.NET Web Matrix ไมโครซอฟทปลอยใหนกพฒนาสามารถ download ฟรไดท http://www.microsoft.com/web/webmatrix/ เราเรยก ASP.NET Web Matrix อกชอหนงวา ASP.NET ทรนดวย Razor

รปท 1-10 แสดงสภาพแวดลอมของ ASP.NET Web Matrix ความสาคญของโครงการ ASP.NET Web Matrix กคอ เปนพ นฐานของการพฒนาเวบแอพพลเคชนดวย ASP.NET MVC 4.0 โดยมโครงสรางการทางานแบงออกเปน 3 สวน คอ Model – View – Controller

Silverlight เรยกอกอยางหนงวา WPF Application ทรนบนเวบ ในอนาคตไมโครซอฟทจะสนบสนน HTML5 มากกวา Silverlight

รปท 1-11 แสดงโปรเจกตแบบ Silverlight ใน Visual Studio 2012 บน Windows 8

3.Windows 8 Apps คณมทางเลอก 2 ทาง คอ พฒนำดวยสครปต XAML รวมกบภาษา Visual Basic 2012 หรอภาษา Visual C# 2012

รปท 1-12 แสดงโปรเจกตแบบ Windows 8 Apps แบบ XAML ใน Visual Studio 2012 บน Windows 8

พฒนำดวยภำษำ HTML5 รวมกบภาษา JavaScript และ CSS3

รปท 1-13 แสดงโปรเจกตแบบ Windows 8 Apps แบบ HTML 5 ใน Visual Studio 2012 บน Windows 8

ในสวนของ Smart Phone ทรนดวยระบบปฏบตการ Windows Phone 8 ผเขยนไมไดจดเขามาในกลม เพราะวา มแนวโนมไมนอยเชนกนวา มโอกาสรวมเขากบ Windows 8 Apps

รปท 1-14 แสดงโปรเจกตแบบ Windows Phone ใน Visual Studio 2012 บน Windows 8

การแขงขนในตลาด Smart Devices (Tablet และ Smart Phone) ในยคปจจบน มการเปลยนแปลงอยตลอดเวลา ผเขยนไมสามารถคาดเดาไดวา สถานะของโปรเจกตแบบ Windows Phone จะเปนอยางไรในอนาคต ขอใหคณผอานตดตามขาวสาร ความคบหนาอยางใกลชด โดยทผเขยนจะมการอพเดตขาวสารอยตลอดเวลาทแฟนเพจของผเขยนท https://www.facebook.com/thaivb.net

รปท 1-15 แสดงแฟนเพจของผเขยน จากโครงสรางขางตน พบวา สครปต XAML มบทบาททงใน WPF Application,

Silverlight, Windows Phone 8 และ Windows 8 Apps ดงนน ในปจจบน สงทโปรแกรมเมอรสาย .NET ควรจะศกษามากทสด นนคอ สครปตภาษา XAML นนเอง ผเขยนคดวาคาถามแรกทคณอยากรคาตอบมากทสด กคอ โปรแกรมเมอรสาย .NET จะเดนไปในทศทางใดตอไป ในอดตทผานมา สภาพแวดลอมของเรามแตเพยงบน PC กบ Notebook เทาน น แตในปจจบน คณไมจาเปนตองเลนอนเตอรเนต เลนแอพพลเคชนบน PC หรอ Notebook อกตอไป คณสามารถใชงานอปกรณจาพวก Tablet และ Smart Phone เขามาทาหนาทบางอยางแทน PC หรอ Notebook ไดอกดวย แอพพลเคชนทคณเลนบนอปกรณ Smart Devices เหลาน กมาจากโปรแกรมเมอรในสายตางๆ นนเอง คาตอบทผเขยนมใหกบคณผอาน กคอ การเพมทกษะใหกบตวเอง เปนผลดกบคณผอานอยางแนนอน การพฒนาตวเองในยคปจจบน ตองเกดท งทางกวาง (เรยนรหลายเรอง) และท งทางลก (ศกษารายละเอยดใหมากทสด) ในเวลาเดยวกน

ในวนทคณตองลงสนามจรง คณไมมทางลวงรไดเลยวา ในระหวางการทางานของคณ คณจะตองประสบปญหาอะไรบาง ตองใชเทคโนโลยอะไรบาง สงเดยวทคณรตอนน กคอ คณตองเตรยมตวเองใหพรอมกบสภาพแวดลอมในปจจบนทกทางเทาทจะทาได กำรพฒนำ Windows 8 Apps ดวย Visual Studio 2012 Express for Windows 8 คณยงมอก 1 ทางเลอกในการพฒนา Windows 8 Apps นนคอ อาศย Visual Studio 2012 Express for Windows 8 ซงเปนเครองมอทไมโครซอฟทเปดใหนกพฒนาทวไป สามารถดาวนโหลดมาใชงานไดฟรแบบมเงอนไขท http://www.microsoft.com/visualstudio/11/en-us/downloads มขนาด 403 MB ดงรปท 1-16

รปท 1-16 แสดงเวบไซดทใหดาวนโหลด Visual Studio 2012 Express for Windows 8 หลงจากทคณดาวนโหลด Visual Studio 2012 Express for Windows 8 (ไฟล vs2012_winexp_enu.iso) มาแลว ขอใหคณตดต งบน Windows 8 ตามข นตอนทปรากฎข นมา มข นตอนดงน 1.เรมตน ใหคณดบเบ ลคลกไฟล win8express_full.exe เพอเรมตนตดต ง Visual Studio 2012 Express for Windows 8

รปท 1-17 แสดงหนาจอเรมตนตดตง Visual Studio 2012 Express for Windows 8

รปท 1-18 หลงจากตดตงเสรจแลว 2.ในข นตอนสดทายของการตดต ง จะมการแสดงไดอะลอกซใหคณปอน Product key ดงรปท 1-19

รปท 1-19 แสดงขนตอนสดทายของการตดตง

3.คณสามารถขอ Product key ไดฟร โดยการคลกท Register online กจะเขาสข นตอนการ sign in เขาสระบบของไมโครซอฟทโดยใช e-mail ของคณ แยกออกเปน 2 กรณ

กรณใช e-mail อนๆ ทไมอยในเครอของไมโครซอฟท คณตองลงทะเบยน e-mail ของคณ กบ Microsoft account กอน ไดท https://login.live.com

รปท 1-20 แสดงการลงทะเบยน e-mail อนกบ Microsoft account กรณใช e-mail ในเครอของไมโครซอฟท (www.live.com/ , www.hotmail.com/ ,

www.outlook.com/ ) คณสามารถใช e-mail ของคณ sign in เขาสระบบ Microsoft account ดงรปท 1-21

รปท 1-21 แสดงการ sign in เพอขอ Product key 4.ตอมา จะเขาสข นตอนการแกไขขอมลสวนตวของคณใน Microsoft account จากน นคลกทปม

ดานลางสด เพอเขาสข นตอนตอไป ดงรปท 1-22

รปท 1-22 แสดงขนตอนการปอนขอมลสวนตวใน Microsoft account

5.ทายทสด คณกจะได Product key ตามทคณตองการ ดงรปท 1-23

รปท 1-23 แสดง Product Key ทได 6.ทายทสด ใหคณนา Product key ทได มาใชใน Visual Studio 2012 Express for Windows 8 กจะทาใหคณสามารถใชงานโปรแกรมไดตามทคณตองการแลว ดงรปท 1 -24

รปท 1-24 แสดงการน า Product key ทได มาใชใน Visual Studio 2012 Express for Windows 8

กำรขอสทธชวครำวในกำรพฒนำ Windows 8 Apps การพฒนา Windows 8 Apps ดวยโปรเจกตแบบ Windows Store ในคร งแรก ตองมการขอสทธทเรยกวา Developer license โดยทผเขยนขอเรยกวา เปนการขอสทธชวคราว (เพราะวามวนหมดอาย) เพอใหคณสามารถสราง Windows 8 Apps ดวย VS 2012 ไดนนเอง

รปท 1-25 แสดงไดอะลอกยนยนสทธ ทปรากฎขนมาในครงแรก จากรปท 1-25 VS 2012 (ทก Edition) จะแสดงไดอะลอกน ข นมาในคร งแรก เพอใหคณยนยนสทธในการพฒนา Windows 8 Apps ดวยโปรเจกตแบบ Windows Store

คณตองขอสทธชวคราวกอน แยกออกเปน 2 กรณ คอ 1.ใหคณ Sign in ดวย e-mail ทคณลงทะเบยนกบ Microsoft account ดงรปท 1-26

รปท 1-26 แสดงการ Sign in เขาสระบบ Microsoft account ตอมา จะมไดอะลอก Developer License แจงใหคณทราบวา สทธชวคราวแบบ Developer license ทคณไดรบ จะหมดอายเมอใด ดงรปท 1-27

รปท 1-27 แสดงสทธชวคราวแบบ Developer license ทผเขยนไดรบ จากรปท 1-27 สทธทคณไดรบ สงผลใหคณสามารถพฒนา Windows 8 Apps ไดแลว

รปท 1-28 แสดงสภาพแวดลอมของ Visual Studio 2012 Express for Windows 8 ในครงแรก

รปท 1-29 แสดงการสรางโปรเจกตแบบ Windows Store ใน Visual Studio 2012 Express for Windows 8

รปท 1-30 แสดงโปรเจกตแบบ Windows Store ของ VS 2012 ตงแตเวอรชน Professional ขนไป

กำรขอหรอตออำย Developer license แยกออกเปน 2 กรณ คอ 1.กรณ Visual Studio 2012 ตงแตเวอรชน Professional ขนไป คณสามารถเลอกเมน PROJECT > Store > Acquire Developer License… เพอขอหรอตออายสทธชวคราว

รปท 1-31 กรณ Visual Studio 2012 ตงแตเวอรชน Professional ขนไป 2.กรณ Visual Studio 2012 Express for Windows 8 ใหคณเลอกเมน STORE > Acquire Developer License…

รปท 1-32 กรณ Visual Studio 2012 Express for Windows 8

โครงสรำงของ Windows 8 Apps คณสามารถพฒนา Windows 8 Apps ได 2 แบบ คอ 1. อาศยสครปต XAML รวมกบภาษา VB 2012, VC# 2012 และ C++ 2012 2. อาศยสครปต HTML5 รวมกบ CSS3 & JavaScript

1.อำศยสครปต XAML รวมกบภำษำ VB 2012, VC# 2012 และ C++ แตเน อหาทผเขยนนาเสนอ ครอบคลม 2 ภาษาเทาน น คอ VB 2012 & VC# 2012

สาหรบโคด VB 2012 & VC# 2012 ทนามาใชในการพฒนา Windows 8 Apps เกดจาก 2 สวนดวยกน คอ

ควำมรเดมจำก .NET เวอรชนเกำ โดยสวนใหญ ยงคงใชใน Windows 8 Apps ไดเชนเดม อยในฐานะเปนกลมคลาสทอยภายใตเนมสเปซ System.* อาจจะมขอแตกตาง หรอขอจากดไปจากเดมบาง ข นอยกบรายละเอยด ซงจะเปนเน อหาในลาดบถดไป

สงทตองศกษำเพมเตม อยภายใตเนมสเปซทข นตนดวย Windows.* รนภายใต WinRT นคอ สงทเราตองเรยนรวา ในการพฒนา Windows 8 Apps ข นมา ประกอบดวยอะไรบาง

รปท 1-33 แสดงเนมสเปซในโปรเจกต Windows 8 Apps ดวย VC# 2012

จากรปท 1-33 มาจากโปรเจกต Windows 8 Apps ดวย VC# 2012 แสดงใหคณเหนชดเจนทสด กลาวคอ เมอคณสรางโปรเจกต Windows 8 Apps วางๆ ข นมา มการอางองเนมสเปซพ นฐานเทาทจาเปนในการพฒนา Windows 8 Apps ข นตนใหคณโดยอตโนมต ประกอบดวยเนมสเปซ 2 กลม คอ

กลม .NET เดม (System.*) กลม WinRT (Windows.*)

สวนคณผอานทเคยพฒนา WPF Application มากอน การยายมาพฒนา Windows 8 Apps ถอวา คณอยในฐานะครอบครวเดยวกน คดแบบงายๆ วา บานของคณใหญข น ถาคณผอานเลอกสายน สงทคณได คอ คณสามารถพฒนาไดท ง WPF Application และ Windows 8 Apps

สวนแสดงผลของ Windows 8 Apps ในข นตน เกบอยในไฟลทชอวา MainPage.xaml ดงสครปต XAML ตอไปน XAML

<Page x:Class="App1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> </Grid> </Page>

ทกๆ คร งทคณสราง Windows 8 Apps ดวยโปรเจกตชนด Blank Application สงผลให VS 2012 จะสรางสครปต XAML ขางตนใหคณโดยอตโนมต เปนสวนแสดงผลแบบวางๆ มสงทนาสนใจ ในข นตน คอ 1.เราถอวา อลเมนต <Page>…</Page> ทาหนาทเปนตวบรรจ (Container Control) คอนโทรลอนๆ ในระดบบนสด และยงทาหนาทเปนสภาพแวดลอมใน Windows 8 Apps อกดวย 2.VS 2012 กาหนดใหอลเมนต <Grid>…</Grid> ทาหนาทเปนตวบรรจคอนโทรลอนๆ ในสวนแสดงผล อยในระดบรองลงมาจากอลเมนต <Page>…</Page> มสวนแสดงผลเปนแบบเปนตาราง คณสามารถเปลยนเปนคอนโทรลบรรจตวอนไดเชนกน ผเขยนจะกลาวถงในเน อหาลาดบตอๆ ไป

2.อำศยสครปต HTML5 รวมกบ CSS3 & JavaScript สงทสาคญทสด กคอ HTML5 ทนามาใชในการพฒนา Windows 8 Apps มท งสวนทเปนมาตรฐานเดมของ HTML5 และสวนทเพมเตมข นมาโดยไมโครซอฟท เพอเพมประสทธภาพในการทางานและสรางสวนแสดงผลใน Windows 8 Apps นนเอง เชน กลมแอตทรบวตทข นตนดวยคาวา data- ฯลฯ เปนตน ถาคณผอานเลอกสายน สงทคณได คอ การสรางเวบไซดดวยมาตรฐาน HTML5, การจดสวนแสดงผลดวย CSS3 และ Windows 8 Apps อยในไฟลทชอวา default.html

HTML5

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>App1</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> <!-- App1 references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> </head> <body> <p>Content goes here</p> </body> </html>

สาหรบคณผอานทเปนมอใหมจรงๆ การเรมตนศกษา เขามาสโลกของ Windows 8 Apps ไมใชเรองยากเยนอกตอไป เพราะวา ไมโครซอฟทเตรยมเครองมอ และจดโครงสรางของ Windows 8 Apps ใหงายและสะดวกตอการเรยนรเปนอยางมาก นคอ โจทยของผเขยนในการนาเสนอหนงสอในซรยของ Windows 8 Apps

รปแบบกำรน ำเสนอตวอยำงในหนงสอเลมน รปแบบการนาเสนอสครปต XAML และโคดการทางาน (VB 2012 และ VC# 2012) ผเขยนแยก

ออกเปน 2 กรณ 1.กรณสครปต XAML ผเขยนลงเฉพาะสครปตทเปนเน อหาเทาน น เพอใหสะดวกตอการนาเสนอ สวนสครปต XAML ทเกดจาก VS 2012 สรางใหคณอตโนมต ผเขยนขอละไวในฐานทเขาใจวา เปนสครปต XAML ทไมมความเกยวของใดๆ ตอเน อหาในหวขอน นๆ เพอใหคณผอานทราบวา นคอ สครปต XAML ทคณตองเขยนเอง หรอเปนเน อหาทกาลงนาเสนออย

แตถาเน อหามความเกยวของ หรอเชอมโยงกน ผเขยนจะลงสครปต XAML ดงกลาวท งหมด เพอใหคณผอานเหนความสมพนธระหวางสครปตท VS 2012 สรางใหคณโดยอตโนมต กบสครปตทคณตองเขาไปแกไข หรอเขยนเอง 2.กรณโคดท ำงำน (VB 2012 และ VC# 2012) สาหรบโคดการทางานทกตวอยาง ทกหวขอทนาเสนอในหนงสอเลมน ผเขยนลงโคดครบถวนท งหมด

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

VB 2012

VC# 2012

Error

XML

XSLT

รปแบบกำรลงโคด (VB 2012 & VC# 2012) และสครปต XAML ในหนงสอเลมน เพอใหคณผอานและผเขยนเขาใจตรงกน รปแบบการลงโคด (VB 2012 & VC# 2012) และสครปต XAML ของหนงสอเลมน มรายละเอยดดงน 1.สครปต XAML สาหรบสครปต XAML ทเกดจาก VS 2012 สรางใหคณโดยอตโนมต ผเขยนไมลงในหนงสอเลมน ดงสครปต XAML ตอไปน XAML

<Page x:Class="App1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> </Grid> </Page>

สครปต XAML ขางตน เปนโครงสรางของสวนแสดงผลท VS 2012 สรางใหคณโดยอตโนมต เปนสวนทผเขยนไมลงในหนงสอเลมน ผเขยนลงเฉพาะสครปต XAML ทคณตองเขยนเอง ซงเปนเน อหาของหวขอน นๆ แตถาเน อหาดงกลาว เกยวของกบสครปต XAML ท VS 2012 สรางใหคณโดยอตโนมต ผเขยนจะลงสครปต XAML เตมรปแบบ เพอใหคณเหนรายละเอยดอยางชดเจน โดยทจะระบชอไฟล *.xaml กากบสครปตไวดวย เพอใหคณทราบวา เปนสครปต XAML ของไฟลใด โดยทผเขยนจะแยกสครปตออกเปน 2 สวน คอ

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

2.โคด VB 2012 & VC# 2012 ผเขยนถอวา เปนโคดการทางานทคณตองเขยนเองท งหมด ดงน น โคดสวนน ผเขยนลงครบทง 2 ภาษา ทกตวอยาง มชอไฟล *.vb หรอ *.cs กากบไวชดเจนวา โคดดงกลาว อยในไฟลใดเชนกน

3.กรณเขยนสครปตหรอโคดใหมเพมเขำไปในสครปตหรอโคดทถกสรำงขนมำโดย VS 2012 สาหรบกรณน เกดจากการทางานรวมกนระหวางสครปตหรอโคด ทเราตองเขยนข นมาเอง กบสครปตหรอโคดทมาจาก VS 2012 โดยอตโนมต ผเขยนแยกแยะโดยการกาหนดใหสครปตหรอโคดทคณตองเขยนข นมาเองเปนส สวนสครปตหรอโคดทมาจาก VS 2012 โดยอตโนมต ผเขยนเลอกใชสเทา เพอใหเกดความแตกตาง กำรจดระเบยบโคดหรอสครปตใน VS 2012 มคาสงใน VS 2012 ทนาสนใจ ทาหนาทจดระเบยบโคดหรอสครปตใหดงายยงข น โดยการเลอกเมน EDIT > Advanced > Format Document

รปท 1-34 แสดงการเลอกค าสง Format Document

รปท 1-35 ผลการจดระเบยบโคดหรอสครปตดวย VS 2012 สรปทำยบท เน อหาในบทน เปนการกลาวถงในภาพรวมของความสมพนธระหวาง Windows 8 กบ Visual Studio 2012 รวมไปถงทศทางในอนาคตของโปรแกรมสาย .NET