Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

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.

Usage

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.

<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Spinkit.Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

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...]

Tags:

Follow the Discussion

  • 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.

  • Greg Duncangduncan411 It's amazing what a professional photographer can do...

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

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.