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: https://github.com/mrlacey/XboxStyleLoadingIndicator
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?
0 comments:
Post a Comment
I get a lot of comment spam :( - moderation may take a while.