We will go step-by-step. Before going further let us see the meaning of some keywords:

  • Setter: This will set the value or property.
  • EventTrigger: It's name itself explain that it will raise some event at any time.
  • Storyboard: Is a place where animation information is Stored.

Here are the steps:

Step 1: Open Visual Studio.

Step 2: Go to FILE and select New, then Project.

New Project

Step 3: Select Visual C# from left panel and WPF Application on right side, give the name of the project and press OK.

WPF Application

Step 4: Copy this code and lets see how it work.

  1. <StackPanel.Resources>
  2. <Style TargetType="{x:Type Button}">
  3. <Setter Property="HorizontalAlignment" Value="Center" />
  4. <Setter Property="Margin" Value="12" />
  5. <Setter Property="RenderTransformOrigin" Value="0.5 0.5" />
  6. <Setter Property="RenderTransform">
  7. <Setter.Value>
  8. <RotateTransform />
  9. </Setter.Value>
  10. </Setter>
  11. <Style.Triggers>
  12. <EventTrigger RoutedEvent="Button.Click">
  13. <BeginStoryboard>
  14. <Storyboard TargetProperty="RenderTransform.Angle">
  15. <DoubleAnimation
  16. From="0" To="180" Duration="0:0:1.05"
  17. AutoReverse="True"
  18. FillBehavior="Stop" />
  19. </Storyboard>
  20. </BeginStoryboard>
  21. </EventTrigger>
  22. <EventTrigger RoutedEvent="Button.MouseEnter">
  23. <BeginStoryboard>
  24. <Storyboard TargetProperty="RenderTransform.Angle">
  25. <DoubleAnimation
  26. From="0" To="90" Duration="0:0:1.05"
  27. AutoReverse="True"
  28. FillBehavior="Stop" />
  29. </Storyboard>
  30. </BeginStoryboard>
  31. </EventTrigger>
  32. </Style.Triggers>
  33. </Style>
  34. </StackPanel.Resources>
  36. <Button >Click me to shake</Button>
  37. ckPanel>
Design

XAML

Main Window XAML

Here first we will give <stackPanel>, which will hold all the UI Elements on window, then we will define resources for that stack panel, here <StackPanel.Resources> will be only available to that stack panel, but this stack panel is the main panel for us, which means that resources will be available throughout the window. Then we will set the triggers, which will fire the event on the given event. Here we are using RotateTransform which will rotate the attached element. This animation has some properties like From, which will tell from which angle to which angle the element is to rotate, and duration specifies the time duration the object will take to desired angle. AutoReverse tells whether it will go back to its original place or not. Then simply just put buttons element to the main stack panel.

Output:

Run

Main Window