Click here to Skip to main content
15,861,168 members
Articles / Desktop Programming / MFC
Article

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

Rate me:
Please Sign up or sign in to vote.
4.69/5 (20 votes)
10 Jan 2008CPOL5 min read 72.5K   4.2K   63   7
XTrueColorToolBar is an MFC class based on CToolBar that provides support for true-color bitmaps, with optional support for an Office-style color picker button.

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:

screenshot

or this

screenshot

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

screenshot

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

screenshot

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

screenshot

Now you can select some text:

screenshot

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

screenshot

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 screenshot. This unique color will be replaced by actual color that user selects. In demo app, bitmap for format toolbar (formatba.bmp) looks like:

screenshot

The bar under the letter screenshot 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:

screenshot

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:

FunctionDescription
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

NOTE: For the above .cpp file, you must select Using precompiled headers in Visual Studio.

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:

screenshot

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:

screenshot

References

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Hans Dietrich Software
United States United States
I attended St. Michael's College of the University of Toronto, with the intention of becoming a priest. A friend in the University's Computer Science Department got me interested in programming, and I have been hooked ever since.

Recently, I have moved to Los Angeles where I am doing consulting and development work.

For consulting and custom software development, please see www.hdsoft.org.






Comments and Discussions

 
NewsIssue With Latest Version Pin
Rick York23-Jan-18 6:33
mveRick York23-Jan-18 6:33 
GeneralRe: Issue With Latest Version Pin
Rick York5-Jul-18 8:12
mveRick York5-Jul-18 8:12 
To answer my own question, the solution is don't call LoadBitmap as he describes in this article. When you don't it works just fine.
QuestionDisabled Toolbars Pin
Member 119453074-May-17 6:44
Member 119453074-May-17 6:44 
GeneralGreat Article - But small bug. Pin
shazzababs11-Feb-08 4:03
shazzababs11-Feb-08 4:03 
GeneralRe: Great Article - But small bug. Pin
Hans Dietrich11-Feb-08 7:13
mentorHans Dietrich11-Feb-08 7:13 
GeneralRe: Great Article - But small bug. Pin
Rick York9-Sep-11 12:25
mveRick York9-Sep-11 12:25 
Generalwonderful! Pin
code_discuss13-Jan-08 2:55
code_discuss13-Jan-08 2:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.