Draw a line next to word in WinAPI

Question

How do I draw a line like this that is right next to a word like "Counts", in WinAPI with C?

Answer 1

Using Dialog Resources

---

Create a static text control with no text that is 1 or 2 pixels in height, turn on the border ( WS_BORDER ), and set its style to Static Edge ( WS_EX_STATICEDGE ). Then create a static text control with the word "Counts" in it on top of that. Then use CreateDialog() or DialogBox() to show the dialog box.

IDD_DIALOG1 DIALOGEX 0, 0, 172, 63
STYLE DS_SETFONT | DS_MODALFRAME | DS_FIXEDSYS | WS_POPUP | WS_CAPTION | WS_SYSMENU
CAPTION "Dialog"
FONT 8, "MS Shell Dlg", 400, 0, 0x1
BEGIN
    LTEXT           "",IDC_STATIC,6,12,156,1,WS_BORDER,WS_EX_STATICEDGE
    LTEXT           "Counts ",IDC_STATIC,6,8,26,8
END

Note: This is verbatim what Visual Studio generated using the dialog designer.

Creating Static Controls Using CreateWindow() (as suggested by Jonathan Potter)

---

LRESULT OnCreate( HWND hWnd, LPCREATESTRUCT lpCreateStruct )
{
    // Get default gui font
    NONCLIENTMETRICS metrics;
    metrics.cbSize = sizeof(NONCLIENTMETRICS);
    SystemParametersInfo(SPI_GETNONCLIENTMETRICS, sizeof(NONCLIENTMETRICS), &metrics, NULL);
    HFONT hFont = CreateFontIndirect(&metrics.lfMessageFont);

    // Create the line
    CreateWindowEx(WS_EX_STATICEDGE, _T("STATIC"), NULL, WS_CHILD|WS_VISIBLE|WS_BORDER, 
        10, 17, 280, 1, hWnd, NULL, lpCreateStruct->hInstance, NULL);

    // Create the Counts label
    HWND hwndCounts = CreateWindow(_T("STATIC"), _T("Counts "), WS_CHILD|WS_VISIBLE,
        10, 10, 50, 26, hWnd, NULL, lpCreateStruct->hInstance, NULL);

    // Apply the default gui font
    SendMessage(hwndCounts, WM_SETFONT, (WPARAM)hFont, TRUE);

    // Cleanup the font object
    DeleteObject(hFont);
}

Drawing manually on the WM_PAINT event

---

void OnPaint( HWND hWnd )
{

    // Get the default font
    NONCLIENTMETRICS metrics;
    metrics.cbSize = sizeof(NONCLIENTMETRICS);
    SystemParametersInfo(SPI_GETNONCLIENTMETRICS, sizeof(NONCLIENTMETRICS), &metrics, NULL);
    HFONT hFont = CreateFontIndirect(&metrics.lfMessageFont);

    // Setup HDC
    RECT rect;
    PAINTSTRUCT ps;
    HDC hdc = BeginPaint(hWnd, &ps);

    // Select the default font
    SelectObject(hdc, hFont);

    // Draw the line using the button shadow
    SelectObject(hdc, GetStockObject(DC_PEN));
    SetDCPenColor(hdc, GetSysColor(COLOR_BTNSHADOW));
    MoveToEx(hdc, 10, 17, NULL);
    LineTo(hdc, 280, 17);

    // Draw the word Counts overtop of the line
    SetRect(&rect, 10, 10, 280, 22);
    SetTextColor(hdc, GetSysColor(COLOR_BTNTEXT));
    SetBkColor(hdc, GetSysColor(COLOR_BTNFACE));
    DrawText(hdc, TEXT("Counts "), -1, &rect, DT_NOCLIP);

    // Cleanup the font object
    DeleteObject(hFont);

    // Quit painting
    EndPaint(hWnd, &ps);
}

Note: Something I did not account for in this example is the height of the default font. You will want to adjust the code for that.

Here is a screenshot of the output of this method.

In your example, it looked like a single one pixel line, so that's what I drew, but if you'd like to make the line look more like a 'Fixed 3D' or 'lowered bevel line' (which is what the group box tends to draw for it's border line), then you can draw another line below it with the button highlight color.

SetDCPenColor(hdc, GetSysColor(COLOR_BTNHIGHLIGHT));
MoveToEx(hdc, 10, 18, NULL);
LineTo(hdc, 280, 18);

As pointed out by Ben Voigt, it might be better to do this with DrawEdge though.

RECT line;
SetRect(&line, 10, 17, 280,17);
DrawEdge(hdc, &line, EDGE_ETCHED, BF_TOP );

Creating a Group Box Control (suggested by Hans Passant)

---

Hans Passant's suggestion of doing this with a Group Box did work when I tested it. It still drew a rectangle , and when you enabled visual styles it was very difficult to see . Nevertheless, this should get you started if you want to give it a go.

HWND hwndGroup = CreateWindow(_T("Button"), _T("Counts "), 
    WS_CHILD|WS_VISIBLE|BS_GROUPBOX, 10, 10, 280, 2, hWnd, NULL, 
    lpCreateStruct->hInstance, NULL);
SendMessage(hwndGroup, WM_SETFONT, (WPARAM)hFont, TRUE);

Additional Note

---

Something else I would like to suggest is that you use can use Spy++ which comes with Visual Studio to analyze the window you are looking at. This will tell you at the very least if it's a child control, or whether they are painting it manually. If it's a child control you will also be able to see the rectangle and styles that are applied to it, as well lots of additional information.