Tuesday, April 5, 2016

Making MFC Ribbon bitmap file.

Despite there are lots of programming framework these days, it seems MFC never improve its capability regarding UI components since Visual Studio 6.0.
But I was wrong, Microsoft provided nice new UI features since Visual Studio 2010 release.
One of them is the Ribbon feature.
I am satisfied with usability of Ribbon and easy to use, actually easy to program.

When I tried to change default bitmap image for Ribbon, soon I found there was not enough description about it. Ribbon couldn't display my modified bmp file or show background black.
Here I wrote down simple recipe how to make bitmap file for MFC Ribbon.

The bitmap file format used in Ribbon is 32-bit ARGB format.
The ARGB means that each pixel consists of 4 bytes of color values, Alpha, Red, Green, Blue. The Alpha value affects transparency of a pixel.
The ARGB bitmap isn't popular format because this format doesn't support compression unlike PNG or GIF format. Only few editors can produce 32-bit ARGB format that the Ribbon can recognize.

After minutes of googling, I found very good graphic editor called Pixelformer.
I want to set setting icon beside of button in Panel within a Category contained in a MFCRibbonBar. So I need to draw setting icon in default bitmap file, called writesmall.bmp.

The first step is to open writesmall.bmp file in res folder of my project.


The Ribbon uses alpha value for transparency instead of mask RGB value.
So I needed to change colors of pixel and alpha values of pixel accordingly.

Surprisingly Pixelformer supply a way of that. There were menu for  Normal, Color Only, Alpha Only in View menu. User can change alpha value manually.

The second step is to get 16x16 setting image.
I got a free PNG image file for setting icon from https://www.iconfinder.com/.

The third step is to place setting image on to writesmall.bmp.
To copy the image it need to import the file into the writesmall.bmp editing through the menu, Image/Import.


And copy whole image and then paste it on the writesmall.bmp.
I think pasting should be done in the Normal view mode. I deleted area of pixels in the place where I put new image before pasting.

The forth step is to save as ARGB bitmap.
After image edit done, I exported it back to ARGB bitmap file.
It can be done through Image/Export menu. I show 32-bit ARGB option.


1 comment:

  1. Best casinos in the world to play blackjack, slots and video
    hari-hari-hari-hotel-casino-online-casinos-in-us · blackjack (blackjack) · roulette herzamanindir (no Blackjack Video Poker worrione · poormansguidetocasinogambling Video herzamanindir.com/ Poker · Video Poker · 출장샵 Video poker

    ReplyDelete