Click here to Skip to main content
13,297,547 members (47,060 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


15 bookmarked
Posted 30 Apr 2009

Editing Ribbon Bar Images

, 30 Apr 2009
Rate this:
Please Sign up or sign in to vote.
How to edit Ribbon bar images

If you’ve installed the Visual C++ 2008 Feature Pack or upgraded to Visual Studio 2008 Service Pack 1, you may already be working with the new ribbon bar control.

This control provides many new user-interface elements and cool new images. However, if you are like many people, you may have wondered how you can change those images. Even with all its powerful resource editing features, the current version of Visual Studio does not support editing the type of images used by the ribbon bar. You can open them in Visual Studio, but they will appear with strange black areas and will not be editable.

Ribbon Bar Images

So what’s different about the images used in the ribbon bar compared to those images used in icons, cursors, and regular bitmaps? Two things: The color depth and the alpha channel. Ribbon bar images use 32 bits per pixel to specify color values. This allows for images with a much greater color depth.

The alpha channel is a value that specifies the transparency of a pixel. Color values have historically used a byte each to specify red, green, and blue color values. In a 32-bit integer, this leaves a fourth byte available for the alpha channel. This means that we can specify the transparency of a given pixel with the same resolution we specify any of the other color components.

The alpha channel is great for smoothing the edges of images. Sometimes, bitmap edges can look jagged when dark outlines have awkward correlation with the underlying pixels. These edges can be smoothed somewhat by adding gray pixels to smooth the transition from black image pixels to white background pixels. But what happens if the background is black? The alpha channel allows you to fade the edge of an image into any background color. The result is much smoother outlines and transparent areas regardless of the background.


So if you can’t use Visual Studio, you’ll need another tool. Fortunately, Axialis has made arrangements with Microsoft to provide a free version of their IconWorkshop. This is a great little program. In fact, I registered the full version quite some time ago.

IconWorkshop has a recently added feature that displays an image strip bitmap as a collection of separate images, similar to how the toolbar editor does in Visual Studio. This makes it very easy to work with image strips for ribbon bars. I should point out that most of the ribbon images I put together these days are either some of those provided with Visual Studio, created using high-end graphics programs, or even imported from photos. IconWorkshop is great for importing various image types into a single image strip, even if you don’t use it to actually create the original images.

Application Button

There are two primary types of ribbon images that you’ll want to change. The first is the application or “jewel”. This is the image that appears in the round button near the upper left corner of the main window. By default, CMainFrame::InitializeRibbon() initializes this button to use the bitmap resource with the ID IDB_MAIN.

// Init main button:

Default initialization of Ribbon application button

Note that when you load main.bmp (IDB_MAIN) in IconWorkshop, it will appear as an image strip with a single image. Don’t let that throw you. Just edit the image and save it and you’ll have a new application button image.

Command Images

The other primary type of images are for the actual ribbon commands. As described before, these images are stored as image strips where a single bitmap contains a number of different images. The image strip is set when a ribbon bar category, or tab, is created. Two image strips are specified: one for large images and one for small images. For example, the default code specifies the image strip bitmaps with the IDs IDB_WRITESMALL and IDB_WRITELARGE when creating the Home category. If you open either of these bitmaps, you can see the images they contain.

// Add "Home" category with "Clipboard" panel:
bNameValid = strTemp.LoadString(IDS_RIBBON_HOME);
CMFCRibbonCategory* pCategoryHome = m_wndRibbonBar.AddCategory(strTemp,

Default Initialization of Category Image Strip

When a ribbon element such as CMFCRibbonButton is created, you specify the zero-based index for the image to be used with zero specifying the left-most image. You can specify two indexes, one for the index into the small image strip, and one for the index into the large image strip. If you only specify the index for the small image, then that element will only use the small image.


So there are a few new things to learn here and a few more tool that you’ll need.

Although the ribbon bar can seem a bit awkward to experienced users accustomed to using toolbars and pull-down menus, we’re told that research shows the ribbon bar layout to be much easier for most users to learn.

When done well, ribbon bars can look great and support some really cool images. This is definitely something to get on top of if you are designing modern interfaces in MFC.


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


About the Author

Jonathan Wood
Black Belt Coder
United States United States
Jonathan Wood has been a software developer for more years than he cares to admit. His current focus is on using C# and ASP.NET MVC to develop website applications, and C++ and MFC to develop desktop applications. His consulting company, SoftCircuits, is known for producing various commercial and shareware products.

Having an entrepreneurial spirit, Jonathan also has a number of other online businesses that he built from scratch such as Black Belt Coder, SC Web Group and others. He also has expertise in designing brands (including graphics and logos) and search-engine optimization (SEO).

Jonathan is always willing to discuss consulting work or joint ventures with people looking to develop software or online businesses.

You may also be interested in...

Comments and Discussions

QuestionCreating button dynamically with smallicon Pin
Omar.Pessoa15-Apr-16 10:59
memberOmar.Pessoa15-Apr-16 10:59 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171207.1 | Last Updated 30 Apr 2009
Article Copyright 2009 by Jonathan Wood
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid