Reusing the Transition Attached Properties

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 4.4 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

Click here to view code image

<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:

Click here to view code image

<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.