This is just a quick post for something that caused me quite a bit of hassle. How to spin an image in WPF. This is useful for creating loading icons such as a spinning icon.
This is what my implementation looks like:
To create this effect, I first added a resource to my user control. This is what that looks like:
<UserControl.Resources> <Storyboard x:Key="imageRotationStoryboard" Storyboard.TargetName="loadingImage" Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"> <DoubleAnimation From="0" To="360" BeginTime="0:0:0" Duration="0:0:1.5" RepeatBehavior="Forever"/> </Storyboard> </UserControl.Resources>
What this does is create a story animation that rotates the image from 0 degrees to 360 degrees (a full circle) in 5 seconds. It also does this forever, hence the spinning effect 😊
I then created an image object and set my source. I also changed the RenderTransformOrigin to be 0.5,0.5, this means that the rotation happens in the centre of the image instead of the default top left corner. I then created an event on the image at loaded to start the storyboard animation and set the rotate to 0 on load. Heres what that looks like:
<Image Name="loadingImage" Margin="200" RenderTransformOrigin="0.5,0.5" Source="/SlickRHI;component/Assets/Images/Loading.png"> <Image.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <EventTrigger.Actions> <BeginStoryboard Storyboard="{StaticResource imageRotationStoryboard}" /> </EventTrigger.Actions> </EventTrigger> </Image.Triggers> <Image.RenderTransform> <RotateTransform Angle="0"/> </Image.RenderTransform> </Image>
Hope this helps someone, I know I will need this at least once again in the future. Enjoy 😊