WPF Spinning Image – Loading Wheel

Hi All!

I wanted to come back and revamp this blog post as I know a lot of people have found it useful. I wanted to update it with some more useful information. So lets get started! Lets create a WPF Spinning Image – Loading Wheel style!

Obviously, this post references several technologies that are combined together in order to make this effect happen. I’ve included some information about the most used technologies below.

I’ve also put this post on my Medium page, in case you prefer reading on Medium. You can find a link to this here!

Useful Terms

WPF – Windows Presentation Foundation is a graphical subsystem developed by Microsoft for creating rich user interfaces in Windows applications. It is part of the .NET Framework and provides a powerful framework for building desktop applications with visually stunning user interfaces

XAML – Extensible Application Markup Language is a markup language used to define user interfaces in a declarative way. It is primarily associated with the Microsoft technology stack, especially in conjunction with Windows Presentation Foundation (WPF), Silverlight, and Universal Windows Platform (UWP) applications

C# -This is a versatile, object-oriented programming language developed by Microsoft. It is a key component of the .NET framework and is widely used for building a variety of applications, including desktop, web, mobile, and cloud-based applications

Storyboard – This is a class built into .NET. It’s a container timeline that provides object and property targeting information for it’s child animations. It allows a controllable animation that can be paused, resumed, stopped and removed.

The Issue

I wanted to display a small form whilst the actual WPF program was loading. This was purely for bonus points with the program I was developing for work.

At least now, the user could tell it was actually doing something instead of accidently loading the program 10 times after smashing the icon after it didn’t load in 0.01 seconds!

Setting this spinning image up cause me quite a bit of hassle. There’s a saying with WPF and C#, it makes hard things easy and easy things hard.

My Implementation – WPF Spinning Image – Loading Wheel

This is what my final implementation looks like:

WPF Spinning Image - Loading Wheel final implementation

The Code

In order to create this effect, I first added a resource to my user control. This is what the code looked 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>

The purpose of this is to create a storyboard animation that rotates the image from 0 degrees to 360 degrees in 5 seconds, making sure to repeat forever. This is what creates the spinning effect.

I then created an image object and set my source. After this, I changed the RenderTransformOrigin to be 0.5,0.5 which means that the rotation of the image happens from the centre of the image instead of the default value. Which happens to be the top left corner which wouldn’t work for this implementation.

Next, I created an event on the image that is triggered once the image is loaded. This event starts the storyboard animation and also sets the rotation value to 0 so that the animation always starts without a hitch.

This is what the Image object code 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>

As I mentioned at the start of this post, I know a ton of people have found this helpful so I came back and updated it with more information.

I’m sure there are other ways to implement this functionality. As is usually the case with WPF as it’s not very opinionated. This is just the implementation that made the most sense to me. If you know of another or a better way to achieve this, please commend on this post and let me know!

Hopefully, this continues to help people into the future!

Enjoy! 🎉

Leave a Comment

Your email address will not be published. Required fields are marked *

email popup image
Mark Harwood
NEVER miss a blog post again! Subscribe for email notifications whenever a new post is live!
Subscribe
NEVER miss a blog post again! Subscribe for email notifications whenever a new post is live!
Fill Out This Form, And I Will Be In Touch Shortly
Contact form image
I'll Be In Touch Soon