| Date: | September 21, 2007 / year-entry #354 |
| Tags: | code |
| Orig Link: | https://blogs.msdn.microsoft.com/oldnewthing/20070921-00/?p=25023 |
| Comments: | 23 |
| Summary: | One of the lesser-known button styles is BS_PUSHLIKE. Makes a button (such as a check box, three-state check box, or radio button) look and act like a push button. The button looks raised when it isn't pushed or checked, and sunken when it is pushed or checked. In other words, you add this style to... |
One of the lesser-known button styles is
In other words, you add this style to a check box or radio button to make it look like a push button even though it will continue to act like a check box or radio button.
Aside from the appearance, the other checkbox and radio button behaviors are preserved. Each time you click an automatic check box, it toggles between unselected and selected; it's just that instead of hiding and showing the check-mark, it pops the button out and pushes the button in. Similarly, the automatic radio button becomes selected when you click on it and becomes deselected when you select another radio button in the group. All that changed is the visuals. Let's illustrate this with a quick sample program. First, we'll use traditional check boxes and radio buttons.
1 DIALOG 64, 64, 100, 70
STYLE WS_CAPTION | WS_SYSMENU
CAPTION "Demo"
FONT 8, "MS Shell Dlg"
BEGIN
AUTORADIOBUTTON "Search &forward", 100, 4, 9,
75, 14, WS_GROUP | WS_TABSTOP
AUTORADIOBUTTON "Search &backward", 101, 4, 27,
75, 14
AUTOCHECKBOX "&Ignore case", 102, 4, 45,
75, 14, WS_TABSTOP
END
INT_PTR CALLBACK DlgProc(
HWND hdlg, UINT uMsg, WPARAM wParam, LPARAM lParam)
{
switch (uMsg) {
case WM_INITDIALOG: return TRUE;
case WM_CLOSE: EndDialog(hdlg, 1); break;
}
return FALSE;
}
int WINAPI WinMain(HINSTANCE hinst, HINSTANCE hinstPrev,
LPSTR lpCmdLine, int nShowCmd)
{
DialogBox(hinst, MAKEINTRESOURCE(1), 0, DlgProc);
return 0;
}
When you run this program, you get two radio buttons and
a check box, and there's nothing special about them at all.
But add the
1 DIALOG 64, 64, 100, 70
STYLE WS_CAPTION | WS_SYSMENU
CAPTION "Demo"
FONT 8, "MS Shell Dlg"
BEGIN
AUTORADIOBUTTON "Search &forward", 100, 4, 9,
75, 14, WS_GROUP | WS_TABSTOP | BS_PUSHLIKE
AUTORADIOBUTTON "Search &backward", 101, 4, 27,
75, 14, BS_PUSHLIKE
AUTOCHECKBOX "&Ignore case", 102, 4, 45,
75, 14, WS_TABSTOP | BS_PUSHLIKE
END
and now the radio buttons and check box look like push buttons. But if you click on them, they still behave like two radio buttons and a check box. if you select "Search forward", then "Search backward" automatically de-selects itself, and vice versa. Each time you click on "Ignore case", it toggles between pushed-in and popped-out. The visuals are kind of confusing, however, if you have enabled Windows XP visual styles, for when you hover over a button, the theme engine will draw the button in its "hover" appearance, which causes it to pop out even though the button really is pushed in. You have to move the mouse away from the button to see that it really is pushed in. Personally, I consider this a bug. The situation in Windows Vista is only slightly better; it's still pretty bad. Push-like buttons are not used much since they duplicate the semantics of radio buttons and check boxes while presenting a deceptive visual appearance. Since they look like push buttons, users naturally expect them to behave like push buttons, and then when they don't, things get confusing. The only case I can think of off the top of my head where push-like buttons actually match with user expectations is in toolbars, where there is a long-standing convention of using push-like buttons in toolbars instead of radio buttons and check boxes. (Fortunately, toolbars manage their own buttons and don't suffer from the confusing hover-appearance behavior I discussed above.) |
Comments (23)
Comments are closed. |
So what happens to a push-like button in the third state (drawn as a grayed check box usually)?
(I’m guessing your response will be "do your own homework", but I’m asking anyway.)
"Push-like buttons are not used much since they duplicate the semantics of radio buttons and check boxes while presenting a deceptive visual appearance."
Well, yeah, unless you’re old enough to remember that real (car) radio buttons looked like pushbuttons once upon a time. :-)
I use them in dialogs in my software which represent various hardware controls for the systems I control.
As the previous poster said, picking which of a short list of frequencies lends itself well to the radio memory push pushbuttons.
That, and it takes up less room – and I want the screen real estate for showing things more interesting to the user than the floating hardware control dialogs.
Saying that, I don’t use them in my software outside of those panels.
Kip: Flat & Greyed out.
Iain.
Push-like buttons are often useful, they are used to implement toolbars, when you do can’t or won’t use the standard toolbar control. As mentionned at the end of the article.
They are used in UI design when pressing a button enters a mode in the application, or expands a part of a dialog. It’s a big on-off switch, as oposed to checkboxes which are to select options. It’s useful as well because the target is visually easy to hit and it stands out.
At the implementation level, we’ve used them to make a button that pops a menu or other temporary window. We use the checkmark + pushlike style to keep the button pushed down while the menu tracks, and pop it back up after.
Raymond, do you happen to know what application/business need motivated the creation of this bizarre option? Is there some long-forgotten Microsoft app that used push-like checkboxes?
"Push-like buttons are not used much since they … present a deceptive visual appearance."
This may be an opinion of style, but I disagree. Toggle-style push-buttons are as useful in software as they are in real life. The real life analogy is quite simple: you don’t know whether a button will depress and kick back until you push it. When you push the button, if it comes back, you get the tactile feedback that you’ve sent a command. If it stays depressed, you realize that you’ve set a mode or state.
The early 60s era radio I grew up with had LW/MW/VHF push-like buttons exactly like that. (I once pushed all three in at once which disabled the release mechanism…)
Radio buttons more like radio buttons than radio buttons themselves!
I once wrote copious quantities of code to get this behavior out of actual button controls.
When I checked it into source control, a coworker emailed me and asked why I didn’t use this style.
Having informed people for days that I was unable to work on other things because I was still trying to make this work properly, I just about strangled him. He could have saved me a week of very long hours doing frustrating and ultimately pointless work.
"Well, yeah, unless you’re old enough to remember that real (car) radio buttons looked like pushbuttons once upon a time."
Talk about a usability issue… I used to be able to decipher what station I was on just by placing my fingers on the preset buttons. Now I have to take my eyes off the road and look at the display since modern preset buttons no longer have tactile feedback. Ah, the good old days.
PMP
Caliban: similar situation, although I decided to do it from scratch using an owner-draw checkbox that looked like a button, which I suspect was substantially easier.
Strangely, I’m sure I thoroughly read the documentation on button styles to see if there was one that did what I need to do. I think maybe I was confused by the description that the style makes the button "look and act" like a pushbutton. If it looks and acts like a pushbutton, then, frankly, it is a pushbutton. But as this style only actually changes the appearance of the button, it seems that the documentation is misleading.
I count six:
(checked, unchecked) *
(enabled/hover, enabled/no-hover, disabled)
I’m presuming that "disabled" precludes hoverability, and that "focus" is equivalent to "hover" (tab to the checkbox vs. mouseover the checkbox)
Maurtis, he means the indeterminate state (IE: this checkbox represents a boolean property across multiple items, and that property is on in some items and off in others so we can’t check or uncheck the box so here’s a square instead.
I love these things, and appreciate their use in GUIs where otherwise regular buttons might have been used as toggles with the status shown in the statusbar. Paintshop pro either uses them a lot, or it uses a toolbar widget that behaves in a similar fashion.
Very tactile, very compact, very nice.
I have come to the same conclusion, the only case where push-like buttons would be useful is in toolbars. But as you write, the toolbars control manage it’s own buttons. So I don’t think I ever used push like buttons anywhere. They are redundant for any standard gui.
From user’s feedback that they like push-like checkbox/radiobutton more than the traditional one when the application is to be used on a system with touchscreen (Like most POS system you see in convenient stores).
A push-in button is useful when you are trying to emulate a hardware console (think of an electric utility control system, or a Homer-like nuclear station). People in this environment are used to push buttons and that they remained pressed; they are not options, they are buttons you pressed it and it should remain pressed. In this case, a push-in button emulates the traditional user experience, so it is useful.
By the way, if for some reason your screen is vertically inverted (it was an option in a driver, I didn’t physically invert the screen), a push button seems to be pushed in all the time. If you look closely, the 3D appearance of the button is just a white border on the top-left and black border on the bottom right, so if they are inverted they look pushed in
I’m not sure when PS_PUSHLIKE appeared in the SDK, but I too ended up implementing this capability from scratch before later discovering PUSHLIKE. I don’t think we use it much anymore, but we did at one time.
I would expect the PUSHLIKE style to be a good idea when you’re using a set of radio buttons or checkboxes to represent states (mutually exclusive, or not, respectively) that are actively being spun up and down (so to speak) as you push the buttons, as opposed to simply selecting options for data input. For instance, "which alternative package do you want to install when you push the Install button" would be better represented as plain radio buttons, but "which alternative program do you want to have running for this service", when you’re actually starting and stopping them directly, would be better represented as pushlike buttons.
From a usability standpoint it is much easier to aim and click the push-button than the radio-button. It is also much easier to spot mutually exclusive options and their labels are much better connected to the buttons, not to mention that they can contain a picture.
I really wonder why they are not used more especially when creating interfaces for people with disabilities.
One use for these that I occasionally use is for some on/off action that happens immediately. Example off the top of my head: dialog box for recording the welcome message in a voicemail application. Click the button to start recording, it remains depressed until you click it again to end recording. Yes, they’re rare, but they aren’t completely useless.
@Adrian,
After 10 years of Windows programming, I just recently realized where the term "radio button" came from :-). And yes, I do remember when cars had those.
I once pushed all radiobuttons on our (8-channel) tv. Had to repair it :)
I use them quite frequently — in fact at the moment, more frequently than "regular" radio buttons. Of course, I’m mostly doing hardware control systems right now and this style lends itself to that a lot better.