Search code examples
c#animationuwpmotion

How to animation button from y 10 to y 0 - UWP


Animation Button From Y Coordinate 10 to Y Coordinate 0. Animation Like: Ease-In-Out, Ease-In, Ease-Out. Thanks!


Solution

  • How to animation button from y 10 to y 0 - UWP

    You could use DoubleAnimation with EasingFunction to animate your button. the following is the complete sample.

    <Grid>
        <Grid.Resources>
            <Storyboard x:Name="Storyboard2">
                <DoubleAnimation
                    Storyboard.TargetName="MyButton"
                    Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                    From="0"
                    To="200">
                    <DoubleAnimation.EasingFunction>
                        <ExponentialEase EasingMode="EaseIn" Exponent="4.5" />
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
        </Grid.Resources>
        <Button
            x:Name="MyButton"
            VerticalAlignment="Center"
            Click="Button_Click"
            Content="HelloWorld">
            <Button.RenderTransform>
                <CompositeTransform />
            </Button.RenderTransform>
        </Button>
    </Grid>
    

    Usage

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        Storyboard2.Begin();
    }