Windows Programming/User Interface Controls

From Wikibooks, the open-content textbooks collection

Windows Programming

Some predefined window classes are intended for use as user interface controls. They're commonly known as "standard Windows controls" and "common controls".

Usages of these UI controls should be documented in task-oriented categories, not on an API-oriented basis.

Contents 1 Standard Windows Controls 1.1 Static Control (Label / Image / Icon) 1.1.1 What it is 1.1.2 Example Code 1.2 Push Button 1.2.1 What it is 1.2.2 Example Code 1.3 Radio Button (Single choice box) 1.4 Checkbox Button (Multiple choice box) 1.5 Combo Box 1.6 List Box 1.7 Standard Edit Control 1.8 Frame Box 1.9 Tree View 1.10 List View 1.11 Picture Box 2 Common Controls 2.1 Header and Linking Requirements 2.2 Combo Box Ex 2.3 Progress Bar 2.3.1 What it is 2.3.2 Example code 3 Next Chapter 4 References

[edit] Standard Windows Controls

[edit] Static Control (Label / Image / Icon)

[edit] What it is

A static control is a child window that displays either text, bitmap image, or icon. Static controls cannot be selected and do not receive focus from the keyboard. They can; however, receive mouse input with use of SS_NOTIFY. This will allow the control to detect click and double-click with the WM_NOTIFY event of its parent.

[edit] Example Code

Create Label

The label Static Control should be a child of another window, either a main window or a child window. To create it, all you need to do is call CreateWindow() with the STATIC class and the parameters of your choice. Below is the basic code to create it.

/*Create a Static Label control*/

hwndLabel = CreateWindow(
                        TEXT("STATIC"),                   /*The name of the static control's class*/
                        TEXT("Label 1"),                  /*Label's Text*/
                        WS_CHILD | WS_VISIBLE | SS_LEFT,  /*Styles (continued)*/
                        0,                                /*X co-ordinates*/
                        0,                                /*Y co-ordinates*/
                        50,                               /*Width*/
                        25,                               /*Height*/
                        hwnd,                             /*Parent HWND*/
                        (HMENU) ID_MYPROGRESS,            /*The Progress Bar's ID*/
                        hInstance,                        /*The HINSTANCE of your program*/ 
                        NULL);                            /*Parameters for main window*/

Using the Label

Setting Label's Text

To set the text of your Label (static control), use the SendMessage() function with the WM_SETTEXT message.

/*Setting the Label's text
/*You may need to cast the text as (LPARAM)*/

SendMessage(    hwndLabel , 	/*HWND*/        /*Label*/
                WM_SETTEXT,  	/*UINT*/        /*Message*/
                NULL,           /*WPARAM*/      /*Unused*/
       (LPARAM) TEXT("Hello"));  /*LPARAM*/      /*Text*/

[edit] Push Button

[edit] What it is

Everyone should be familiar with the windows push button. It is simply a raised square with text inside it, and when you click usually something happens.

[edit] Example Code

As with all windows controls the push button is a child of your window be it the main window or another child. So to implement it into your program you merely need to call the CreateWindow() function. Below is a line of code to create a button.

Create Button

// create button and store the handle                                                       

HWND hwndButton = CreateWindow (TEXT("button"),                      // The class name required is button
                               TEXT("Push Button"),                  // the caption of the button
                               WS_CHILD |WS_VISIBLE | BS_PUSHBUTTON,  // the styles
                               0,0,                                  // the left and top co-ordinates
                               100,300,                              // width and height
                               hwnd,                                 // parent window handle
                               (HMENU)ID_MYBUTTON,                   // the ID of your button
                               hInstance,                            // the instance of your application
                               NULL) ;                               // extra bits you dont really need

this will create the button for you but it will NOT do anything on a click. In order to do that you need to go into your Windows Procedure function and handle the WM_COMMAND event. In the WM_COMMAND event the low word in the wparam is the ID of the child that has caused the event. So to ensure that you have received a message from your button ensure that the ID's are the same.

Test button ID

// compare button ID to message ID
if(ID_MYBUTTON == LOWORD(wparam))
{ 
   /* its your button so do some work */ 
}

So now you know that your button has been pressed you need to find out what has happened to it so we process the notification code that is stored in the High Word of the wparam. The notification code you need to watch for is BN_CLICKED.

Test notification

// compare Notification to message Notification
if(BN_CLICKED == HIWORD(wparam))
{ 
   /* the button has been clicked do some stuff */ 
}

One last thing you may need to know is that lparam contains the handle to the button pressed.

Thats all you need to implement a button in a Win32 Application using the API

[edit] Radio Button (Single choice box)

[edit] Checkbox Button (Multiple choice box)

[edit] Combo Box

// create a combo box and store the handle                                                       

HWND hwndCombo = CreateWindow (TEXT("combobox"),                         // The class name required is combobox
                               TEXT(""),                                 // not used, ignored.
                               WS_CHILD | WS_VISIBLE | CBS_DROPDOWNLIST, // the styles
                               0,0,                                      // the left and top co-ordinates
                               100,300,                                  // width and height
                               hwnd,                                     // parent window handle
                               (HMENU)ID_MYCOMBO,                        // the ID of your combobox
                               hInstance,                                // the instance of your application
                               NULL) ;                                   // extra bits you dont really need

The displayed height of the actual widget will be automatically changed depending the font. The "unused" part of the height will be devoted to the size of the drop down menu.

For example, only 33 pixels of the 300 pixel height will be to the selected item. When the down button is clicked, the menu will be 267 pixels in height.

There are other combo box styles: CBS_SIMPLE (similiar to a list box) and CBS_DROPDOWN (similiar to CBS_DROPDOWNLIST but the selected field is editable).

// Add a list of strings to the combo box.

