Question

I would like to have an image animation in wpf where the image shakes lightly in order to delete it, as it happens for apps in iOS.
Do you know something that would help ? Something that already built?
Thanks a lot.

Answer 1

Here’s a complete sample of shaking the text of button. You should be able to adapt this to shake an image, and improve it using easing functions.

        <Grid.Resources>
            <ControlTemplate x:Key="ShakingButtonTemplate" TargetType="Button">
                <Border Margin="5" BorderBrush="Aquamarine" BorderThickness="5" CornerRadius="5">
                    <ContentPresenter HorizontalAlignment="Center" Content="{TemplateBinding Content}">
                        <ContentPresenter.RenderTransform>
                            <TransformGroup>
                                <TranslateTransform x:Name="Position"/>
                            </TransformGroup>
                        </ContentPresenter.RenderTransform>
                    </ContentPresenter>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard x:Name="ShakeIt">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames
                                        Storyboard.TargetName="Position" 
                                        Storyboard.TargetProperty="X" 
                                        RepeatBehavior="5x"
                                        >
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="2"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.20" Value="-2"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
<!--
                                    <DoubleAnimation 
                                        Storyboard.TargetName="Position" 
                                        Storyboard.TargetProperty="X" 
                                        From="-2" To="2" 
                                        Duration="0:0:0:0.1" 
                                        AutoReverse="True" 
                                        RepeatBehavior="10x">
                                    </DoubleAnimation>
-->
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>

            <Style x:Key="ShakingButton" TargetType="Button">
                <Setter Property="Template" Value="{StaticResource ShakingButtonTemplate}"/>
            </Style>
        </Grid.Resources>

        <StackPanel>
            <Button Style="{StaticResource ShakingButton}" Content="This is a button" />
        </StackPanel>