จากที่ผมเขียนไว้ครั้งก่อนเรื่องของ Application bar จะเห็นได้ว่าโปรแกรมของเรา มีการเรียก page ต่างๆ ขึ้นมาหลายหน้า เช่น about, contact, photo, help ดังที่มีในตัวอย่าง เมื่อเรากด menu About โปรแกรมก็จะทำการเปลี่ยน page ให้กับเราแต่ก็เป็นการเปลี่ยน page ที่ไม่มี animation ใดๆ เลย ดูแข็งทื่อไม่เหมาะกับการเป็น WP7 ในอุดมคติของเราจริงไหมครับ ดังนั้นวันนี้จะมาแนะนำวิธีทำ Page Transition แบบง่ายๆ ให้ดูกัน

อุปกรณ์ที่ใช้ในวันนี้

• Visual Studio 2010 Express for Windows Phone Beta
• Windows Phone Emulator Beta
• Silverlight for Windows Phone Beta
• Microsoft Expression Blend for Windows Phone Beta
• XNA Game Studio 4.0 Beta

Download ได้ที่นี่

การสร้าง Page Transition ในครั้งนี้ ผมจะสร้าง Animation ที่จะใช้ในการเปลี่ยน page ด้วย Explession Blend 4 for Windows Phone แล้วเราจะไปเรียกใช้งาน Animation นั้นในช่วงที่เรากดปุ่มเปลี่ยน page นั่นเอง

โครงสร้างของโปรแกรม

ผมสร้าง Page ไว้ 2 หน้าชื่อ MainPage.xaml และ NewPage1.xaml

ในหน้า MainPage ผมจะสร้าง Menu ไว้ 1 ตัว และสร้าง Event Click ไว้ เพื่อให้เปิดหน้า NewPage1 ขึ้นมา

เมื่อเตรียมโครงสร้างแล้ว เรามาเริ่มต้นกันที่ Blend4

ก่อนอื่นเรามาเริ่มต้นสร้าง animation กันที่ blend 4 ครับ โดยเราจะสร้าง animation ต่างๆ ดังนี้

1. StoryboardMainPageOut สำหรับ MainPage หมุน และค่อยๆ เลือนหายไป

2. StoryboardNewPageIn สำหรับ NewPage1 ค่อยๆ แสดงขึ้นมา

ไปที่หน้า MainPage สร้าง Storyboard ขึ้นมา

จากนั้น เราจะทำการสร้าง Animation ลงไปที่ LayoutRoot ของเรา เพื่อให้มันทำการหมุน โดยผมจะปรับค่า Projection ของแกน Y เป็น 180

(ภาพซ้ายมือคือ Projection Y = 0 ขวามือคือ Y = 180)

                    ------>  

และเพื่อให้ LayoutRoot ของหน้า MainPage หายไปโดยสิ้นเชิง ผมจึงใช้วิธีปรับ opacity ให้เหลือ 0 ที่ Timeline ที่ 1 sec

เท่านี้ เราจะได้ MainPage ที่หมุนแล้วหายไปมาแล้ว ต่อไปเราก็สร้าง Storyboard ของหน้า NewPage1 ขึ้นมาครับ

ในหน้านี้ เราก็ Create Storyboard ขึ้นมาเช่นเดียวกัน โดยผมตั้งชื่อว่า StoryboardNewPageIn จากนั้น ผมใส่ animation ให้ดังนี้

timeline ที่ 0 sec ให้ LayoutRoot มี Opacity = 0

timeline ที่ 1 sec ให้ LayoutRoot มี Opacity = 100

จบขึ้นตอนนี้ เราจะมี Storyboard 2 ตัว ชื่อว่า StoryboardMainPageOut และ StoryboardNewPageIn

เริ่มใช้งาน

ที่ MainPage สร้าง Event Handler จาก menuitem ใน application bar ขึ้นมา

เมื่อกด menu เพื่อไปยังหน้า NewPage เราจะสั่งให้ Storyboard เริ่มทำงานด้วย .Begin() และจากนั้น เมื่อ Storyboard เล่นจนจบ Completed event  ก็จะทำการเรียกหน้า NewPage ขึ้นมาแสดง ด้วย NavigateService

ต่อไป ไปที่ NewPage1 และทำการ override เมธอด OnNavigatedTo ขึ้นมาครับ เราจะใช้เจ้านี่ในการรับ event ว่ามีการ navigate มายังหน้านี้

จากนั้นก็ให้เมธอดนี้เรียก Storyboard ให้เริ่มทำงาน

เมื่อทำทุกขึ้นตอนเรียบร้อย ก็รันดูผลกัน

และแล้วก็ได้ Page Transition ออกมา จะเห็นว่าวิธีนี้ simple และไม่ยากเลยครับ ซึ่งเราก็สามารถนำไปใช้กับ Application ของเราได้ แต่การใช้วิธีนี้ในการสร้าง Page Transition ถ้าหากโปรแกรม WP7 ของเรามีขนาดใหญ่ จำนวน page เยอะมาก เราก็จะเสียเวลาในการไปแก้ไปโค้ด ในแต่ละ page ดังนั้น การสร้าง Page Transition ด้วยวิธีนี้ จึงขอแนะนำให้ใช้กับโปรแกรมที่มีขนาดเล็ก จึงจะเหมาะครับ :)