#1,164 – Using Animation to Bounce a Control

The XAML fragment below will start a Button bouncing when you click on it.  This uses the BounceEase object as an easing function.  You can play with the animation duration, # bounces, and “bounciness” to get different effects.

	<Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Button Content="Click Me" Margin="20,5,20,35"
                VerticalAlignment="Bottom">
            <Button.RenderTransform>
                <TranslateTransform x:Name="transTransform" X="0" Y="0"/>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation From="0" To="35" Duration="00:00:01" 
                                    Storyboard.TargetName="transTransform" 
                                    Storyboard.TargetProperty="Y"
                                    AutoReverse="True" RepeatBehavior="Forever">
                                <DoubleAnimation.EasingFunction>
                                    <BounceEase Bounces="1" EasingMode="EaseOut"
                                                Bounciness="2" />
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <Border Grid.Row="1"
            BorderBrush="Black" BorderThickness="10"/>
    </Grid>