How to implement sliding page transition in Metro style app

Question

I want to implement page transition w/ a slide style in Metro Style App.

The effect looks like

    state 1                     state 2                   state 3
 ____________              _______________             ____________  
|            |            |       |       |           |            |
|   page A   |    ====>   |page A |page B |   ====>   |   page B   |
|            |            |partial|partial|           |            |
|____________|            |_______|_______|           |____________|

It will be triggered by panning gesture swiping from right to left (w/o triggering system toolbar, well I've no idea how to isolate them).

I've played w/ exitPage/enterPage but no luck: seems the page A is disappeared before page B gets in.
Also I've read single page navigation, code sample of fragment loading and code sample of scrolling/panning and think about that putting the current page and the new page in div wrapper and sliding them in the div w/o invoking navigate(). But that might break CSS position, and I don't know when could the JS of the new page be invoked safely...

update 1 perhaps FlipView could do this?

update 2 in finding the way to load local pages to FlipView, found grasp of helpful links and but still confused...

• FlipView w/ using innerHTML inside Template for external RSS feed
• bind iframe w/ ListView
• ListView w/ HTMLControl content

update 3 worked out a primitive version of FlipView usage by defining PageControl of pages altogether and rendering one of the PageControl inside FlipView.itemTemplate, does that appropriate?

So, any suitable solution or bright idea for that? Thanks!

Answer 1

You can absolutely use FlipView for this, but I'll be honest I don't know how this works on the HTML side. On the Xaml side you would implement your "Pages" as user controls instead of actual pages, then you'd host them in the FlipView. This can get rather resource intensive if you have a lot of "pages" and data associated with those "pages".

On the Xaml side, each true page (inheriting from Page) is displayed in a Frame. The Frame can only display one page at a time. That's why you're seeing the first page disappear before the animation is complete.

If you don't want the user to be able to flick across several virtual pages or if resources get too intensive, you might not want to use FlipView. Instead, you could use two ContentPresenters and have an animation. ContentPresenterA and ContentPresenterB are side-by-side. The animation slides, and at the end it sets ContentPresenterA to the content of ContentPresenterB and snaps back to the beginning of the animation. It should happen so quickly the user wouldn't notice a jump.

I'm going to ask my co-worker and friend Ryan Joy to hop on here and see if he can talk about how to do these things on the HTML side.