This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
I'm trying to add a button with a custom transparent bitmap to a toolbar in my Win32 C++ app. I'm using the following code to create and populate the toolbar.
toolBar = CreateWindowEx(0, TOOLBARCLASSNAME, nullptr, WS_CHILD, 0, 0, 0, 0, hwnd, nullptr, appInstance, nullptr);
SendMessage(toolBar, TB_BUTTONSTRUCTSIZE, sizeof(TBBUTTON), 0);
SendMessage(toolBar, TB_SETBITMAPSIZE, 0, MAKELPARAM(24, 24));
const auto bgColor = GetSysColor(COLOR_BTNFACE);
COLORMAP colorMap{};
colorMap.from = RGB(255, 255, 255);
colorMap.to = bgColor;
mappedBitmap = CreateMappedBitmap(appInstance, IDB_NEW, 0, &colorMap, 1);
TBADDBITMAP tbAddBitmap{ nullptr, reinterpret_cast<UINT_PTR>(mappedBitmap) };
SendMessage(toolBar, TB_ADDBITMAP, 1, reinterpret_cast<LPARAM>(&tbAddBitmap));
TBBUTTON buttons[1] =
{
{0, 1000, TBSTATE_ENABLED, BTNS_AUTOSIZE, {0}, 0, 0}
};
SendMessage(toolBar, TB_ADDBUTTONS, 1, reinterpret_cast<LPARAM>(&buttons));
SendMessage(toolBar, TB_AUTOSIZE, 0, 0);
ShowWindow(toolBar, TRUE);
When this code executes, the image appears, but without a transparent background as seen in the following screenshot.
According to the resource editor, the bitmap I'm trying to map has 8-bit color, which means no more than 256 colors. According to the documentation for the "CreateMappedBitmap()" function, it will work on images with 256 or fewer colors. Why is it not working for me?
BTW, it is common to specify magenta -- RGB(255, 0, 255) as the bitmap color to be replaced for transparency. The CreateMappedBitmap function seems to be picky if white (RGB(255, 255, 255)) is used. When the bitmap is 4bpp it works fine, but it doesn't work as expected for an 8bpp bitmap.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(179.20000000000002, 34%, 27%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EXY%3C/text%3E%3C/svg%3E)
@DaveF Any updates?
The images I'm trying to use are BMP files that I converted from GIF files. I took one of the orignal GIF files, opened it in Paint.NET, added a background layer filled with magenta, and exported it to an 8bpp BMP file. When using that file and specifying magenta as the color to map from, it still didn't show up as transparent. I eventually gave up on using straight Win32 for my app and switched to wxWidgets since it supports using XPM files as the sources for toolbar button bitmaps.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(124.80000000000001, 38%, 22%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ERH%3C/text%3E%3C/svg%3E)
You can see an example of an MFC custom control for displaying a PNG image with transparency in this article by Michael Haephrati.
The usual way is with a masked ImageList
For example with this bitmap with magenta for transparent color : 
by replacing TB_ADDBITMAP
by :
HIMAGELIST hImageList = ImageList_Create(32, 32, ILC_MASK | ILC_COLORDDB, 1, 1);
ImageList_AddMasked(hImageList, mappedBitmap, RGB(255, 0, 255));
SendMessage(toolBar, TB_SETIMAGELIST, 0, (LPARAM)hImageList);
I get, for 1 Button :
You may not be using the correct color to map the bitmap background. I created a bitmap with a black background that looked like this in the resource editor -
Then using your posted code -
const auto bgColor = GetSysColor(COLOR_BTNFACE);
COLORMAP colorMap{};
colorMap.from = RGB(0, 0, 0);
colorMap.to = bgColor;
And the results -
