Speed Dial Control for WPF

Speed dial controls are cool, especially if they are done right with animated dial and everything - that is why those controls are relatively popular in commercial 3rd part control packs.

Speed dial controls also take a lot of screen space to show very little information, that makes them appropriate for only a tiny number of real world cases – but they are cool, so we’ll write one.

WPF has a very powerful concept called “lookless controls” – the look and feel of the control is separate from the logic of the control – and if we think about it we can say a speed dial is just a fancy skin for a progress bar.

So, we take a progress bar, throw in an ellipse for the border and a long thin triangle for the dial and we’re almost done, there area only two pieces missing.

The first is the scale, there is no panel in WPF that places it’s children in a layout for for a speed dial scale – I was thinking about writing that panel when I realized its an idiotic move, never in my life I had to place controls in a window is the sort of semi round layout needed for a speed dial scale – it’s easier to just write a custom control for the scale only.

And so the SpeedDialTicks class was created, it’s actually not complete, there are many things that can go there, starting with the scale text color, font and size – but I left adding all of those as an exercise for the reader, this control has only a tiny amount of code and I’m sure you can find how to add any such feature you need.

The second and more interesting missing piece is the animated dial, to do this I created a FrameworkElement derived class (so it can properly participate in data binding) called ChangeAnimator with a SourceValue and a TargetValue property, when you change the SourceValue the TargetValue animates to the value you set, I’ve also added the “logic” needed to translate between values and angles into this control.

With those two tiny classes ready all that’s left is selecting a color scheme and writing a pretty short control template that combines them into a cool looking speed dial.

You can download the source here