Windows Phone 7 - 创建页面切换效果

addison_lin

其实创建页面切换效果一点都不难，假如你有Sliverlight工具的话。

第一步：使用Sliverlight工具
首先下载 Sliverlight Toolkit 然后根据下面的步骤操作。在你的应用中添加"Microsoft.Phone.Controls.Toolkit"引用。

第二步：修改 App.xaml.cs
修改 App.xaml.cs 来启用页面切换效果
将
view source
print?

1	RootFrame = new PhoneApplicationFrame();

替换为
view source
print?

1	RootFrame = new Microsoft.Phone.Controls.TransitionFrame();

第三步：为页面添加切换
首先添加XML name space：
view source
print?

1	xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

然后就可以添加切换效果了：
示例 1：装载和退出的时候旋转页面
view source
print?

01	<toolkit:TransitionService.NavigationInTransition>

02	<toolkit:NavigationInTransition>

03	<toolkit:NavigationInTransition.Backward>

04	<toolkit:RotateTransition />

05	</toolkit:NavigationInTransition.Backward>

06	<toolkit:NavigationInTransition.Forward>

07	<toolkit:RotateTransition />

08	</toolkit:NavigationInTransition.Forward>

09	</toolkit:NavigationInTransition>

10	</toolkit:TransitionService.NavigationInTransition>

11	<toolkit:TransitionService.NavigationOutTransition>

12	<toolkit:NavigationOutTransition>

13	<toolkit:NavigationOutTransition.Backward>

14	<toolkit:RotateTransition />

15	</toolkit:NavigationOutTransition.Backward>

16	<toolkit:NavigationOutTransition.Forward>

17	<toolkit:RotateTransition />

18	</toolkit:NavigationOutTransition.Forward>

19	</toolkit:NavigationOutTransition>

20	</toolkit:TransitionService.NavigationOutTransition>

示例 2：装载和退出的时候垂直旋转（转门效果）
view source
print?

01	<toolkit:TransitionService.NavigationInTransition>

02	<toolkit:NavigationInTransition>

03	<toolkit:NavigationInTransition.Backward>

04	<toolkit:TurnstileTransition Mode="BackwardIn"/>

05	</toolkit:NavigationInTransition.Backward>

06	<toolkit:NavigationInTransition.Forward>

07	<toolkit:TurnstileTransition Mode="ForwardIn"/>

08	</toolkit:NavigationInTransition.Forward>

09	</toolkit:NavigationInTransition>

10	</toolkit:TransitionService.NavigationInTransition>

11	<toolkit:TransitionService.NavigationOutTransition>

12	<toolkit:NavigationOutTransition>

13	<toolkit:NavigationOutTransition.Backward>

14	<toolkit:TurnstileTransition Mode="BackwardOut"/>

15	</toolkit:NavigationOutTransition.Backward>

16	<toolkit:NavigationOutTransition.Forward>

17	<toolkit:TurnstileTransition Mode="ForwardOut"/>

18	</toolkit:NavigationOutTransition.Forward>

19	</toolkit:NavigationOutTransition>

20	</toolkit:TransitionService.NavigationOutTransition>

大功告成！