XTrueColorToolBar - True-color toolbar with support for Office-style color button

• Download simple button demo project - 194 Kb
• Download drop-down button demo project - 204 Kb

Introduction

XTrueColorToolBar allows you to use true-color (24 bits per pixel) toolbars in your app by adding only one line of code. XTrueColorToolBar is based on Peter Lee's article Full-Featured 24-bit Color Toolbar. Peter describes his implementation in great detail, so I will not bother repeating it here. What I have done is wrap Peter's code in a C++ class, and add one additional feature: support for Office-style toolbar color button.

What's New in v1.1

In this version I have added drop-down button to demo project, after receiving several emails asking for this feature. You can still download version without drop-down button (simple button demo project).

Office-Style Color Button

Many applications have need to change text color, and they typically allow user to do this by means of toolbar button. For example, you might see this:

or this

This color button shows the currently selected color in a bar underneath the letter . In the demo app, the color button is displayed on the format toolbar:

The way this button works is that when you click the down arrow, a color picker will be displayed:

After you choose a color, the color button will be updated:

Now you can select some text:

and click the left side of the color button to apply the color you just picked to the selected text:

Notes on the Demo App

To illustrate how to use XTrueColorToolBar and color button, I used WordPad Sample as distributed in VS6. In demo app I have simply used standard CColorDialog MFC class, rather than one of the better-looking color pickers available here on CodeProject. The toolbars in the demo app are 16-color toolbars that I converted to 24-bit bitmaps with MS Paint.

Loading the True-color Toolbar

In the demo app mainfrm.cpp, this code loads the toolbar bitmap and creates the image list:

    // set up true-color image buttons
    m_wndFormatBar.AttachToolbarImages(IDB_FORMATBAR,
                                       8,   // no. of images in bitmap
                                       0);  // 0 = normal, 1 = disabled, 2 = hot

This is all you need to do if you just want true-color toolbar support with no color button.

Setting up the Color Button

The first step in using color button is to create image in toolbar bitmap. You must use a unique color for bar that appears below the letter . This unique color will be replaced by actual color that user selects. In demo app, bitmap for format toolbar (formatba.bmp) looks like:

The bar under the letter is red, which is not used anywhere else in bitmap. To ensure future uniqueness, the bar was created using RGB(255,0,1), as shown by one of my favorite utilities, HPS PixelColor:

After toolbar has been loaded (see Loading the True-color Toolbar), the following code will set initial color bar of color button:

    // create template for color button
    m_wndFormatBar.CreateTemplate(RGB(255,0,1));

    // init toolbar for drop-down color button and set initial color
    m_wndFormatBar.InitColorButton(ID_SET_TEXT_COLOR, RGB(0,0,0));

The call to CreateTemplate() is necessary only once for each toolbar. It creates a copy of toolbar image list (the actual toolbar image list is modified each time that user changes color) and sets mask color.

The call to InitColorButton() is necessary only once for each toolbar. The parameters to InitColorButton() are command ID for color button, and initial RGB color value.

When user clicks on down arrow of color button in demo app mainfrm.cpp, the message map entry

    ON_NOTIFY(TBN_DROPDOWN, ID_VIEW_FORMATBAR, OnColorDropDown)

calls OnColorDropDown(). which displays color picker and sets new color in color button:

//=============================================================================
void CMainFrame::OnColorDropDown(NMTOOLBAR *pNMTOOLBAR, LRESULT * /*pResult*/)
//=============================================================================
{
    if (pNMTOOLBAR && (pNMTOOLBAR->iItem == ID_SET_TEXT_COLOR))
    {
        TRACE(_T("OnColorDropDown - click on color button drop-down arrow\n"));
        
        // get color of color button (bar under letter A)
        COLORREF rgb = m_wndFormatBar.GetColorButton();

        CColorDialog dlg(rgb);

        // display color picker dialog
        if (dlg.DoModal() == IDOK)
        {
            rgb = dlg.GetColor();

            // update color of color button (bar under letter A)
            m_wndFormatBar.SetColorButton(ID_SET_TEXT_COLOR, rgb);
        }
    }
}

When user clicks on left side of color button in demo app mainfrm.cpp, the message map entry

    ON_COMMAND(ID_SET_TEXT_COLOR, OnTextColor)

calls OnTextColor(), which applies color to selected text:

//=============================================================================
void CMainFrame::OnTextColor()
//=============================================================================
{
    TRACE(_T("OnTextColor - click on color button left side\n"));

    // get color of color button (bar under letter A)
    COLORREF rgb = m_wndFormatBar.GetColorButton();

    CWordPadView * pView = (CWordPadView *) GetActiveView();

    // set new text color in current view
    if (pView)
        pView->SetColor(rgb);
}

Color Button Tooltip

If you want to display tooltip for color button, take a look at OnToolTipText() in demo app mainfrm.cpp. Note that the tooltip code makes use of XNamedColors.cpp and XNamedColors.h.

XTrueColorToolBar Implementation

The class CXTrueColorToolBar is derived from CToolBar, and adds these public functions:

