Activated is only raised first time

Bug Reports
1

In my use case I need to start a timeline when a page is activated. Because the page is showed in a page control and is showed directly through a menu button the ActivationAnimation can not be used, because it’s only trigger in a page transition (and that’s not the case if you use the router and jump directly to the page). If the page is moved in the page control the DeactivationAnimation is used to instantaneously hide something. This pair of Activated and DeactivationAnimation is not working as expected.

I made a sample:

<App>

    <PageControl ux:Name="slides" ClipToBounds="true">

        <Page Color="#77A">
            <Activated>
                <Set txtOne.Opacity="1" />
            </Activated>
            <DeactivatingAnimation>
                <Set txtOne.Opacity="0" />
            </DeactivatingAnimation>
            <Text ux:Name="txtOne" Value="Page 1" Color="#FFF" Alignment="Center"/>
        </Page>

        <Page Color="#7A7">
            <Activated>
                <Set txtTwo.Opacity="1" />
            </Activated>
            <DeactivatingAnimation>
                <Set txtTwo.Opacity="0" />
            </DeactivatingAnimation>
            <Text ux:Name="txtTwo" Value="Page 2" Color="#FFF" Alignment="Center"/>
        </Page>

    </PageControl>

</App>

As you can see: if you move the page and the slide is triggered the text is displayed. But if you move the page only a little and the slide is not triggered the text is not shown again. Activated is only triggered the first time the page is shown, but not after the Deactivated started and is aborted.

2

It’s unclear what you’re trying to achieve. In this case you’re illustrating with the code, you should not be using an Activated trigger at all:

<App>

    <PageControl ux:Name="slides" ClipToBounds="true">

        <Page Color="#77A">
            <DeactivatingAnimation>
                <Change txtOne.Opacity="0" />
            </DeactivatingAnimation>
            <Text ux:Name="txtOne" Value="Page 1" Color="#FFF" Alignment="Center"/>
        </Page>

        <Page Color="#7A7">
            <DeactivatingAnimation>
                <Change txtTwo.Opacity="0" />
            </DeactivatingAnimation>
            <Text ux:Name="txtTwo" Value="Page 2" Color="#FFF" Alignment="Center"/>
        </Page>

    </PageControl>

</App>

Since DeactivatingAnimation has continuous progress, this ends up as a nice gradual transition on the Opacity from 0 to 1 and back, depending on the navigation progress (“how far the page has been pulled”).

Take a look at this example which shows quite interesting approach to page transitions. The page indicators are bound to continuous progress, while the Attractors are changing their values when the page transitions are exactly in the middle.

3

As I wrote: the problem is that the ActivatingAnimation is not triggert when you navigate to the page by routing code behind (Actived triggers). Also there are a lot scenarios where the 0 to 1 change of the Animation triggers are not relevant because you what start something after the transition: for example start a timeline after everything happend!

4

I see what you wrote, but this is still unclear.

Are you looking for the When property on Activated? Setting that to Stable could help.

How is ActivatingAnimation relevant, if you didn’t even include it in the reproduction code?

5

Thx for the tip. It’s not documented on the Navigation page. How is it used? As UX trigger? Is there a sample?

Ok, here the long story:
You have an app with menu and a lot of pages (Level 1) with pagecopntrols (these pages have Level 2) on it. You can navigate to each Level 1 page via the menu. Then you swipe through the level 2 pages of these level 1s: ActivatingAnimation is in charge from page to page, at the end of each animation the Activated trigger is raised.
Now you have in addition something like a content page (sitemap) from where you jump directly to the level2 pages. In this case you don’t have ActivatingAnimation (Value = 1), but the Activated trigger is raised.
So if you want to have something animated in both cases you can use a storyboard via timeline that has to be triggered accuratly. Because the level2 pages are still part of the page control and can be swiped to the next sibling the timeline has also be triggered. This leads to the event / trigger pair Activated / DeactivationAnimation.

ActivatingAnimation is not in the reproduction code because it’s not fired when navigate through the router.

6

As you might have read on the docs page that I linked, setting the When property is as simple as:

<Page>
    <Activated When="Stable">
        <!-- ... -->
    </Activated>
    <!-- ... -->
</Page>

As for the “long story”, please prepare a complete reproduction that shows the behaviour you describe and we can take it from there.