How to implement a rolling page transition in the Metro style application

I want to implement the transition of a page with a slide style into the Metro Style application .

The effect looks like

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

It will start by turning your finger from right to left (without launching the system toolbar, well, I don’t know how to isolate them).

I played w / exitPage / enterPage , but no luck: it seems that page A disappeared before page B.
Also, I read the one-page navigation , the sample code for loading the fragment, and the example for the scroll / pan code and think about putting the current page and a new page into a wrapper div and copy them into a div without calling navigate(). But this can break the CSS position, and I don’t know when it was safe to invoke JS of a new page ...

update 1 maybe FlipView can do this?

update 2 to find a way to load local pages on FlipView, find an understanding of useful links, and yet confuse ...

• FlipView innerHTML Template RSS-
• iframe w/ ListView
• ListView HTMLControl

update 3 FlipView, PageControl PageControl FlipView.itemTemplate, ?

, ? !