Command Links in Windows Vista
As you’re probably aware, Microsoft recently released the December CTP (build 5270) of Windows Vista. You can also obtain a draft of the Windows Vista User Experience Guidelines. The UX guidelines available right now are a little older, dating back to the PDC. Doubtless these will be updated in due course.
These guidelines contain the following recommendation:
"When a page has a small set of fixed options, use command links instead of a combination of radio buttons and a commit button. This allows users to select a response with a single click"
For example, The VPN Wizard in Windows Vista looks like this:
This contains a couple of Command Links. As I took this screenshot, the mouse was hovering over the one at the top, causing it to look like a great big button. (The screenshot technology I'm currently using on Vista - Alt-PrtSc - doesn't capture the pointer...) This new control type streamlines wizard-like user interfaces. The old approach of using a radio button would have required me to click on two buttons: the radio button and then Next. Here I just click on the action I want to take next.
While the style guidelines tell you that this is the preferred way of offering the user a choice, instructions on how to achieve this are harder to come by. As far as I can tell, there’s nothing about Command Links in any version of the Windows SDK I’ve been able to find.
Still, that’s life on the bleeding edge of CTPs for you. If you’re not prepared to do a little digging to work this kind of thing out, then CTPs probably aren’t for you.
In order to work out what the VPN wizard was doing, I fired up the venerable Spy++ tool. Here’s how it deconstructs the window shown above:
I’m not completely sure what the DirectUIHWND stuff is about, but something like it has been around since Windows XP - the task panels on the left of Explorer windows are named something like that if I remember correctly. It seems to indicate that the app is drawing the UI using something other than normal HWNDs. I’m also not entirely sure what the CtrlNotifySink stuff is all about Fortunately, these appear to have nothing to do with the Command Links.
Indeed most of the window is normal HWND stuff. For example, the "What is a VPN connection?" link at the bottom is a normal SysLink control. Those two Static controls you can see in Spy++ are the images representing the connection topology.
This leaves the two Command Link controls, which turn out to be Buttons! I suppose it shouldn’t be all that surprising that a big clickable thing with a caption should be represented by the Button window class. :-)
These buttons have their window styles set to 0x5000000E. Spy++ reports this as:
WS_CHILDWINDOW WS_VISIBLE BS_USERBUTTON BS_AUTO3STATE
However, this isn’t quite right. BS_USERBUTTON and BS_AUTO3STATE aren’t meant to be combined like that. Spy++ doesn’t understand the bit pattern and has come up with a bogus guess here.
The truth lies in CommCtrl.h. (Specifically, in the version in the SDK for build 5270.) In a conditionally compiled section only included if WINVER is >= 0x0600 we find:
#define BS_COMMANDLINK 0x0000000EL
So it looks like you just need to set the button style accordingly and you’ve got your Command Link. To test that theory, I wrote a little Win32 application. I bunged a couple of buttons into a dialog, and then edited the .rc file by hand so the button controls were created thus:
CONTROL "Foo",IDC_BUTTONFOO,"BUTTON",WS_TABSTOP | 0xe,7,7,259,42
CONTROL "Bar",IDC_BUTTONBAR,"BUTTON",WS_TABSTOP | 0xe,7,52,259,42
And behold:
But we're not quite done - the VPN wizard had a little explanatory note attached to each of the buttons. Time to dig a little further. Lower down in CommCtrl.h we find this:
#define BCM_SETNOTE (BCM_FIRST + 0x0009)
#define Button_SetNote(hwnd, psz) \
(BOOL)SNDMSG((hwnd), BCM_SETNOTE, 0, (LPARAM)(psz))
They look like they might be just what’s required. As indeed they are:
So there you have it. Want to add Command Links to your application? Just create normal Win32 buttons, set the style to BS_COMMANDLINK, and use Button_SetNote to add a note to the caption.