Group box và radio button

Ở bài này,chúng ta sẽ đi tìm hiểu về group box và radio button.

• Group box là 1 đường bao hình chữ nhật bao quanh các 1 bộ các control. Control thường các các radio button. Group box được đánh nhãn để mô tả về control này. Group control được dùng để nhóm các control cùng loại.
• Radio button là 1 loại button đặc biệt có thể lựa chọn nhưng không xóa được. Nó cho phép người dùng lựa chọn 1 trong nhóm các option.

#include <windows.h>

#define ID_BLUE 1
#define ID_YELLOW 2
#define ID_ORANGE 3

LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);

HINSTANCE g_hinst;
COLORREF g_color;

int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow)
{
    HWND hwnd;
    MSG  msg ;
    WNDCLASS wc = {0};
    wc.lpszClassName = TEXT("GroupBox");
    wc.hInstance     = hInstance ;
    wc.hbrBackground = GetSysColorBrush(COLOR_3DFACE);
    wc.lpfnWndProc   = WndProc ;
    wc.hCursor       = LoadCursor(0,IDC_ARROW);
    g_hinst = hInstance;
    RegisterClass(&wc);
    hwnd = CreateWindow(wc.lpszClassName, TEXT("GroupBox"), WS_OVERLAPPEDWINDOW | WS_VISIBLE, 100, 100, 300, 170, 0, 0, hInstance, 0);

    while( GetMessage(&msg, NULL, 0, 0)) 
    {
        DispatchMessage(&msg);
    }
    return (int) msg.wParam;
}

LRESULT CALLBACK WndProc( HWND hwnd, UINT msg, WPARAM wParam, LPARAM lParam )
{
    HDC hdc;
    PAINTSTRUCT ps;
    HBRUSH hBrush, holdBrush;
    HPEN hPen, holdPen;

    switch(msg)
    {
    case WM_CREATE:
        CreateWindow(TEXT("button"), TEXT("Choose Color"), WS_CHILD | WS_VISIBLE | BS_GROUPBOX, 10, 10, 120, 110, hwnd, (HMENU) 0, g_hinst, NULL);
        
        CreateWindow(TEXT("button"), TEXT("Blue"), WS_CHILD | WS_VISIBLE | BS_AUTORADIOBUTTON, 20, 30, 100, 30, hwnd, (HMENU)ID_BLUE , g_hinst, NULL);
        
        CreateWindow(TEXT("button"), TEXT("Yellow"), WS_CHILD | WS_VISIBLE | BS_AUTORADIOBUTTON, 20, 55, 100, 30, hwnd, (HMENU)ID_YELLOW , g_hinst, NULL);
        
        CreateWindow(TEXT("button"), TEXT("Orange"), WS_CHILD | WS_VISIBLE | BS_AUTORADIOBUTTON, 20, 80, 100, 30, hwnd, (HMENU)ID_ORANGE , g_hinst, NULL);
        break;
    case WM_COMMAND:
        if (HIWORD(wParam) == BN_CLICKED) 
        {
            switch (LOWORD(wParam)) 
            {
                case ID_BLUE:
                    g_color = RGB(0, 76, 255);
                    break;
                case ID_YELLOW:
                    g_color = RGB(255, 255, 0);
                    break;
                case ID_ORANGE:
                    g_color = RGB(255, 123, 0);
                    break;
            }
            InvalidateRect(hwnd, NULL, TRUE);
        }
        break;
    case WM_PAINT:
        hdc = BeginPaint(hwnd, &ps);
        hBrush = CreateSolidBrush(g_color);
        hPen = CreatePen(PS_NULL, 1, RGB(0, 0, 0));
        holdPen = (HPEN)SelectObject(hdc, hPen);
        holdBrush = (HBRUSH) SelectObject(hdc, hBrush);
        Rectangle(hdc, 160, 20, 260, 120);
        SelectObject(hdc, holdBrush);
        SelectObject(hdc, holdPen);
        DeleteObject(hPen);
        DeleteObject(hBrush);
        EndPaint(hwnd, &ps);
        break;
    case WM_DESTROY:
        PostQuitMessage(0);
        break;
    }
    return DefWindowProc(hwnd, msg, wParam, lParam);
}

Giải thích :
Trong bài viết này, chúng ta có 1 group box gồm 3 radio button. Ta có thể lựa chọn background cho hình chữ nhật bên phải bằng cách click vào radio button.

CreateWindow(TEXT("button"), TEXT("Choose Color"), WS_CHILD | WS_VISIBLE | BS_GROUPBOX, 10, 10, 120, 110, wnd, (HMENU) 0, g_hinst, NULL);

Group box được tạo với thông số BS_GROUPBOX.

CreateWindow(TEXT("button"), TEXT("Blue"), WS_CHILD | WS_VISIBLE | BS_AUTORADIOBUTTON, 20, 30, 100, 30, hwnd, (HMENU)ID_BLUE , g_hinst, NULL);

Radio button “Blue” được tạo với thông số BS_AUTORADIOBUTTON.

Tương tự các hàm tiếp theo tạo ra các radio button “Yellow” và “Orange”.

case ID_BLUE:
    g_color = RGB(0, 76, 255);
    break;

Nếu button “Blue” được chọn thì biến g_color sẽ được fill màu blue. Biến g_color được dùng để tạo brush để fill màu cho hình chữ nhật bên phải.

InvalidateRect(hwnd, NULL, TRUE);

Hàm này invalidate hình chữ nhật (trong trường hợp này là toàn bộ window), khiến cho toàn bộ window được vẽ lại.
Trong case WM_PAINT sẽ vẽ hình chữ nhật.

Kết quả: