Debug Action inside "ToActive" transition is not printed out

Below is the example which reproduces the problem.

I have 3 pages, and I can navigate between them using Next/Back.

I’ve created one CardPage component, and want to define all transitions in this component, and then all other pages will inherit from this page.

I’m trying to understand how Direction property works, and in which cases it’s triggered and in which cases not.

So I want to put DebugAction to every possible transition I have and see the console output, this way I want to better understand how Direction property can help me to achieve my goal. I’ve read Transition.Direction docs, but still do not understand a lot.

In the the code below I’ve defined one transition with Direction="ToActive" but Debug message for that transition is not called. There is no other transitions which are causing pages to move/animate. So it’s the only one which is working. But I do not see DebugAction message printed in the console. But if I change Direction="ToInactive" then I see debug message. Is this a bug or expected behavior? Or I do not understand something?

The same is happening with other Direction values like: FromBack, ToFront, FromFront, InFront

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

	<!-- Sample Text -->
	<Text ux:Class="SampleText" Width="100%" Color="#fff" TextAlignment="Center" Value="{ReadProperty Text}" FontSize="20" >
    <string ux:Property="Text" />
	</Text>

	<!-- Card Page -->
	<!-- Custom Page Class with predefined page transitions -->
	<DockPanel ux:Class="CardPage">
	    <Activated When="Immediate">
	        <DebugAction Message="CardPage BringToFront" />
	        <BringToFront />
	    </Activated>

	    <Transition Direction="ToActive">
	        <Move Y="1" Duration="0.5" RelativeTo="ParentSize" Easing="SinusoidalInOut" />
	        <!-- ISSUE: This message is not printed -->
	        <DebugAction Message="TEST" />
	    </Transition>
	</DockPanel>

	<!-- ***** -->
	<!-- Pages -->
	<!-- ***** -->

	<!-- First Page -->
	<CardPage ux:Class="FirstPage">
		<Router ux:Dependency="router" />
		<JavaScript>

		function goNext() {
			router.push("second");
		}

		module.exports = {
			goNext: goNext
		}
		</JavaScript>

		<Rectangle Layer="Background" Color="#0057ff" />
		<SampleText Y="24" Text="Next" Clicked="{goNext}" />

	</CardPage>

	<!-- Second Page -->
	<CardPage ux:Class="SecondPage">
		<Router ux:Dependency="router" />
		<JavaScript>

		function goNext() {
			router.push("third");
		}

		function goBack() {
			router.goBack();
		}

		module.exports = {
			goNext: goNext,
			goBack: goBack
		}
		</JavaScript>

		<Rectangle Layer="Background" Color="#ff9d2a" />

		<SampleText Y="24" Text="Back" Clicked="{goBack}" />
		<SampleText Y="60" Text="Next" Clicked="{goNext}" />
		
	</CardPage>

	<!-- Third Page -->
	<CardPage ux:Class="ThirdPage">
		<Router ux:Dependency="router" />
		<JavaScript>

		function goBack() {
			router.goBack();
		}

		module.exports = {
			goBack: goBack
		}
		</JavaScript>

		<Rectangle Layer="Background" Color="#000" />
		<SampleText Y="24" Text="Back" Clicked="{goBack}" />
		
	</CardPage>

	<!-- PageView -->
	<PageView DefaultPath="first">
		<FirstPage ux:Template="first" router="router" />

		<SecondPage ux:Template="second" router="router" />

		<ThirdPage ux:Template="third" router="router" />
	</PageView>
</App>

Hi Poul.

You’re asking a very specific question: why is my DebugAction not printed to console?

The best answer I can give without involving The People Who Know is an educated guess about the fact that this particular transition is played backwards, and that a DebugAction is only executed when it’s running forward. That’s just a speculation at this point, but to me it at least makes some sense.

Now, the question you’re NOT asking is: how can I understand Transitions?

There, I’d like to suggest an approach that you limit the viewport the pages work within so that you see what happens outside of the PageView. Adding Transitions in pairs (if you have ToActive, add ToInactive as well) might be of help too. Here’s what I mean:

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

    <!-- Sample Text -->
    <Text ux:Class="SampleText" Width="100%" Color="#fff" TextAlignment="Center" Value="{ReadProperty Text}" FontSize="20" >
    <string ux:Property="Text" />
    </Text>

    <!-- Card Page -->
    <!-- Custom Page Class with predefined page transitions -->
    <DockPanel ux:Class="CardPage">
        <Activated When="Immediate">
            <BringToFront />
        </Activated>

        <Transition Direction="ToActive">
            <Move Y="1" Duration="0.5" RelativeTo="ParentSize" Easing="SinusoidalInOut" />
        </Transition>
        <Transition Direction="ToInactive">
            <Move X="-1" Duration="0.5" RelativeTo="ParentSize" Easing="SinusoidalInOut" />
        </Transition>
    </DockPanel>

    <!-- ***** -->
    <!-- Pages -->
    <!-- ***** -->

    <!-- First Page -->
    <CardPage ux:Class="FirstPage">
        <Router ux:Dependency="router" />
        <JavaScript>

        function goNext() {
            router.push("second");
        }

        module.exports = {
            goNext: goNext
        }
        </JavaScript>

        <Rectangle Layer="Background" Color="#0057ff" />
        <SampleText Y="24" Text="Next" Clicked="{goNext}" />

    </CardPage>

    <!-- Second Page -->
    <CardPage ux:Class="SecondPage">
        <Router ux:Dependency="router" />
        <JavaScript>

        function goNext() {
            router.push("third");
        }

        function goBack() {
            router.goBack();
        }

        module.exports = {
            goNext: goNext,
            goBack: goBack
        }
        </JavaScript>

        <Rectangle Layer="Background" Color="#ff9d2a" />

        <SampleText Y="24" Text="Back" Clicked="{goBack}" />
        <SampleText Y="60" Text="Next" Clicked="{goNext}" />
        
    </CardPage>

    <!-- Third Page -->
    <CardPage ux:Class="ThirdPage">
        <Router ux:Dependency="router" />
        <JavaScript>

        function goBack() {
            router.goBack();
        }

        module.exports = {
            goBack: goBack
        }
        </JavaScript>

        <Rectangle Layer="Background" Color="#000" />
        <SampleText Y="24" Text="Back" Clicked="{goBack}" />
        
    </CardPage>

    <!-- PageView -->
    <PageView DefaultPath="first" Width="40%" Height="50%" ClipToBounds="false">
        <FirstPage ux:Template="first" router="router" />

        <SecondPage ux:Template="second" router="router" />

        <ThirdPage ux:Template="third" router="router" />
    </PageView>
</App>

Hope this helps!

Checked with The People Who Know and, indeed, DebugAction will not trigger when it is inside of an animation that is played backwards.

That leaves us with a conclusion: using DebugAction for understanding Transitions is not right. Do it visually, as I suggested before.