สวัสดีครับ หลายๆท่านคงได้เห็น Windows Phone 7 Series หรือลองจับใน Emulator มากันบ้างแล้ว คาดว่าท่านจะคุ้นเคยกับโรแกรมที่หน้าตาแบบนี้…

ใช่ครับ โปรแกรมขนาดใหญ่ล้นจอ แล้วมันสร้างยังไงล่ะโปรแกรมแบบนี้ วันนี้ผมมีคำตอบมาให้ทุกท่านครับ

โดยผู้ที่ไขข้อข้องใจนี้คือ Jocelyn Villaraza ครับ ผมขออณุญาตแปลเป็นภาษาไทยนะครับ เนื่องจากบทความที่เขียนไว้ในhttp://aimeegurl.com/2010/03/18/panoramic-navigation-on-windows-phone-7-with-no-code/ค่อนข้างอ่านยากสำหรับมือใหม่อย่างผม

ในบทความได้บอกไว้ว่า "ฉันได้อ่าน UI Design and Interaction Guide for Windows Phone 7 Series แล้วพบว่า panoramic application template ยังไม่มีให้ใช้ใน standard platform" Jocelynได้ทำการเขียน Behaviorสำหรับทุกคนที่ต้องการใช้ โดยได้ใส่ “GoToNextState” behavior ไว้ในนั้น ฉันพัฒนา behavior นี้มาจากhttp://gallery.expression.microsoft.com/en-us/MIXBehaviorPack คุณสามารถดาวน์โหลดได้จาก behavior library.

ผมได้ทำการรวม library ที่จำเป็นไว้แล้วโดยดาวน์โหลดได้จาก ที่นี่ (รวม behavior library ไว้แล้ว)

เรามาเริ่มเขียน Panoramic application กันดีกว่า

1. อันดับแรกให้เปิด  Expression Blend 4 Beta for WindowsPhone(ต้องติดตั้ง Add-in Preview for Windows Phoneด้วย )

2. สร้าง Project ใหม่ เป็น Windows Phone Application

3. ลบ component ทั้งหมดออกให้เหลือแค่  LayoutRoot

4. ทำการ add reference ที่ดาวน์โหลดไป โดยคลิกขวาที่ References แล้วเลือก Add Reference เลือก dll ที่ดาวน์โหลดไปทั้งหมด

5. สร้าง grid ขึ้นมา วางมุมขวาบนของ grid ให้พอดีขอบจอขวาบนของภาพเครื่อง ความสูง 800 ความกว้างขึ้นอยู่กับจำนวน page ที่ต้องการ เช่น 3 page ก็ให้กว้าง 480*3=1440 (ไม่จำเป็นต้องทำตามนี้ ให้กำหนดตามความต้องการ)

6. สร้าง Image ขึ้นมาวางไว้ใต้ Grid ให้มีขนาดเท่ากับหรือใหญ่กว่า Grid เพื่อจะใส่รูป Background

7. copy ภาพที่ต้องการทำเป็น background มาวางไว้ใน project

8. เลือกที่ Image ที่สร้างขึ้นใน ข้อ 6. แล้วไปที่ properties เลือก source เป็นภาพที่ต้องการ

9. ใส่ textblock ของชื่อ application

10. สร้าง canvas หรือ component อื่น สำหรับใส่ content โดยใส่ขนาให้น้อยกว่า 480*800 วางในจุดที่เหมาะสม (จะต้องสร้าง canvas ตามจำนวนpage ที่ต้องการ)

11. ใส่ content ที่ต้องการในแต่ละ canvas

12. ไปที่ tab States แล้วสร้าง state group ขึ้นมาใหม่ ตั้งชื่อเป็น screen กำหนดเวลาแสดง transition เป็น 0.6 เลือก EasingFunction ตามต้องการ

13.สร้างstate ขึ้นมาภาพใต้ screen state group ตามจำนวน pageตั้งชื่อให่สื่อถึงการระบุหน้า เช่น section 1, section2, section3, ...

14. ไปที่ state ที่ 2 แล้วเลือก component ทั้งหมดโดย CTRL+A แล้วกดเลื่นตำแหน่งไปโดยให้หน้า2 อยู่ในจอภาพของมือถือ

15. ทำเช่นเดียวกันกับ 14. แต่เลื่อนไปยังหน้า 3 แทน ถ้ามีหน้ามากกว่านี้ก็ให้ทำเช่นเดียวกันโดยปลี่ยนตำแหน่งไปเรื่อยๆ

16.ไปที่ Tab Assets แล้วเลือก behaviors แล้วลาก GoToNextState กับ GoToPreviosState ไปไว้ใต้ LayoutRoot

17. เลือกที่ GoToNextState ใต้ LayoutRoot แล้วเลือก Properties ไปที่ Trigger แล้วกด new เพื่อกำหนดว่าจะให้ behavior นี้ทำงานเมื่อใด โดยให้เลือกเป็น  FlickGestureTrigger กด okขั้นตอนนี้ทำให้เมื่อมีการลากนิ้งบนจอ (Gesture) จะทำการเปลี่ยน state

18. ทำการกำหนดว่าลากนิ้วไปทางไหนถึงจะไป state ต่อไป ถ้าเราต้องการให้เลื่อนไป page ทางขวา ก็ต้องเลื่อนนิ้วไปทางซ้ายดังนั้นให้กำหนดDirection เป็น Left

19. ทำเช่นเดียวกับ 17. แต่เลือกที่  GoToPreviosStateแทน

20. กำหนดให้เมื่อลากไปขวาแล้วย้อนกลับไป state ก่อนหน้า โดยเลือก Direction เป็น Right

21. ที่ menu bar เลือก Project > Run Project เพื่อทดสอบการทำงาน

----จบแล้วครับ----

credit:  Jocelyn Villaraza

หากมีความผิดพลาดประการใดผมต้องขออภัยมา ณ ที่นี้ด้วยครับ