Why is DrawFocusRect affected by the Text color?

Question

I was getting weird results with DrawFocusRect() in a TreeView custom draw routine. The outline was somewhat different, some were almost a solid line and others were dashed. I found out that it's the HDC SetTextColor() value that is affecting it. Even though the selection bars fill color is exactly the same, as I changed various text colors, indeed the drawn outline was different.

I ended up with setting the text color to match the fill color of the highlight bar which gives the same outline the default tree drawing routine gives.

Is this not documented anywhere? Is there even more to it?

Thanks?

Answer 1

DrawFocusRect draws the focus rectangle with a bitwise XOR operation. This is hinted at in the SDK documentation, under the "Remarks" section, where it says:

Because DrawFocusRect is an XOR function, calling it a second time with the same rectangle removes the rectangle from the screen.

This is the whole advantage of DrawFocusRect . It means that you (or the window manager) can draw the focus rectangle and erase it whenever needed without redrawing the entire underlying contents . (This was a big performance win in the era before double-buffering, gobs of memory, fast graphic cards, etc.) The focus rectangle is drawn wherever it needs to be drawn, then, when it needs to be erased, it is just drawn again on top of where it was drawn the first time. The only thing that you (or the window manager) need to keep track of is the coordinates of the rectangle.

You can achieve exactly the same effect as DrawFocusRect by using code like the following to draw an XOR rectangle manually:

void DrawXorRect(HDC hDC, const RECT* prc)
{
    // (1)
    static const WORD pattern[] = { 0x5555, 0xAAAA,
                                    0x5555, 0xAAAA,
                                    0x5555, 0xAAAA,
                                    0x5555, 0xAAAA,
                                  };
    HBITMAP hbmpPattern = CreateBitmap(8, 8, 1, 1, pattern);

    // (2)
    HBRUSH hbrPattern = CreatePatternBrush(hbmpPattern);

    // (3)
    HBRUSH hbrOriginal = (HBRUSH)SelectObject(hDC, hbrPattern);

    // (4)
    UINT cx;
    UINT cy;
    SystemParametersInfo(SPI_GETFOCUSBORDERWIDTH , 0, &cx, 0);
    SystemParametersInfo(SPI_GETFOCUSBORDERHEIGHT, 0, &cy, 0);

    // (5)
    PatBlt(hDC, prc->left      , prc->top        , prc->right - prc->left, cy                               , PATINVERT);  // top
    PatBlt(hDC, prc->left      , prc->bottom - cy, prc->right - prc->left, cy                               , PATINVERT);  // bottom
    PatBlt(hDC, prc->left      , prc->top    + cy, cx                    , prc->bottom - prc->top - (cy * 2), PATINVERT);  // left
    PatBlt(hDC, prc->right - cx, prc->top    + cy, cx                    , prc->bottom - prc->top - (cy * 2), PATINVERT);  // right

    // (6)
    SelectObject(hDC, hbrOriginal);
    DeleteObject(hbrPattern);
    DeleteObject(hbmpPattern);
}

Error-checking has been elided for brevity, but this code does work, and it does mimic DrawFocusRect exactly. (Yes, I even tested it.)

Let's go through the code, step by step, to see what it does, how it works, and what that means:

