XButtonXP - an XP-aware pushbutton that can also toggle and display an icon

• Download demo project - 96 Kb

Introduction

Looking around for a theme-aware toggle button that could display text and an icon, I could not find one, so XButtonXP is the result: a pushbutton that can also be a toggle button, and can display icon and/or text.

What's New in v1.3

In this version I have corrected (I believe) all the outstanding bugs that have been reported (see list), and added several new features:

• Grayscale icons - in previous version, icon on disabled button looked like this:

  

  In this version they look like:

  

• Transparent background for toolbar style - the parent's background is shown when mouse is not hovering:

  No hover

  Hover

• Multi-line text buttons - buttons with multiple lines of text are now supported using standard style BS_MULTILINE:

  

• Custom text and background colors - custom colors may now be used for button text and background colors:

  

XButtonXP in Action

Here is what XButtonXP looks like with themes:

Icon on Left	Icon on Right
No Icon	No Text
Toggled	Disabled

And here is what XButtonXP looks like without themes:

Icon on Left	Icon on Right
No Icon	No Text
Toggled	Disabled

XButtonXP can also be drawn using toolbar style:

No Hover

Hover

CXButtonXP Implementation Notes

Theme Support

Normally, when you add manifest file to exe, all controls used by exe will be displayed as themed. However, this is not true of ownerdraw controls - the XP theming engine just ignores them. Since I needed an ownerdraw button, it meant that XButtonXP had to handle the XP theming support. I created the CXThemeHelper class to handle loading UXTHEME.DLL and getting theme function pointers via GetProcAddress(). To make CXThemeHelper lightweight and easy to reuse, I designed it as singleton class, so that there is only one copy of DLL's module handle and function pointers per process.

The first time that CXButtonXP::DrawItem() is called, the theme is opened for Button class:

    if (ThemeHelper.IsThemeLibAvailable())
    {
        m_hTheme = ThemeHelper.OpenThemeData(m_hWnd, _T("Button"));
    }

Aside from using theme functions for drawing the controls, one other thing CXButtonXP must do is handle WM_THEMECHANGED message, which is broadcast to every window following a theme change event:

case WM_THEMECHANGED:
{
    if (IsThemed())
    {
        if (m_hTheme)
        {
            // when user changes themes, close current theme and re-open
            ThemeHelper.CloseThemeData(m_hTheme);
            m_hTheme = NULL;
            m_bFirstTime = TRUE;
        }
    }
}

CXThemeHelper API

The CXThemeHelper API includes:

• BOOL IsAppThemed()
• BOOL IsThemeActive()
• BOOL IsThemeLibAvailable()
• BOOL CloseThemeData(HTHEME hTheme)
• BOOL DrawThemeBackground()
• BOOL DrawThemeParentBackground()
• BOOL DrawThemeText()
• BOOL GetThemeBackgroundContentRect()
• HTHEME OpenThemeData()

Controlling XButtonXP Theming

CXButtonXP will use themes to draw button in the following circumstances:

1. The app is running on XP
2. Themes are enabled on system, and app has not been set to "Disable visual themes" via Properties dialog:



3. Themes have not been disabled via CXButtonXP::EnableTheming() function.

CXButtonXP Starting Point

I used Ewan Ward's article Native Win32 Theme aware Owner-draw Controls without MFC as starting point for XButtonXP. First, I adapted his code for MFC, and then used CXThemeHelper to enable theme support. The next step was to fix default button problem.

Default Button Problem

This problem plagues all ownerdraw buttons. Left uncorrected, it can give the visual appearance that there are multiple default buttons on dialog, and improperly handles ENTER key. Fortunately, Paolo Messina describes this problem in detail, and has written very nice class to transparently fix this problem for any ownerdraw button.

Keyboard Input

The final task was to ensure that SPACE and ENTER keys worked properly. On standard pushbutton, these keys produce button-click event. In order for XButtonXP to handle them in same way, I had to intercept WM_GETDLGCODE message, and ask for all keys. At the same time, I did not want to interfere with TAB key processing. The WM_GETDLGCODE message provides mechanism to do this, by returning appropriate code. Then, I added handlers for WM_KEYDOWN and WM_KEYUP, to catch ENTER and SPACE key presses. I converted these to WM_LBUTTONDOWN and WM_LBUTTONUP messages, to emulate mouse click.

