Shade images to look like an active icon

CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

When you select an icon in Windows 95 or NT 4.0, the icon appearance is changed to indicate that it is selected. What Windows does is that it turns every other pixel in the image to the highlight color which is usually blue.

The ShadeRect() function shown below executes the same effect on any rectangular area in the device context. It uses GetSysColor(COLOR_HIGHLIGHT) to determine what color to use but you can modify the function so that it takes in the color as one of the arguments. Doing so will allow you to give the image a disabled look when you specify the COLOR_GRAYTEXT color.

Here’s what the function does:

1. Define an array of WORD to hold the brush pattern. The hex digit 5 corresponds to the binary digits 0101 and the hex digit ‘a’ corresponds to the binary 1010.
2. Create a 8×8 monochrome bitmap which uses our brush pattern.
3. Create a pattern brush from the bitmap and select it into the device context.
4. Black out every other pixel in the image held by the device context. Since the pattern brush is already selected into the device context we use PatBlt() and an AND raster operation to black out every other pixel. For every foreground pixel in the brush, the PatBlt() function takes the DCs text color and ANDs it with a corresponding pixel in the DC. Since we set the text color to black (all zeros), the result is black. Similarly, for every background pixel in the brush, the DCs background color is combined with the corresponding pixel in the DC. Since the background is white (all ones), the result is that the destination pixel is unchanged.
5. Change the blacked out pixel to the highlight color. The logic used is similar to that used in step 4, only, this time we use an OR operation. Black ORed with an other color is the other color.
6. Black out every other pixel in the image held by the device context. Since the pattern brush is already selected into the device context we use PatBlt() and an AND raster operation to black out every other pixel. For every foreground pixel in the brush, the PatBlt() function takes the DCs text color and ANDs it with a corresponding pixel in the DC. Since we set the text color to black (all zeros), the result is black. Similarly, for every background pixel in the brush, the DCs background color is combined with the corresponding pixel in the DC. Since the background is white (all ones), the result is that the destination pixel is unchanged.

void ShadeRect( CDC *pDC, CRect& rect )
{
	// Bit pattern for a monochrome brush with every
	// other pixel turned off
	WORD Bits[8] = { 0x0055, 0x00aa, 0x0055, 0x00aa,
			 0x0055, 0x00aa, 0x0055, 0x00aa };

	CBitmap bmBrush;
	CBrush brush;

	// Need a monochrome pattern bitmap
	bmBrush.CreateBitmap( 8, 8, 1, 1, &Bits );

	// Create the pattern brush
	brush.CreatePatternBrush( &bmBrush );

	CBrush *pOldBrush = pDC->SelectObject( &brush );

	// Turn every other pixel to black
	COLORREF clrBk = pDC->SetBkColor( RGB(255,255,255) );
	COLORREF clrText = pDC->SetTextColor( RGB(0,0,0) );
	// 0x00A000C9 is the ROP code to AND the brush with the destination
	pDC->PatBlt(rect.left, rect.top, rect.Width(), rect.Height(),
		(DWORD)0x00A000C9);			//DPa - raster code

	pDC->SetBkColor( RGB(0,0,0) );
	pDC->SetTextColor( GetSysColor(COLOR_HIGHLIGHT) );
	// 0x00FA0089 is the ROP code to OR the brush with the destination
	pDC->PatBlt(rect.left, rect.top, rect.Width(), rect.Height(),
		(DWORD)0x00FA0089);			//DPo - raster code

	// Restore the device context
	pDC->SelectObject( pOldBrush );
	pDC->SetBkColor( clrBk );
	pDC->SetTextColor( clrText );
}