"Delay" is not observed when switching back to initial page using DirectNavigation

Bug Reports
1

Try the following example.

When clicking the screen, the program should wait one second and then switch to the next color (page). However, when switching to red, it switches immediately.

<App>
  <Panel>
    <Style>
      <Page ux:Name="mySelf">
        <ExitingAnimation>
            <Change mySelf.Opacity="0" Delay="1" Duration="0.1"/>
        </ExitingAnimation>
      </Page>
    </Style>

    <DirectNavigation Active="redPage"/>

    <Page ux:Name="redPage" HitTestMode="LocalVisualAndChildren" Background="Red">
        <Clicked>
            <NavigateTo Target="greenPage"/>
        </Clicked> 
    </Page>
    <Page ux:Name="greenPage" HitTestMode="LocalVisualAndChildren" Background="Green">
        <Clicked>
            <NavigateTo Target="bluePage"/>
        </Clicked> 
    </Page>
    <Page ux:Name="bluePage" HitTestMode="LocalVisualAndChildren" Background="Blue">
        <Clicked>
            <NavigateTo Target="redPage"/>
        </Clicked> 
    </Page>

  </Panel>
</App>
2

The ExitingAnimation is played forward when an item goes into the exiting state, and then played backward when it comes out of the exiting state. When it plays backward it plays the animation in the reverse. This means the opacity change happens and then the delay. To add a delay in the other direction add DelayBack="1".

The reason it appears to work for a few pages now is due to the Z-order of the children. The stack is red->green->blue. So when you swtich from red to green the green does immediately appear, but the red one is still on top and needs to fade away first. When you’re on the blue one however, the red immediately fades in, and since it’s on top of the blue it will appear.

Note that other than the transitions you give in your ExitAnimation the DirectNavigation doesn’t change the pages appearance or ordering. This is to allow navigations where multiple pages can be presented at one time.

For this reason though you might also wish to make your page actually become invisible when it’s completely exited. You can add <Change mySelf.Visibility="Hidden" Delay="1.1"/> to your ExitingAnimation to do this. An invisible element is taken out of the drawing and hit testing, greatly improving efficiency as the number of pages increases.

3

Woha, got it!

Any reason why one can’t have an EnterAnimation for pages when using DirectNavigation? Would be cool to have different entering and exiting animations I think. Still wondering whether there are some fundamental things I haven’t understood about how Navigation objects are supposed to be used - the only one I feel like I “get” is LinearNavigation, but anyway. Thanks!