简体   繁体   中英

WP7 Page transitions

I have included some code within APP.XAML to define some styles for Page transitions. Its included below.

In my WP7 app I have 3 main pages - say M1, M2 and M3. For each of them I have marked in their XAML to use the 'TurnstileTransition' style and when I navigate between them it all works well. But, I also have a subpage that is used to create new items - say S1 that I navigate to from M2 and M3. My understanding is that navigating to a page like this suits a Slide transition and for these pages I am using the 'SlideTransition' style.

When I navigate to S1 it appears to pick up the Navigate forward out from M2 (turnstile) and then the Navigate ForwardIn for S1 (Slide). Looks a bit messy.

My questions are

  1. Is my assumption right and its going through both of these Navigations

  2. Is there a recommended approach to dealing with this - so maybe where a page (M2) can navigate away a couple of ways then its doesn't define the Forward Out Navigation but leaves this to be done in the code. Or do I need Forward out navigation and let it simply pick up the forward in navigation from the page to which its going to?

  3. Assuming I do need to do this then cam I override the XAML where I have marked it to pick up the style, or will I now need to do it all in the code??

Thanks

<Style x:Key="TurnstileTransition" 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>

<Style x:Key="SlideTransition" TargetType="phone:PhoneApplicationPage">
    <Setter Property="toolkit:TransitionService.NavigationInTransition">
        <Setter.Value>
            <toolkit:NavigationInTransition>
                <toolkit:NavigationInTransition.Backward>
                    <toolkit:SlideTransition Mode="SlideDownFadeIn"/>
                </toolkit:NavigationInTransition.Backward>
                <toolkit:NavigationInTransition.Forward>
                    <toolkit:SlideTransition Mode="SlideUpFadeIn"/>
                </toolkit:NavigationInTransition.Forward>
            </toolkit:NavigationInTransition>
        </Setter.Value>
    </Setter>
    <Setter Property="toolkit:TransitionService.NavigationOutTransition">
        <Setter.Value>
            <toolkit:NavigationOutTransition>
                <toolkit:NavigationOutTransition.Backward>
                    <toolkit:SlideTransition Mode="SlideUpFadeOut"/>
                </toolkit:NavigationOutTransition.Backward>
                <toolkit:NavigationOutTransition.Forward>
                    <toolkit:SlideTransition Mode="SlideDownFadeOut"/>
                </toolkit:NavigationOutTransition.Forward>
            </toolkit:NavigationOutTransition>
        </Setter.Value>
    </Setter>
</Style>

If you want to have more page transitions depending on which page you are navigating to you should override the OnNavigatingFrom method of let's say M2 page. Add a bool variable in your page class ignoreTransition = false (this will tell us if we should play the transition or not) then in the OnNavigatedFrom method check if IgnoreTransition == false , if ignoreTransition is false then cancel the navigation e.Cancel=true; and find which page you're navigating to e.Uri . If the Uri reffers to another M page start the turnstile transition, otherwise start the slide transition.

Next you need to subscribe to the transition's Completed event and using a lambda expression navigate to the page you wanted to navigate: e.Uri . Also set ignoreTransition = true; otherwise you will end up in a loop.

Last but not least: override OnNavigatedFrom and set ignoreTransition back to true .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM