The Picture Control

Overview

The Picture is a static control that was created to be able to display pictures or other resources. To use the picture control, on the Controls toolbox, click the Picture button and click the hosting window which would be a form or a dialog box. To configure the control, use the Properties window.

If you plan to refer to the picture control in your code, since it is in fact a static control, at design time, you must change its ID from IDC_STATIC

The Picture control is meant to assume different roles in difference circumstances. These roles can be set using the Type combo box.

• Frame: This is used to draw borders on the static control. Such a characteristic is suitable to create a group of controls such as radio buttons. When set to Frame, the Picture control has a transparent background and you can only change its border colors (at design time). The available options are

  • Black draws a black thin line around the control

  • Gray draws a gray thin line around the control

  • White draws a white thin line around the control

  • Etched draws an etched thin line around the control

• Rectangle: This option allows you to specify a background color for the control. The colors available are Black, Gray, White, and Etched

• Icon: When set to Icon type, the control is reduced to the normal dimensions of a Windows icon, 32x32 pixels

• Bitmap: The Bitmap option allows you to display a picture on the control with writing any code. This can be used if you plan to display one picture for the whole duration of the application. If you want the pictures to change, you would write just a few lines of code.

• Enhanced Metafile: This option is used to display metafiles

Besides the above characteristics, you can also enhance the Picture control with the styles inherited from CWnd.

Painting the Picture

The Picture control can be used to display changing colors or even as a preview area. In this case, you can use it as a painting box. To do this, you can first add a Picture control to your dialog box or form and make sure you change its identifier to something such as IDC_COLOR_CHANGER

To make it a little easier, you should also add a CStatic Control Variable for it. You can name it m_ColorChanger for example.

If you simply plan to change the background color of the color, you can use the OnDraw() of the OnPaint() event to do this. Here is an example:

void CExerciseDlg::OnPaint() 
{
	CPaintDC dc(this); // device context for painting
	
	CRect RectColorChanger;

	// Get the location and dimensions of the control
	m_ColorChanger.GetWindowRect(&RectColorChanger);
	CBrush BrushRed(RGB(255, 55, 5));

	// Select the new brush
	CBrush *pOldBrush = dc.SelectObject(&BrushRed);

	// Convert the current coordinates from Screen to Client
	ScreenToClient(&RectColorChanger);
	// Change the background of the control
	dc.Rectangle(RectColorChanger);
	
	// Restore the old brush
	dc.SelectObject(pOldBrush);

	if (IsIconic())
	{

		SendMessage(WM_ICONERASEBKGND, (WPARAM) dc.GetSafeHdc(), 0);

		// Center icon in client rectangle
		int cxIcon = GetSystemMetrics(SM_CXICON);
		int cyIcon = GetSystemMetrics(SM_CYICON);
		CRect rect;
		GetClientRect(&rect);
		int x = (rect.Width() - cxIcon + 1) / 2;
		int y = (rect.Height() - cyIcon + 1) / 2;

		// Draw the icon
		dc.DrawIcon(x, y, m_hIcon);
	}
	else
	{
		CDialog::OnPaint();
	}
}

If you want to change the color of the picture control using other controls, refer to other tutorials on this site.

Displaying a static picture on the Picture control is particularly easy. You can first create or import a picture. In MSVC 6, if you import an enhanced picture that uses more than 256 colors, which is common for most picture, you may receive a message that the picture was imported but cannot be displayed. You may get such a message when importing a picture such as this one:

After importing the picture, all you have to do is to set the picture control Type to Bitmap. Then, in the Image combo box of the Properties window, select the picture identifier (if using MSVC 6, after selecting the bitmap in the combo box, click anywhere on the dialog box or form to validate:

If you want to change the picture in response to the user's action, refer to other tutorials on this site.