CODEWITHSUNDEEP
c#uwpuwp-xaml
Raghva
Raghva

Reputation: 65

How to provide sliding animation on visibility change for any control

I want to provide the animation for stack-panel on its visibility change. The Paint 3D of windows 10 provide the slide in animation for navigation view on menu button click. I want to do the same sliding effect to stack-panel on its visibility changed. I tried the animation using the Microsoft.Toolkit.Uwp.UI.Animations with following code

          <animations:Implicit.ShowAnimations>
            <animations:TranslationAnimation  Duration="0:0:1" From="0" To="1">
                <animations:ScalarKeyFrame Key="0.2" Value="0.6"/>
                <animations:ScalarKeyFrame Key="0.4" Value="0.3"/>
                <animations:ScalarKeyFrame Key="0.6" Value="0.8"/>
                <animations:ScalarKeyFrame Key="0.8" Value="0.5"/>
            </animations:TranslationAnimation>
        </animations:Implicit.ShowAnimations>

        <animations:Implicit.HideAnimations>
            <animations:OpacityAnimation Duration="0:0:1" From="1" To="0">
                <animations:ScalarKeyFrame Key="0.2" Value="0.5"/>
                <animations:ScalarKeyFrame Key="0.4" Value="0.8"/>
                <animations:ScalarKeyFrame Key="0.6" Value="0.3"/>
                <animations:ScalarKeyFrame Key="0.8" Value="0.6"/>
            </animations:OpacityAnimation>
        </animations:Implicit.HideAnimations>

But this just make the stack-panel fade in and fade out, where I want to slide it from left to right.

Upvotes: 1

Views: 1270

Answers (1)

Martin Zikmund
Martin Zikmund

Reputation: 39092

You can put multiple items in inside one <animations:Implicit.ShowAnimations> element, so you can add both the Translation and Opacity animation there.

Also, translation uses absolute values, so what you are doing is moving the panel just one pixel to the right currently, which is imperceptible. Try setting From="-200" and To="0" for example.

Upvotes: 1

Related Questions