Wpf animation - how to shake icons on iOS

Question

I would like to have an image animation in wpf where the image shakes slightly to remove it, as is the case for iOS apps. Do you know something that will help? Something already built? Thank you very much.

Answer 1

Here is a complete sample of shaking button text. You must be able to adapt this to shake the image and improve it using the attenuation 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>