WPF Spinning Image — Loading Wheel

IT. Delinquent
1 min readAug 3, 2021

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.

This is what the implementation looks like:

Enjoy!

IT. Delinquent

A humble tech enthusiast and dad writing articles about the tasks I perform whilst working. Hopefully, you find something useful… I never do.