The MenuKiller Control – Differentiated UX

by Christoph Menge in Software

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

MenuKiller screen shot

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:

MenuKiller screen shot

<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

Post to Twitter Post to Delicious Post to Digg Post to Facebook

Related posts:

  1. A MenuKiller Sample Application
  2. A MenuKiller Control – Draft
  3. Applying ItemContainerStyle Recursively
  4. Custom DependencyProperties and “Auto”

Tags: , , , ,

← Previous

Next →

Leave a Comment