Friday, August 07, 2015

Creating an Xbox One style loading indicator

If you've started an XBox One you'll have seen the loading screen where the three white circles pulsate below the logo while the console starts up.

Watching this the other day I thought I'd have a go at recreating such an animation. (I've been looking at a lot of loading indicators recently and thinking about different ways of displaying a waiting state.)

After fiddling around in Blend for a bit (I decided to just do it all in Blend for a change) I came up with this:

It's a (Windows 8 style) Universal project but the UserControl in the Shared project will also work with Windows 10 (and probably WPF & Silverlight too).

It's quite simple.
It has `Foreground` and `Background` Brush properties, that are set to White and Green by default.
It has an `IsEnabled` property that you can bind to if you're so inclined.
It has `Start()`and `Stop()` methods, and if you can't work out what they do then you're probably in the wrong place.

Here's the interesting bit:
I don't like it when animations stop abruptly part way through or when loading indicators flash up on the screen for only a split second. Some people use a timer for preventing very brief display (e.g. the indicator must be shown for at least N seconds before being hidden) but that doesn't prevent it disappearing part way through the animation. To address this I made the control so that it will always complete the animation it is doing before stopping. This means that calling `Stop()` or setting `IsEnabled` to false won't immediately make the animation go away. If that's what you want then change `Visibility` or hide or remove it in some other way. ;)

There are a couple of known issues:
- You have to specify a background colour that matches the background of whatever it is displayed on top of. This means it might look odd if not on a solid colour background.
- It doesn't scale well. But you could easily modify the code in the UserControl if you wanted something bigger.

Both of these issues could be addressed by switching to using a Path, rather than the Ellipses I'm using at the moment. It might be something I get round to eventually, But if you'd really like to see it sooner then let me know.

Thoughts? Interest? Feedback?


Post a Comment

I get a lot of comment spam :( - moderation may take a while.