A while ago, I read a very interesting blog post: Rethinking the Button by Dax Pandhi. It really fascianated me, so I started some research on the topic. Apparently, “Differentiated UX” is the new buzzword. As is always the case with buzzwords, different people understand it in different way, but I guess the common denominator is: We haven’t been putting enough effort into User Interfaces, because we simply stuck to what was there (at least, most of us).
With WPF, things have changed quite a bit. What makes a control? In Windows Forms, a control had a certain look and behaviour. Some of it could be modified (e.g. the colors, the way the button behaves on click, etc.), yet a lot of it was fixed. For example, many controls had a Text-Property which accepted a string of course.
WPF Controls, on the other hand, have Content or Items, which can again be controls. So you can finally put an image into a tooltip with a few lines of purely declarative XAML code. Therefore, in WPF, a control is far less specific. Many scenarios that demanded a custom control in Windows Forms are now merely a different content, or a template.
Anyway, I wanted to use Dax’s control I a project of mine, but even though his original code was sufficient to build a simple demo of the control, I wanted to create a nice templateable custom control with all the behaviour we need. As it turns out, doing that is not trivial, especially for a WPF Newbie like me.
The learning curve was really steep, but I really learned a lot about WPF, custom controls and control authoring this way. The delay I’m having is really huge, so this is really a post about an upcoming article. However, since the control is now almost finished, here are some screenshots and the xaml code that the user will need to create the control:
<mk:MenuKiller VerticalAlignment="Center">
<mk:MenuKillerItem>
<mk:MenuKillerItem.Header>
<Image Width="64" Source="....png"/>
</mk:MenuKillerItem.Header>
<mk:MenuKillerItem>
<mk:MenuKillerItem.Header>
<Image Width="32" Source="....png"/>
</mk:MenuKillerItem.Header>
</mk:MenuKillerItem>
<mk:MenuKillerItem>
<mk:MenuKillerItem.Header>
<Image Width="32" Source="....png"/>
</mk:MenuKillerItem.Header>
</mk:MenuKillerItem>
<mk:MenuKillerItem>
<mk:MenuKillerItem.Header>
<Image Width="32" Source="....png"/>
</mk:MenuKillerItem.Header>
</mk:MenuKillerItem>
<mk:MenuKillerItem>
<mk:MenuKillerItem.Header>
<Image Width="32" Source="....png"/>
</mk:MenuKillerItem.Header>
</mk:MenuKillerItem>
</mk:MenuKillerItem>
</mk:MenuKiller>
As you can see, using the control is really simple. The cool icons, by the way, are from http://wearwolfaa.deviantart.com/art/23-PNG-Vista-Style-Icons-74510840.
Stay tuned – I will be busy on The CodeProject the next days, where I will certainly write an article about this control!
My current solution involves a custom panel, an overridden tree-view and tree view item, a rather complex default-theme, Custom Commands, 2 “PART_”-Controls within the template that can be overridden as well as a set of custom converters. This is not final, however, because some of these items currently don’t do a thin.
Still, everything is a little simplified, since I wanted to support the probable and important cases first, rather than the offbeat scenario.
I also had a very long and important customer meeting yesterday where I presented this control in a demo app. Now people generally try to stick to what they know, but while my customer argued that the ‘old way’ should still be available to end-users, he also showed a lot of interest in this new kind of user experience.
If you want to read about Differentiated UX further, I suggest these resources:
Sample Applications: Familiy.Show, Woodgrove Finance Application and Cine.View.
Posts and Articles: Differentiated UX by Dax Pandhi, Differentiated UX by Brian Noyes
My dearest thanks to Dax, who has encouraged me to build this control and has always been a valuable brainstorm victim 
Cheers Dax!
Chris