1. First, it creates a monochrome 8×8 bitmap ( CreateBitmap() ) consisting of an alternating pattern of bits ( pattern[] ): on, off, on, off, etc. (If you don't know why, open up the Windows calculator, switch it to hex mode, and paste in the hex values that comprise the pattern. Look at the bits: see how they alternate between 0s and 1s? Now, imagine creating a bitmap from that.)

2. Then, it uses that bitmap to create a brush ( CreatePatternBrush() ).

3. Next, it selects the newly-created brush into the DC ( SelectObject() ). It saves the return value, which is the brush that was originally selected in the DC because it needs to restore that later.

4. With all the drawing objects created, it calls SystemParametersInfo() to retrieve the width ( SPI_GETFOCUSBORDER_WIDTH ) and height ( SPI_GETFOCUSBORDERHEIGHT ) of the focus rectangle.

5. Armed with all the objects and information needed to do the drawing, it blits each of the 4 sides of the rectangle using the PATINVERT raster operation. What is PATINVERT ?

   Combines the colors of the specified pattern with the colors of the destination rectangle by using the Boolean XOR operator.

6. Finally, it cleans up after itself by restoring the originally-selected brush and deleting the drawing objects that it created.

So, basically, the focus rectangle is drawn by XORing an alternating pattern of on-and-off pixels (a checkerboard pattern) with the contents of the device context (ie, whatever is on the screen). That's what PATINVERT does. But wait—we know what the colors of the device context are, but what are the colors of the brush? Well, remember that the brush was created from a monochrome bitmap. The SDK documentation for CreateBitmap says:

If the bitmap is monochrome, zeros represent the foreground color and ones represent the background color for the destination device context.

Aha, So when the brush's bitmap pattern is 0, the brush's color is your device context's foreground color ( SetTextColor ); when the brush's bitmap pattern is 1, the brush's color is your device context's background color ( SetBackColor ). This is how the foreground and background color of the device context come into play. These colors are merged together, via an XOR operation, with the color of the original pixel in the device context.

When using DrawFocusRect , your DC's foreground and background colors should be black and white, respectively. This is the default foreground and background colors for a device context, so if you haven't called the SetTextColor or SetBackColor functions, these will be its colors. If you have called either of those functions, you either need to:

• Save the value returned by each and restore it later, once you are finished drawing, but before you call DrawFocusRect (just as the code above did with the return value of the first call to SelectObject ), or

• Call the SaveDC function at the beginning of your drawing code to save its state (by pushing it onto a stack internally), and then call the RestoreDC function at the end of your drawing code to restore it to its original state.

When the DC's foreground and background colors are black and white, respectively, then the DrawFocusRect function works as it is expected to. This is what you need to do if you want to match how the window manager draws focus rectangles around controls. (And you do, obviously, want to do this!)

If, for some reason, you don't want to reset the DC's colors, then you won't be able to use DrawFocusRect . You'll need to take another tack where you control the colors yourself. For example, you could create a color (non-monochrome) bitmap, with its colors fixed as white and black, and then create a brush from that. Alternatively, you could consider drawing with a pen and the R2_NOT ROP code; eg:

void DrawXorRect2(HDC hDC, const RECT* prc)
{
    LOGBRUSH lb;
    lb.lbStyle = BS_SOLID;
    lb.lbColor = RGB(0, 0, 0);  // black

    HPEN hpenNew = ExtCreatePen(PS_COSMETIC | PS_ALTERNATE, 1, &lb, 0, NULL);
    HPEN hpenOld = (HPEN)SelectObject(hDC, hpenNew);

    int ropOld  = SetROP2(hDC, R2_NOT);
    int modeOld = SetBkMode(hDC, TRANSPARENT); 

    HBRUSH hbrOriginal = (HBRUSH)SelectObject(hDC, GetStockObject(NULL_BRUSH));

    Rectangle(hDC, prc->left, prc->top, prc->right, prc->bottom);

    SelectObject(hDC, hbrOriginal);
    SetBkMode(hDC, modeOld);
    SetROP2(hDC, ropOld);
    SelectObject(hDC, hpenOld);
    DeleteObject(hpenNew);
}

I'm not sure this is actually much better, as it still requires that you set attributes of the DC—namely, the ROP and the background mode. If you're going to set and restore attributes of the DC, why not just set and restore the foreground and background colors? Plus, this pen-based implementation has the additional disadvantage of not respecting the user's preference for the thickness of the focus rectangle, which is an accessibility bug. Also, the pixel grid is slightly different here compared to the built-in DrawFocusRect , but that is, admittedly, an extremely minor drawback.

Another approach would be to create a PS_GEOMETRIC pen with a custom pattern ( PS_USERSTYLE , to make it alternating), and setting the ROP style to R2_XORPEN / R2_NOTXORPEN :

void DrawXorRect3(HDC hDC, const RECT* prc)
{
    UINT cx;
    UINT cy;
    SystemParametersInfo(SPI_GETFOCUSBORDERWIDTH , 0, &cx, 0);
    SystemParametersInfo(SPI_GETFOCUSBORDERHEIGHT, 0, &cy, 0);
    
    LOGBRUSH lb;
    lb.lbStyle = BS_SOLID;
    lb.lbColor = RGB(0, 0, 0);
    
    static const DWORD pattern[] = { 0, 2 };
    HPEN hpenWidth  = ExtCreatePen(PS_GEOMETRIC | PS_USERSTYLE, cx, &lb, 2, pattern);
    HPEN hpenHeight = ExtCreatePen(PS_GEOMETRIC | PS_USERSTYLE, cy, &lb, 2, pattern);
    
    int ropOriginal = SetROP2(hDC, R2_NOTXORPEN);
    
    HPEN hpenOriginal = (HPEN)SelectObject(hDC, hpenHeight);
    MoveToEx(hDC, prc->left      , prc->top              , NULL);  // \ top
    LineTo  (hDC, prc->right     , prc->top              );        // / edge
    MoveToEx(hDC, prc->left  + cx, prc->bottom - cy      , NULL);  // \ bottom
    LineTo  (hDC, prc->right - cx, prc->bottom - cy      );        // / edge
    
    SelectObject(hDC, hpenWidth);
    MoveToEx(hDC, prc->left      , prc->top    + (cy * 2), NULL);  // \ left
    LineTo  (hDC, prc->left      , prc->bottom - cy      );        // / edge
    MoveToEx(hDC, prc->right - cx, prc->top    + cy      , NULL);  // \ right
    LineTo  (hDC, prc->right - cx, prc->bottom           );        // / edge
    
    SelectObject(hDC, hpenOriginal);
    SetROP2(hDC, ropOriginal);
    
    DeleteObject(hpenHeight);
    DeleteObject(hpenWidth);
}

This addresses the accessibility bug and makes the pixel pattern match that produced by DrawFocusRect , at the expense of creating an additional pen. It also, like the second attempt, works as expected regardless of what the DC's foreground or background colors are set to.

Note that all of these implementations of DrawXorRect become more efficient if you create the required drawing objects once and cache them, instead of creating and destroying them each time. This is surely a big part of the reason (along with convenience—who wants to write all this ugly code?) why the window manager provides the DrawFocusRect function for applications to use.