2019年4月16日 星期二

Making MFC Ribbon bitmap file with Pixelformer



In short, use Pixelformer instead of mspaint.exe for Windows C++ Ribbon bmp file



http://programmingnode.blogspot.com/2016/04/making-mfc-ribbon-bitmap-file.html

___________________________________________________________________________



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.

沒有留言:

張貼留言

2023 Promox on Morefine N6000 16GB 512GB

2023 Promox on Morefine N6000 16GB 512GB Software Etcher 100MB (not but can be rufus-4.3.exe 1.4MB) Proxmox VE 7.4 ISO Installer (1st ISO re...