Chapter 2 – Controls

The windows api provides a stock of GUI controls you can easily integrate in your game. To add a control all you need to do is use that controls pre-registered class name in the CreateWindow() or CreateWindowEx() function together with some construction arguments.

Analyzing CreateWindowEx()

HWND WINAPI CreateWindowEx(
  __in      DWORD dwExStyle,
  __in_opt  LPCTSTR lpClassName,
  __in_opt  LPCTSTR lpWindowName,
  __in      DWORD dwStyle,
  __in      int x,
  __in      int y,
  __in      int nWidth,
  __in      int nHeight,
  __in_opt  HWND hWndParent,
  __in_opt  HMENU hMenu,
  __in_opt  HINSTANCE hInstance,
  __in_opt  LPVOID lpParam

All the arguments with the _opt prefix are optional. That means you can enter a NULL in their place.

You enter the class name of your control in the second argument, and the control’s window name in the third.

The first and fourth arguments are for the control’s (extended or otherwise) style, it is a combination of different style definitions.

The fifth and sixth arguments are for entering the controls position on the screen in pixels. The seventh and eighth are the control’s size in pixels.

The ninth argument is the control’s parent. This is usually NULL or HWND_DESKTOP for a top level Window and a handle to the main window for child controls. The tenth argument is a Menu ID, which I will discuss later.

The eleventh argument is the application’s instance which is one of the default arguments of the WinMain function and can also be obtained in applications by using GetModuleHandle(NULL);. The last argument is the LPARAM value passed on to the window procedure in the WM_CREATE method.

Menu IDs

Every window control you create must be assigned with a numberic ID. When that control is triggered, it sends a WM_COMMAND message to the window procedure together with its ID.

Adding Some Child Controls


First, define a menu id for the button,

#define IDM_BUTTON 100

Next, add this snippet either after you create the main window in WinMain() or on the WM_CREATE message in your window procedure.

HWND btn = ::CreateWindow(
                          TEXT("Button"), // the stock button class name
                          TEXT("Click Me"), // the label on the button
                          WS_CHILD|WS_VISIBLE, // is visible and a child control
                          10, 10, // x = 10, y = 10. relative to the parent
                          100, 100, // the width and height
                          hwnd, // the parent is our main window
                          IDM_BUTTON, // the button's menu id
                          NULL, // the hInstance is not necessary
                          NULL // no additional creation data

Now, to program the button’s response to a click, in your window procedure’s message switch, add a case for WM_COMMAND. Use LOWORD(wParam) to find the menu ID. If the ID matches with that of the button, respond to it. In other words,

switch (msg)
// handle the quit message
case WM_COMMAND: // some control was triggered
    switch(LOWORD(wParam)) // find the menu id
        case IDM_BUTTON: // if the menu id matches with that of the button
            // respond to it
            ::MessageBox(NULL, "You pressed the button!", "Button Pressed", MB_OK);


The edit control is a plain text box with cut / copy / paste functionality. You create it like this:

HWND edit = ::CreateWindowEx(
                        WS_EX_CLIENTEDGE, // gives the edit box an edged frame
                        TEXT("Edit"), // the stock class name for an edit box
                        TEXT("Enter something..."), // default text
                        // is a child, visible, left-aligned
                        // and allows the user to enter more than one line
                        10, 10, // x and y co-ords
                        200, 100, // width and height
                        hwnd, // parent
                        reinterpret_cast<HMENU>(IDM_EDIT), // the menu id
                        NULL, // hInstance not needed
                        NULL // no additional creation data


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s