Spinning an image on MouseEnter/MouseLeave on Button in a WPF Application

Spinning an image in WPF is a very simple and useful task for making our application more attractive. It only uses Trigger and StoryBoard.

Here is the XAML code for spinning an image on MouseEnter or MouseLeave that is applied on a button.

  1. <Grid Margin="0,246,228,0">
  2. <Button Name="imagebtn"
  3. Grid.Column="0"
  4. Margin="121,-229,-111,25"
  5. Command="{Binding RefreshPortList}" HorizontalAlignment="Left" Width="279" >
  6. <Image Source="Koala.jpg"
  7. RenderTransformOrigin=".5,.5"
  8. Height="268" Width="269">
  9. <Image.RenderTransform>
  10. <RotateTransform x:Name="RotateTransform" Angle="0" />
  11. </Image.RenderTransform>
  12. <Image.Triggers>
  13. <EventTrigger RoutedEvent="MouseLeave">
  14. <BeginStoryboard>
  15. <Storyboard>
  16. <DoubleAnimation Storyboard.TargetName="RotateTransform"
  17. Storyboard.TargetProperty="Angle"
  18. By="10"
  19. To="360"
  20. Duration="0:0:0.7"
  21. FillBehavior="Stop"/>
  22. </Storyboard>
  23. </BeginStoryboard>
  24. </EventTrigger>
  25. </Image.Triggers>
  26. </Image>
  27. </Button>
  28. </Grid>
  1. <EventTrigger RoutedEvent="MouseEnter">
  1. <EventTrigger RoutedEvent="MouseLeave">
That's It.

If anyone is a beginner in WPF then please try this. You will find this very Interesting and very useful.