TransitioningContentControl Control - AdarshRise/HandyControl GitHub Wiki

You can use TransitioningContentControl control if you want your content to run with animation.

Usage

First add HandyControl refrence

xmlns:hc="https://handyorg.github.io/handycontrol"

then in your xaml

<hc:TransitioningContentControl>
 <Grid>

 </Grid>
</hc:TransitioningContentControl>
Available Property Description
TransitionMode Page loading animation [Left2Right, Bottom2Top, Top2Bottom, Right2LeftWithFade, Left2RightWithFade, Bottom2TopWithFade, Top2BottomWithFade, Right2LeftWithFade]
TransitionStoryboard [Custom1Transition, Custom2Transition, Custom3Transition]

Sample TransitionStoryboard

  <Storyboard x:Key="Custom1Transition" x:Shared="False">
        <DoubleAnimation From="50" To="0" Duration="0:0:0.4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
            <DoubleAnimation.EasingFunction>
                <ElasticEase Oscillations="1"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

    <Storyboard x:Key="Custom2Transition" x:Shared="False">
        <DoubleAnimation From="10" To="0" Duration="0:0:0.4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
            <DoubleAnimation.EasingFunction>
                <ElasticEase Oscillations="1"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

    <Storyboard x:Key="Custom3Transition" x:Shared="False">
        <DoubleAnimation From=".8" To="1" Duration="0:0:0.4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
            <DoubleAnimation.EasingFunction>
                <ElasticEase Oscillations="1"/>
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

TransitioningContentControl

⚠️ **GitHub.com Fallback** ⚠️