The transition attached properties
are rather verbose, and adding them to every page in your app adds a
substantial amount of duplication. Fortunately you can create a
reusable style that can be applied to each page.
Listing 1 shows a style called TransitionPageStyle, whose TargetType is of PhoneApplicationPage.
The transition properties are placed within the style, so that when the
style is applied to a page, so too are the navigation transition
properties.
LISTING 4.4. TransitionPageStyle in App.xaml
<Application.Resources>
<Style x:Key="TransitionPageStyle" TargetType="phone:PhoneApplicationPage">
<Setter Property="toolkit:TransitionService.NavigationInTransition">
<Setter.Value>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</Setter.Value>
</Setter>
<Setter Property="toolkit:TransitionService.NavigationOutTransition">
<Setter.Value>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
The style can then be applied to each page in your app, like so:
<phone:PhoneApplicationPage
...
Style="{StaticResource TransitionPageStyle}">
...
</phone:PhoneApplicationPage>
Windows Phone Toolkit transitions come with several out-of-the-box transitions that can immediately add pizzazz to your app.
