Transition ZOffset trouble navigating with router

How-to Discussions
1

I want custom animation/transition but cannot get Z order to act naturally. This snippet illustrates my issue:

<App>
	<JavaScript>
		module.exports = {
	        gotoFirst: function() { router.push("firstPage"); },
	        gotoSecond: function() { router.push("secondPage") },
	        gotoThird: function() { router.push("thirdPage") },
	        goBack: function() { router.goBack(); }
	    };
	</JavaScript>

	<Page ux:Class="TemplatePage" Padding="30" Transition="None">
		<EnteringAnimation>
			<Move X="1" RelativeTo="Size" Duration="1" />
		</EnteringAnimation>
		<ExitingAnimation>
			<Move X="-50" Duration="1" />
		</ExitingAnimation>
	</Page>

	<TemplatePage ux:Class="Type1Page" Background="#246">
		<Text Clicked="{gotoSecond}" Color="#fff" Alignment="TopLeft">Page 1 (click to go to page 2)</Text>
		<Text Clicked="{goBack}" Color="#fff" Alignment="Bottom">Go back (if possible)</Text>
	</TemplatePage>

	<TemplatePage ux:Class="Type2Page" Background="#642">
		<Text Clicked="{gotoThird}" Color="#fff" Alignment="TopLeft">Page 2 (goto page 3)</Text>
		<Text Clicked="{goBack}" Color="#fff" Alignment="Bottom">Go back</Text>
	</TemplatePage>

	<TemplatePage ux:Class="Type3Page" Background="#264">
		<Text Clicked="{gotoFirst}" Color="#fff" Alignment="TopLeft">Page 3 </Text>
		<Text Clicked="{goBack}" Color="#fff" Alignment="Bottom">Go back</Text>
	</TemplatePage>

	<Panel>
		<Router ux:Name="router" />

		<Navigator DefaultTemplate="firstPage">
			<Type1Page ux:Template="firstPage" />
			<Type2Page ux:Template="secondPage" />
			<Type3Page ux:Template="thirdPage" />
		</Navigator>
	</Panel>
</App>
2

The z-ordering here is affected by Navigator.Gotostate which by default says that the page you’re navigating to should be brought to front. If you instead set it to Unchanged then the order is defined by the order of the pages in ux, and you can start applying your own ZOffsets or BringToFront / SendToBack as desired.

3

So, just to expand on that, I assume this does what you wanted?

<App>
    <JavaScript>
        module.exports = {
            gotoFirst: function() { router.push("firstPage"); },
            gotoSecond: function() { router.push("secondPage") },
            gotoThird: function() { router.push("thirdPage") },
            goBack: function() { router.goBack(); }
        };
    </JavaScript>

    <Page ux:Class="TemplatePage" Padding="30" Transition="None">
        <EnteringAnimation>
            <Change this.ZOffset="1" Duration="1"/>
            <Move X="1" RelativeTo="Size" Duration="1" />
        </EnteringAnimation>
        <ExitingAnimation>
            <Change this.ZOffset="-1" Duration="1"/>
            <Move X="-50" Duration="1" />
        </ExitingAnimation>
    </Page>

    <TemplatePage ux:Class="Type1Page" Background="#246">
        <Text Clicked="{gotoSecond}" Color="#fff" Alignment="TopLeft">Page 1 (click to go to page 2)</Text>
        <Text Clicked="{goBack}" Color="#fff" Alignment="Bottom">Go back (if possible)</Text>
    </TemplatePage>

    <TemplatePage ux:Class="Type2Page" Background="#642">
        <Text Clicked="{gotoThird}" Color="#fff" Alignment="TopLeft">Page 2 (goto page 3)</Text>
        <Text Clicked="{goBack}" Color="#fff" Alignment="Bottom">Go back</Text>
    </TemplatePage>

    <TemplatePage ux:Class="Type3Page" Background="#264">
        <Text Clicked="{gotoFirst}" Color="#fff" Alignment="TopLeft">Page 3 </Text>
        <Text Clicked="{goBack}" Color="#fff" Alignment="Bottom">Go back</Text>
    </TemplatePage>

    <Panel>
        <Router ux:Name="router" />

        <Navigator DefaultTemplate="firstPage" GotoState="Unchanged" Transition="None">
            <Type1Page ux:Template="firstPage" />
            <Type2Page ux:Template="secondPage" />
            <Type3Page ux:Template="thirdPage" />
        </Navigator>
    </Panel>
</App>
4

That’s exactly what I was going for, thanks.