CXButtonXP Functions

Here are functions in CXButtonXP:

Function	Description
CXButtonXP& EnableTheming(BOOL bEnable)	Enable visual themes for button.
COLORREF GetBackgroundColor()	Retrieve button custom background color (XBUTTONXP_NO_COLOR if none).
BOOL GetDrawToolbar()	Get toolbar style (TRUE = use toolbar style).
COLORREF GetTextColor()	Retrieve button custom text color (XBUTTONXP_NO_COLOR if none).
BOOL GetToggle()	Get toggle style (TRUE = button acts like toggle).
BOOL GetToggleState()	Get toggle state (TRUE = button is pressed).
BOOL IsThemed()	Get theming state (TRUE = visual theme is being used).
CXButtonXP& SetBackgroundColor(COLORREF rgb = XBUTTONXP_NO_COLOR)	Set button custom background color. Default is XBUTTONXP_NO_COLOR.
CXButtonXP& SetDrawToolbar(BOOL bDrawToolbar)	Set toolbar style. Default is FALSE.
CXButtonXP& SetIcon(UINT nIDResource, ICON_ALIGNMENT ia = LEFT)	Set icon from resource id.
CXButtonXP& SetIcon(HICON hIcon, ICON_ALIGNMENT ia = LEFT)	Set icon from HICON.
CXButtonXP& SetIconAlignment(ICON_ALIGNMENT ia)	Set icon alignment on button. Default is LEFT.
CXButtonXP& SetTextColor(COLORREF rgb = XBUTTONXP_NO_COLOR)	Set button custom text color. Default is XBUTTONXP_NO_COLOR.
CXButtonXP& SetToggle(BOOL bIsToggle)	Set toggle style. Default is FALSE.
CXButtonXP& SetToggleState(BOOL bToggled)	Set toggle state. Default is FALSE.

How to use

To integrate CXButtonXP into your app, you first need to add following files to your project:

• XButtonXP.cpp
• XButtonXP.h
• XThemeHelper.cpp
• XThemeHelper.h
• OddButton.cpp
• OddButton.h
• CreateGrayscaleIcon.h

Next, include header file XButtonXP.h in appropriate project files (typically the dialog header file). Now you are ready to start using CXButtonXP.

The demo app shows how to call XButtonXP:

    m_XButtonXP.SetIcon(IDI_MFC, CXButtonXP::LEFT);

You can combine XButtonXP function calls like this:

    m_XButtonXP.SetIcon(IDI_MFC, CXButtonXP::LEFT)
               .SetToggle(FALSE)
               .EnableTheming(TRUE)
               .SetDrawToolbar(FALSE);

Tips & Tricks

1. The button must not have BS_OWNERDRAW property in dialog template.
2. When you include XButtonXP in your app, you might get error message about the symbol DFCS_HOT, even though you have installed Platform SDK. To fix this, you need to put this line in stdafx.h, before any includes:

   #define WINVER 0x0500

3. The compiler error message fatal error C1083: Cannot open include file: 'uxtheme.h': No such file or directory means that compiler cannot find uxtheme.h, which is in Microsoft Platform SDK. This is free download from Microsoft site. I would give url here, but Microsoft keeps changing download page for Platform SDK, so best thing is to google for it.
4. When custom colors are used for text or background, theming is automatically switched off.

Acknowledgments

• XButtonXP code is based partially on Ewan Ward's article Native Win32 Theme aware Owner-draw Controls without MFC.
• Thanks to Paolo Messina for his COddButton class.

Revision History

Version 1.3 - 2008 January 19

