PageControl: Change pages without "stacking" them

How-to Discussions
1

Hey guys,

I have a PageControl, just like this example:

<PageControl Transition="None">
   <Page uxName="a" />
   <Page uxName="b" />
   <Page uxName="c" />
   <Page uxName="d" />
   <Page uxName="e" />
</PageControl>

I set Transition to None because I don’t want any animations when changing the current page.
But if I change the page from (for example) b to e, I see every page (without an animation) between them.
For a short second, it displays page c and d before it comes to page e and stops.
How can I disable this behaviour?
I want to immediately go from the one to the other page.

2

PageControl has implicit internal progress, and it works with instances of pages. You should perhaps switch to using a Navigator with templates.

3

Navigator is also working, thank you!
But I have an interesting behaviour when setting the Navigator to Transition="None.
It seems like it doesn’t switches the pages but mixes them so I have the content of multiple pages in one page.
This behaviour stops when I remove the Transition configuration.
(I’m using router.pushRelative to switch the pages).

Any ideas here?

4

That’s fully expected behaviour.

If you remove the transition configuration, you have to supply your own. Otherwise, the pages don’t know how they are supposed to go away (so they don’t). See Transition docs for details.

As an example, you could change the Opacity of a page to 0 in an ExitingAnimation.

5

Thats working perfekt, thank you.
Is there a way to “mix” the Animations?
For example, I want an ExitingAnimation with setting the Opacity to 0 but I want an exception when I switch between page c and d.
Here I want the default animation.
Is that possible?

6

Yes, the Transition docs I linked to explain how you can do that.