Home/ Questions/Q 8658131
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T15:41:25+00:00

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

  • 0

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…

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve used FlipView for this. The code inside WinJS.UI in base.js explains everything about the effect (as mentioned by Dominic Hopton). The FlipView is good enough for my current usage (may need customize for extra flipping behavior in future though).

    The FlipView loads all pages at once at the start, to reduce the overload, I

    1. lazy-load simple placeholder div instead of PageControl at first and then load/unload the PageControl in events onpagecompleted/onpagechangedvisibility of the FlipView. This brings a side effect that PageControl.ready/unload is triggered when the page is visible inside (or hidden from) the viewport, very handy.
    2. incrementally load extra pages through itemDataSource (maybe also dynamically unload?)

    Also, extra FlipViews could be used inside PageControl wrapped by FlipView, MSDN does not mention this.

    • 0