• Fixed bug when button is released and mouse is moved, reported by rootdial.
• Fixed problem with drawing as default button, reported by fredwobus and programbyran.
• Fixed resource leak in DrawIcon(), reported by grin.
• Fixed transparency bug for toolbar style, reported by Pandele Florin.
• Fixed bug where WM_COMMAND was being sent twice when return pressed, reported by fredwobus.
• Implemented WM_MOUSELEAVE handler, suggested by ksk, Roman Komary. fredwobus, 630596399 and EIEN.
• Added multi-line support, requested by jlatorref.
• Added grayscale support for disabled icon, requested by programbyran.
• Added support for custom text and background colors, requested by PatLeCat and Alex Evans.
• Added tooltips to demo.
• Added option to display message box to demo.
• Added option for hatch background to demo.
• Added option for different icon color formats to demo.
• Added option to select custom text and background colors to demo.

Version 1.2 - 2005 April 20

• Fixed bug with hot state, reported by ksk
• Added SetDrawToolbar() and GetDrawToolbar(), suggested by Dominik Reichl

Version 1.1 - 2005 March 30

• Fixed bug in drawing toggle button, reported by Dominik Reichl.
• Added SetToggleState()
• Removed #include "XButtonXPTest.h" from XButtonXP.cpp

Version 1.0 - 2005 March 22

• Initial public release

Usage

This software is released under The Code Project Open License (CPOL). You are free to use this software in any way you like, except that you may not sell this source code. If you modify it or extend it, please to consider posting new code here for everyone to share. This software is provided "as is" with no expressed or implied warranty. I accept no liability for any damage or loss of business that this software may cause.

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 25 of 78 (Total in Forum: 78) (Refresh) FirstPrevNext

