Add a little spin to your next XAML project with Spinkit.Xaml


Today's XAML Wednesday project is one of those little projects that you might not need every day, it might not change your dev world, that's actually just kind of fun and different. It's a project from Nigel Sampson that will let you add something a little different to your next project...

Announcing Spinkit.Xaml

A few months ago I saw a cool CSS project making the rounds called SpinKit, a collection of CSS spinner styles created by Tobias Ahlin of GitHub. Getting rather bored with the standard spinning circles I thought I’d try and recreate these in Xaml as Styles for the Windows 8 Progress Ring control. The result is Spinkit.Xaml which turned out to be reasonably accurate as you can see from the comparison video.

It’s all available on source on GitHub and I’m also distributing the resource dictionary through Nuget to make it easy to import them into your app and apply to your ProgressRing controls.


nigel-sampson / spinkit-xaml

A port of a collection of styles for the Windows 8 Progress Ring control, inspired by the CSS SpinKit by Tobias Ahlin. Demo video available on Youtube: Spinkit Xaml demo.


Install the nuget package:

Install-Package Spinkit.Xaml 

Which will import the Spinkit.Styles.xaml resource dictionary into your projects. You can then import this dictionary in your App.xaml.

<ResourceDictionary Source="Spinkit.Styles.xaml" />

You can then mark up your Progress Ring controls with the new styles.

<ProgressRing IsActive="True" Style="{StaticResource RotatingPlaneProgressRingStyle}" /> 

Check out the sample app in this repository to browse all the available styles.

A cool part of Nigel's post was how he discusses how he converted it from CSS to XAML..

So how difficult is it to port something like this across from CSS to Xaml? In some parts easy and other parts not so much. The core animation ideas around key frames and easing work identically so there’s no real problems there. One minor difference is that SpinKit specifies its key frames as percentages (at 50% the scale should be X) whereas Xaml uses absolute times so a little math is involved there but nothing too taxing.

We also want to use the same easing in the animation as CSS, we can represent that using a SplineDoubleKeyFrame and the KeySpline “0.42,0 0.58,1”.

[... check out the full post for much more on it...]


Coding4Fun, XAML

The Discussion

  • User profile image

    Don't forget, XAML is used in WPF and SL as well. It's a bit disappointing to call this a "XAML" project. I was excited to see some new WPF goodness. Alas, this is a Windows Store project which happens to use XAML.

  • User profile image

    @schroedl:Good point... I kind of assumed it was more generic. My bad on that.

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.