Function	Description
void AttachToolbarImages(UINT nBitmapId, int nNumImages, int nToolbar)	Load toolbar images and attach them to toolbar.
BOOL CreateTemplate(COLORREF rgb)	Create copy of toolbar image list.
COLORREF GetBackgroundColor()	Retrieve background color (used for transparency) of toolbar bitmap.
COLORREF GetColorButton()	Retrieve color of color button.
void GetImageDimensions(int& nWidth, int& nHeight)	Retrieve width and height of image in bitmap.
COLORREF GetMaskColor()	Retrieve color of color bar under A.
void InitColorButton(UINT nCommandId, COLORREF rgb)	Init toolbar for drop-down color button and set initial color.
void SetBackgroundColor(COLORREF rgb)	Set background color (used for transparency) of toolbar bitmap. Default is RGB(192,192,192).
void SetColorButton(UINT nCommandId, COLORREF rgb)	Set color of color button. Default is RGB(0,0,0).
void SetImageDimensions(int nWidth, int nHeight)	Set width and height of image in bitmap. Default is 16x16.
void SetMaskColor(COLORREF rgb)	Set color of color bar under A. Must be unique in toolbar. Default is RGB(0,0,1).

How To Use

Follow these steps to integrate XTrueColorToolBar into your app:

Step 1: Add XTrueColorToolBar Files

Add following files to your project:

• XTrueColorToolBar.cpp
• XTrueColorToolBar.h

Step 2: Create True-color Toolbar with (Optional) Color Button

I used MS Paint to replace existing color button image in demo app toolbar's bitmap. I also used Paint to convert bitmap to 24 bpp:

Step 3: Define CXTrueColorToolBar Toolbar

Usually in SDI or MDI app you will find toolbar declared in mainfrm.h. In the demo app, you will see m_wndFormatBar in mainfrm.h:

    CFormatBar  m_wndFormatBar;

I changed class CFormatBar (declared in formatba.h) to the following:

    class CFormatBar : public CXTrueColorToolBar

In this case, the header file XTrueColorToolBar.h is included in formatba.h.

Step 4: Initialize CXTrueColorToolBar Toolbar

As shown above in Loading the True-color Toolbar and Setting up the Color Button, you should initialize CXTrueColorToolBar toolbar.

Summary

XTrueColorToolBar provides easy way to transition GUI to new MFC UI controls provided in VS2008, which will fully support Office-style color picker with split button:

References

• Full-Featured 24-bit Color Toolbar by Peter Lee.
• CToolBar MFC class.
• HPS PixelColor utility.

Revision History

Version 1.1 - 2007 December 28

• Added support for drop-down button

Version 1.0 - 2007 December 17

• 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   Search Messages    Layout Expand All MessagesThread ViewNo Javascript (slow)No Javascript Preview    Per page 102550

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

Great Article - But small bug. shazzababs 5:03 11 Feb '08   This was great, and just what I needed. However there is a small bug in AttachToolbarImages which means that only the last set of images supplied are used with the toolbar. This means that the image doesn't change when the buttons are disabled. I have modified it as follows (and added an image list for each nToolbar type): //================================================================== // load the high color toolbar images and attach them to toolbar void CXTrueColorToolBar::AttachToolbarImages (UINT nBitmapId, int nNumImages, int nToolbar) // 0 = normal, 1 = disabled, 2 = hot //==================================================================== { ASSERT(nNumImages > 0); m_nNumImages = nNumImages; // make true-color image list for the bitmap // get the toolbar control associated with the CToolbar object CToolBarCtrl& ctrl = GetToolBarCtrl(); // attach the image list to the toolbar control switch (nToolbar) { default: case 0: { if (m_TrueColorImagesNorm.GetSafeHandle()) m_TrueColorImagesNorm.DeleteImageList(); MakeToolbarImageList(nBitmapId, m_TrueColorImagesNorm); ASSERT(m_TrueColorImagesNorm.GetSafeHandle()); ctrl.SetImageList(&m_TrueColorImagesNorm); } break; case 1: { if (m_TrueColorImagesCold.GetSafeHandle()) m_TrueColorImagesCold.DeleteImageList(); MakeToolbarImageList(nBitmapId, m_TrueColorImagesCold); ASSERT(m_TrueColorImagesCold.GetSafeHandle()); ctrl.SetDisabledImageList(&m_TrueColorImagesCold); } break; case 2: { if (m_TrueColorImagesHot.GetSafeHandle()) m_TrueColorImagesHot.DeleteImageList(); MakeToolbarImageList(nBitmapId, m_TrueColorImagesHot); ASSERT(m_TrueColorImagesHot.GetSafeHandle()); ctrl.SetHotImageList(&m_TrueColorImagesHot); } break; } } Sign In·View Thread·PermaLink Re: Great Article - But small bug. Hans Dietrich 8:13 11 Feb '08   Thanks! Best wishes, Hans [CodeProject Forum Guidelines] [How To Ask A Question] [My Articles] Sign In·View Thread·PermaLink wonderful! code_discuss 3:55 13 Jan '08   I just need it in my code Sign In·View Thread·PermaLink

Last Visit: Tuesday, December 2, 2008 6:44 PM     Last Update:Tuesday, December 2, 2008 6:44 PM