Page animation in WPF Slide In and Out

Question

So I am developing a WPF application. I am kind of newbie in this area.

Idea: I need to navigate to a new page whenever there is a interrupt.

I have implemented page navigation using Navigation service. I have entry and exit animation for few pages.

For entry animation I have used page triggers and loaded routed event

For Page exit animation: I store the exit animation in storyboard in page resources. Before navigating to next page, i check whether there is a exit animation storyboard, if available, begin storyboard and in storyboard completed event , I navigate the page.

The main page has the frame and other page is navigated in the frame. Whenever i receive interrupts through events I use:

frame.Navigate(targetPage);

One the Page's XAML (Lets say Page A) looks like this

<Page.Resources>
    <system:Double x:Key="SlideOffSet">800</system:Double>
    <Storyboard x:Key = "ExitAnimation">
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                             From="0" To="{StaticResource SlideOffSet}"
                             Duration="0:0:1" />
    </Storyboard>
</Page.Resources>
<Page.RenderTransform>
    <TranslateTransform X="{StaticResource SlideOffSet}" Y="0" />
</Page.RenderTransform>
<Page.Triggers>
    <EventTrigger RoutedEvent="Page.Loaded">
        <BeginStoryboard>
            <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                                     From="{StaticResource SlideOffSet}" To="0" 
                                     Duration="0:0:2" Completed="Timeline_OnCompleted"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Page.Triggers>

Code behind of the Main Page looks like :

in the interrupt received event: Code flow is

Eventargs contains the TargetPage Object
check for whether animation is present or not. If not present navigate to TargetPage
if exit animate is present

topage = e.MyEventString; // obtained as event args
currentPage = frame.Content as Page;
 sb = (Storyboard)currentPage.TryFindResource("ExitAnimation");
               if (sb != null)
                {
                    if (isAnimating == false)
                    {
                        isAnimating = true;
                        sb.Completed += Sb_Completed1;
                        sb.Begin(currentPage);
                    }
                }
            else{

                   this.frame.Navigate(topage);
               }

completed event looks like

private void Sb_Completed1(object? sender, EventArgs e)
{
    isAnimating = false;
    this.frame.Navigate(topage);
    sb.Completed -= Sb_Completed1;
}

a normal log looks like this (i.e when an interrupt is received after entry animation is completed) :

07:18:23:103 <1> Event received for navigation - target page : Page B
07:18:23:103 <1> Current Page is Page A
07:18:23:103 <1> No Exit animation found for Page A. Hence navigating to Page B
07:18:23:123 <1> Frame Load Completed. Page is Page B
07:18:25:133 <1> Entry Animation Completed
07:18:27:103 <1> Event received for navigation - target page : Page C
07:18:27:103 <1> Current Page is Page B
07:18:27:103 <1> Exit animation found for Page B. Starting Animation
07:18:28:213 <1> Exit animation Completed. Navigating to Page C
07:18:28:280 <1> Frame Load Completed. Page is Page C
07:18:30:133 <1> App close

So we use appium to test our navigation. Issue here is whenever there is a ongoing animation initiated at load event and i receive a interrupt at the same time, I try to do exit animation when previous animation is ongoing on the same page.

Sometimes, the entry animation doesn't get completed and also looks like entry animation doesn't start and hence page is not navigated.

error log looks like (when an interrupt is received when entry animation is ongoing)

07:18:23:103 <1> Event received for navigation - target page : Page B
07:18:23:103 <1> Current Page is Page A
07:18:23:103 <1> No Exit animation found for Page A. Hence navigating to Page B
07:18:23:123 <1> Frame Load Completed. Page is Page B
07:18:23:133 <1> Event received for navigation - target page : Page C
07:18:23:133 <1> Current Page is Page B
07:18:23:133 <1> Exit animation found for Page B. Starting Animation
07:18:32:133 <1> App close

--> Seems like Entry animation is not completed ! and exit animation didnt begin/ completed ???

I tried using compose handoffbehaviour for exit animation :


sb.Begin(currentPage,HandoffBehavior.Compose);

looks like entry animation gets completed now but exit animation is not and hence page is not navigated

07:18:23:103 <1> Event received for navigation - target page : Page B
07:18:23:103 <1> Current Page is Page A
07:18:23:103 <1> No Exit animation found for Page A. Hence navigating to Page B
07:18:23:123 <1> Frame Load Completed. Page is Page B
07:18:24:133 <1> Event received for navigation - target page : Page C
07:18:24:133 <1> Current Page is Page B
07:18:24:133 <1> Exit animation found for Page B. Starting Animation
07:18:25:133 <1> Entry Animation Completed
07:18:32:133 <1> App close

--> Seems like Exit animation is not getting fired / completed?!

How can i solve this problem . Any help would be appreciated.`

Page animation in WPF Slide In and Out

0 Answers0