Edge drawing bug in XP Tsachi 5:21 8 Jun '09   The edges are not masked properly due to incorrect call to DrawThemeParentBackground. In the file XButtonXP.cpp(578) replace the call to ThemeHelper.DrawThemeParentBackground(::GetParent(m_hWnd), memDC.m_hDC, &rectItem); with ThemeHelper.DrawThemeParentBackground(m_hWnd, memDC.m_hDC, &rectItem); Sign In·View Thread·PermaLink 5.00/5 (2 votes) Rotated button li0000 3:50 5 Dec '08   Hi Can your button be rotated by any angle? Thanks, Sign In·View Thread·PermaLink Re: Rotated button Hans Dietrich 4:08 5 Dec '08   li0000 wrote: Can your button be rotated by any angle? I'm guessing that you mean, Can the button text be rotated. (You don't really want to rotate the whole button, because that would break mousing and clicking on the rotated button.) The answer is yes, but... you have to do some coding. Instead of just drawing the text to the DC, you would have to rotate it. There are other articles on CP that show how to rotate text in static controls, so if you grab that code, and plug it into XButtonXP, you would probably be pretty close. Best wishes, Hans [CodeProject Forum Guidelines] [How To Ask A Question] [My Articles] Sign In·View Thread·PermaLink Re: Rotated button li0000 11:50 5 Dec '08   Yes, I want to rotate whole button. Is there a way to do it? Thanks, Sign In·View Thread·PermaLink DrawThemeParentBackground() called improperly? Skyhawk 4:48 22 Aug '08   I suppose, the following code: ThemeHelper.DrawThemeParentBackground(::GetParent(m_hWnd), memDC.m_hDC, pRC); must be replaced to: ThemeHelper.DrawThemeParentBackground(m_hWnd, memDC.m_hDC, pRC); ...because it seems as if Visual Styles API finds a parent window by itself. Without doing these some visual glitches (e.g. black border, displayed around the button) may occur. Sign In·View Thread·PermaLink XP Theme is not used if font colur is changed Ashutosh Bhawasinka 21:29 15 Jul '08   I was just playing around with the demo/test exe you included. I noticed that after changing the font color for the button, XP theme is not used, no matter what style you set! Cheers, Ashutosh Sign In·View Thread·PermaLink Re: XP Theme is not used if font colur is changed Hans Dietrich 21:44 16 Jul '08   Ashutosh Bhawasinka wrote: I noticed that after changing the font color for the button, XP theme is not used, no matter what style you set! Take a look at Tips & Tricks #4. Best wishes, Hans [CodeProject Forum Guidelines] [How To Ask A Question] [My Articles] Sign In·View Thread·PermaLink Thanks for xButtonXP xinhaijulan 22:16 5 Jul '08   Thank you for your Class,I am enjoying it! Perfect!~ Sign In·View Thread·PermaLink Another edge drawing problem Johnnyfartpants 23:57 19 May '08   Hi Hans. I've discovered another 'edge drawing' problem which might be related to Anton's. Mine only happens when theming is NOT enabled. Suppose I have a dialog with 2 buttons. Whichever button has the input focus gets initially drawn in a strange state (almost 'half-way' between normal and toggled). Basically, the edges are too thin. This can be corrected by clicking the other button - at which point, both buttons now appear normal. But if I obscure the dialog by dragging something else to the foreground, the next time I bring the original dialog back to the foreground, the 'focussed' button again gets drawn in this peculiar, half-way state. The strange thing is that this doesn't happen with your test app. However, it happens with every other app where I've tried to use XButtonXP. I guess I must be missing out an important step somewhere but I can't see anything obviously wrong. I've created a small test project (VC++6) if you'd like to see the effect. John Sign In·View Thread·PermaLink Re: Another edge drawing problem Johnnyfartpants 9:34 24 May '08   Hi Hans, I don't know if you're still picking up comments about this project but I've realised what's causing the edge-drawing problem. It's simply that the button drop-shadow isn't being drawn. It seems to work in your test project, even though I can't find any code for drawing the drop-shadow. I just wondered if you might have any clues as to what's going on..? Apart from that one problem, XButtonXP seems to work perfectly. Sign In·View Thread·PermaLink Messagebox buttons Johnnyfartpants 0:37 19 May '08   Nice work Hans. I've been looking at this project as well as one of your other projects (XMessageBox). I just wondered if you'd ever thought to combine the two of them? i.e. a message box class whose buttons can have a customizable appearance? I thought about attempting to combine the projects myself but they aren't really written in a way that lends them to being easily combined. I just wondered if you knew of anything else that might serve this purpose? CodeProject seems to have a few customizable message box classes for C# but nothing for C++... Sign In·View Thread·PermaLink Edge around button filippov.anton 2:00 5 May '08   Hi, thanks for the class. But when I move mouse over button some times, button draws some edge rectangle around. How can I avoid this effect? Thanks. Sign In·View Thread·PermaLink Re: Edge around button Hans Dietrich 6:04 5 May '08   Please email me a screenshot of the demo program when this happens. Best wishes, Hans [CodeProject Forum Guidelines] [How To Ask A Question] [My Articles] Sign In·View Thread·PermaLink Bitmap Loading Member 1841091 23:45 3 May '08   Can you please extend this class to support loading bitmaps into buttons also. With Windows Vista having visual themes enabled, I can't get transparent background when I load bitmaps on buttons. They always show bitmap background as white squares. Sign In·View Thread·PermaLink Re: Bitmap Loading Hans Dietrich 2:33 4 May '08   Thanks for the suggestion, I'll try to include this in next update (not sure when that will be, I'm a little busy right now). Best wishes, Hans [CodeProject Forum Guidelines] [How To Ask A Question] [My Articles] Sign In·View Thread·PermaLink Why use toggle state instead of GetCheck/SetCheck Don M 8:11 8 Mar '08   Hans, It seems to me that SetToggleState and GetToggleState would be better called SetCheck and GetCheck. That way they would be compatible with the standard CButton class. Similarly, why don't you get the toggle style from the button BS_PUSHLIKE style, which is the way you declare a toggling pushbutton using standard controls, rather than having the new functions GetToggle and SetToggle. That way, when I convert an existing project from CButton to CXButtonXP, everything would work without other code changes. Other than this small issue, it works great. Thanks. Don Sign In·View Thread·PermaLink 2.00/5 (1 vote) Re: Why use toggle state instead of GetCheck/SetCheck Don M 9:06 8 Mar '08   Also, I believe that in the ON_BN_CLICKED handler for a button, CButton::GetCheck() returns the old value of the check status. That is, the handler is called before the button check status is changed. Your routine CXButtonXP::GetToggleState returns the new value of the state. That is, the handler is called after the toggle state is changed. Don Sign In·View Thread·PermaLink How to run the web browser in C++ reyd_todo 11:25 19 Jan '08   Hi, I'm a newbie in C++ and i'm just wondering if there's any function in C++ that can be used for Web Browsing. Sign In·View Thread·PermaLink 1.00/5 (1 vote) MouseMove while Button pressed rootdial 0:29 18 Sep '07   Hi, first of all a big THANKS for this fantastic class I love it. But i still got 1 problem i cant solve. Thats what i am doing: 1. Press the mouse over the button 2. while pressed drag the mouse over the button 3. release now....the button was not pressed, even if still over the button Any ideas how to fix it Sign In·View Thread·PermaLink Re: MouseMove while Button pressed rootdial 4:45 18 Sep '07   Now i use it like this and it does work... Hope things are well now void CXButtonXP::OnMouseMove(UINT nFlags, CPoint point) { CPoint pt(point); ClientToScreen(&pt); CRect rect; GetWindowRect(&rect); BOOL bMouseOverButton = m_bMouseOverButton; if (bMouseOverButton != m_bMouseOverButton) InvalidateRect(NULL); TRACKMOUSEEVENT csTME; csTME.cbSize = sizeof(csTME); csTME.dwFlags = TME_LEAVE; csTME.hwndTrack = m_hWnd; ::_TrackMouseEvent(&csTME); COddButton::OnMouseMove(nFlags, point); } Sign In·View Thread·PermaLink DLL? Johnny J. 1:15 22 Apr '07   Is this button available in a dll for the ones of us who are programming in VB and C#? Cheers, Johnny J. Sign In·View Thread·PermaLink 5.00/5 (1 vote) How to make a button "Selected" like XP "Add or Remove Programs" Super Garrison 13:23 22 Aug '06   It'll be really cool if you can make the buttons show as a group and have a "Selected" state on a button, like in "Add or Remove Programs" in XP. Carol Sign In·View Thread·PermaLink 1.00/5 (2 votes) Re: How to make a button "Selected" like XP "Add or Remove Programs" Johnnyfartpants 0:53 20 May '08   Hi Carol. If I understood you correctly, this can already be done using SetToggle() and SetToggleState(). SetToggle() indicates that the button is 'toggle-able' and you can then use SetToggleState() to determine whether it appears toggled or not toggled. They don't quite work in a group - but that would be quite simple to achieve programmatically. Sign In·View Thread·PermaLink Multiline jlatorref 1:44 14 Dec '05   Yes, I rate it 5. This is what I was looking for. In my project I needed to add multiline support to the button so I modified CXButtonXP::DrawItem(...) with this few lines and it seems it works: UINT uTextAlignment = DT_LEFT; if (m_hIcon == NULL) uTextAlignment = DT_CENTER; //uTextAlignment |= DT_SINGLELINE | DT_VCENTER | DT_WORDBREAK; uTextAlignment |= DT_VCENTER | ((GetStyle() & BS_MULTILINE) ? DT_WORDBREAK : DT_SINGLELINE); DT_SINGLELINE and DT_WORDBREAK are not compatible. Sign In·View Thread·PermaLink Another Approach Stephen C. Steel 8:59 24 Nov '05   If you just want buttons displaying icons and bitmaps to be rendered using the XP visual styles so they match buttons with text labels, but are otherwise happy with their behaviour, there is another approach. Instead of an owner-drawn button with the BS_OWNERDRAW style, you can process NM_CUSTOMDRAW messages. Under older version of Windows this has no effect (buttons don't get NM_CUSTOMDRAW messages with older libraries). The advantage of the NM_CUSTOMDRAW approach is that you're still using the Windows code for the buttons behavior, you're just customizing the apprearance. See my CodeProject article CImageButtonWithStyle - Buttons using Images with XP Visual Styles for a more complete description. Of course, if you want new features not offered by standard buttons (like both text and icons), and you want the new features to work under all Windows versions, you'll need to stick with using the BS_OWNERDRAW style. Stephen C. Steel Kerr Vayne Systems Ltd. Sign In·View Thread·PermaLink

Last Visit: 15:18 8 Nov '09     Last Update: 15:18 8 Nov '09 1234 Next »