Sunday, September 29, 2013 #

XAML Mood Wheel / Spinner Wheel Control for Windows 8/Store Apps

Have been wanting to revive this blog for a long time but haven’t properly invested the time.  So thought of kicking this off with a control I worked on recently.

One of the requirements for a Windows 8 App was to create a Mood Wheel or rather a Spinner Wheel Control.  Something like below.


Now, this is not something that ships out of the box in the XAML control set.  Not even in the Windows 8.1 which has truck load of enhancements in Visual Studio editor for XAML Developers.

I first looked up if there is someone out in the community who has built something similar.  I landed in Diederik Krols Blog. It came close to what I was looking for but more meant towards a roulette and also had challenges when using a single finger to flip it.

Next I looked at Jerry Nixon’s Sweet Dial Control  which looked neat for a Dial.

Combining ideas from both, I built this mood wheel which can be rotated with single finger on touch devices and also mouse on non-touch devices.  The co-ordinates are ascertained using the Grid_ManipulationDelta Method which provides the Angle and the amount of deviation.

Jerry Nixon’s excellent “GetAngle” method helped in identifying the Angle and thereafter, it was pretty simple to use an enum and identify the message to be displayed based on range.

I have uploaded the sample to skydrive and linked here.

Most of the work is in the MyDial.xaml file and is pretty self-descriptive.  If you have  query do drop in the comments and would be glad to clarify.



Posted On Sunday, September 29, 2013 10:38 AM | Comments (32)