SendMessage(
              hwndCombo,                    // The handle of the combo box
              CB_ADDSTRING,                 // Tells the combo box to append this string to its list
              0,                            // Not used, ignored.
              (LPARAM) "Item A"             // The string to add.
           );

SendMessage(hwndCombo, CB_ADDSTRING, 0, (LPARAM) "Item B");
SendMessage(hwndCombo, CB_ADDSTRING, 0, (LPARAM) "Item C");
SendMessage(hwndCombo, CB_ADDSTRING, 0, (LPARAM) "Item D");
SendMessage(hwndCombo, CB_ADDSTRING, 0, (LPARAM) "Item E");


// Select the default item to be "Item A".
SendMessage(
              hwndCombo,                    // The handle of the combo b,                            // Not used, ignored.
              0                             // The index of the item to select (starting at zero)
           );

[edit] List Box

[edit] Standard Edit Control

The Edit control is the standard base object for text editing and display (it is commonly called a TextBox).

// create a text box and store the handle                                                       

HWND hwndText = CreateWindow(
                               TEXT("edit"),                              // The class name required is edit
                               TEXT(""),                                 // Default text.
                               WS_VISIBLE | WS_CHILD | WS_BORDER | WS_HSCROLL | WS_VSCROLL| ES_MULTILINE | ES_AUTOHSCROLL, // the styles
                               0,0,                                      // the left and top co-ordinates
                               100,300,                                  // width and height
                               hwnd,                                     // parent window handle
                               (HMENU)ID_MYTEXT,                         // the ID of your combobox
                               hInstance,                                // the instance of your application
                               NULL
                            );                                   // extra bits you dont really need

The Edit control has a large number of styles.

Here are the ones used in the example:

WS_BORDER	A thin border around the text area.
WS_HSCROLL	Display the horizontal scroll bar.
WS_VSCROLL	Display the vertical scroll bar.
ES_MULTILINE	This is a multiline text box.
ES_AUTOHSCROLL	No word wrapping.

	// Set the text.
	SendMessage(hwndText, WM_SETTEXT, 0, (LPARAM)"Hello");

	// Get the text.
	LRESULT iTextSize = SendMessage(hwndText, EM_GETLIMITTEXT, 0, 0);
	char *szText = new char[iTextSize];
	SendMessage(hwndText, WM_GETTEXT, iTextSize, (LPARAM)szText);

[edit] Frame Box

[edit] Tree View

[edit] List View

[edit] Picture Box

[edit] Common Controls

[edit] Header and Linking Requirements

Using Common Controls may require linking to comctl32.lib and including commctrl.h

[edit] Combo Box Ex

[edit] Progress Bar

[edit] What it is

A standard bar graph that displays progress of an item. Shows a graphical representation of amount completed over amount total.

[edit] Example code

Create Progress Bar

The Progress Bar control should be a child of another window, either a main window or a child window. To create it, all you need to do is call CreateWindow() with the PROGRESS_CLASS class and the parameters of your choice. Below is the basic code to create it.

/*Create a Progress Bar*/

HWND hwndProgress = CreateWindow(
			PROGRESS_CLASS,		/*The name of the progress class*/
			NULL, 			/*Caption Text*/
			WS_CHILD | WS_VISIBLE,	/*Styles*/
			0, 			/*X co-ordinates*/
			0, 			/*Y co-ordinates*/
			200, 			/*Width*/
			30, 			/*Height*/
			hwnd, 			/*Parent HWND*/
			(HMENU) ID_MYPROGRESS, 	/*The Progress Bar's ID*/
			hInstance,		/*The HINSTANCE of your program*/ 
			NULL);			/*Parameters for main window*/

Using the Progress Bar

Changing position

There are three ways to increment/decrement the progress bar. PBM_DELTAPOS steps by a given number. PBM_SETPOS sets a specific position. PBM_SETSTEP sets an increment/decrement number, and PBM_STEPIT steps with that number.

Delta Position

PBM_DELTAPOS advances the progress bar with a number given as the wparam.

/*Advance progress bar by 25 units*/

SendMessage(	hwndProgress ,	/*HWND*/	/*Progress Bar*/
		PBM_DELTAPOS, 	/*UINT*/	/*Message*/
		25,		/*WPARAM*/	/*Units*/
		NULL)		/*LPARAM*/	/*Unused*/

Set Position

PBM_SETPOS advances the progress bar to the specified position in the WPARAM

/*Advances progress bar to specified position (50)*/

SendMessage(	hwndProgress ,	/*HWND*/	/*Progress Bar*/
		PBM_SETPOS, 	/*UINT*/	/*Message*/
		50,		/*WPARAM*/	/*Units*/
		NULL)		/*LPARAM*/	/*Unused*/

Stepping Position

PBM_SETSTEP specifies the amount of units to step. PBM_STEPIT advances by the amount of units given with PBM_SETSTEP (default 10 units).

/*Advances progress bar by specified units*/

/*If progress bar is stepped when at the progress bar's maximum,
/* the progress bar will go back to its starting position*/

				/*Set the step*/
SendMessage(	hwndProgress ,	/*HWND*/	/*Progress Bar*/
		PBM_SETSTEP, 	/*UINT*/	/*Message*/
		1,		/*WPARAM*/	/*Amount to step by*/
		NULL)		/*LPARAM*/	/*Unused*/

				/*Step*/
SendMessage(	hwndProgress ,	/*HWND*/	/*Progress Bar*/
		PBM_STEPIT, 	/*UINT*/	/*Message*/
		NULL,		/*WPARAM*/	/*Unused*/
		NULL)		/*LPARAM*/	/*Unused*/

[edit] Next Chapter

• GDI and Drawing

[edit] References

MSDN - Windows Controls