Handling Window Resize

Welcome back to Interactive Controls and Layouts. We are now in Lesson 5, and that means we have already built a small interface with a label, an edit box, and a button that moves text from one control to another. That is strong progress. In this lesson, we will make that interface react when the main window is resized.

Our goal is simple and practical: when the window becomes wider or narrower, the controls should adjust instead of staying frozen in place. To do that, we will handle WM_SIZE and update control positions with MoveWindow.

A window can usually be resized by the user, but child controls do not rearrange themselves automatically. If we do nothing, a larger window leaves awkward empty space, and a smaller window can make the layout feel cramped. So, just like in other UI systems, we need a layout rule.

For this lesson, our rule is intentionally simple:

1. The label should stretch left to right.
2. The edit box should also stretch left to right.
3. The button should stay at a fixed size near the left side.

This is a basic form of responsive layout, and it gives us a clean first step into dynamic interfaces.

The new behavior begins with the resize message. Windows sends WM_SIZE whenever the client area changes size, which makes it the right place to recompute layout values.

        case WM_SIZE: {
            // Client size after resize
            int cx = LOWORD(lParam);
            // int cy = HIWORD(lParam);

lParam stores the new client dimensions. LOWORD(lParam) extracts the width, and HIWORD(lParam) extracts the height. Here we only use cx because this lesson adjusts horizontal layout. The commented cy line is still useful to see because it reminds us that vertical sizing information is available too. Also, this is the client size, not the full outer window size, so borders and the title bar are not included.

Once we know the new width, we need handles for the child controls we want to move. Then we compute how much horizontal room is available between the left and right padding. We define a constant for padding to ensure the spacing remains consistent.

            static const int PAD = 20;

            HWND hLabel  = GetDlgItem(hwnd, ID_LABEL_WELCOME);
            HWND hEdit   = GetDlgItem(hwnd, ID_EDIT_INPUT);
            HWND hButton = GetDlgItem(hwnd, ID_BUTTON_ACTION);

            // Simple "anchor left/right": stretch edit/label to fit width
            int usableW = (cx > PAD * 2) ? (cx - PAD * 2) : 50;

GetDlgItem retrieves each child window by ID, so we do not need to store these handles globally. Then we calculate usableW, which is the width left after removing padding on both sides. In its simplest form, this is $usableW = cx - 2 \times PAD$. The conditional check matters because very small windows could otherwise produce zero or negative widths. Here, 50 acts as a small safety minimum.