Exercise 4: Fix the Button Size and Layout

In this exercise, you fix the button size and layout. To do so, scale the size of the buttons from raw pixels to relative pixels to appropriately display the text size, and then scale the layout of the buttons from raw pixels to relative pixels to fix the button layout.

For this exercise, continue using the project file from the previous exercise.

Task 1 - Scale the Button Size

1. Open the HandsOnLab.cpp file. In the DemoApp::CreateChildWindows method, find the section where button initialization is specified.

2. Add the following code (shown in bold) to scale the size of all three buttons:// Now set up the size of the buttons that we will create.
   SIZE buttonSize = { 60, 26 };
   g_metrics.ScaleSize(&buttonSize);

   Note:

   Help:

   The g_metrics variable is an instance of the CDPI class, and the g_metrics.ScaleSize method scales from raw pixels to relative pixels.

3. Save the file, recompile, and then run the application. The application appears as shown in the following screen shot, with the appropriately scaled button size:

Task 2 - Scale the Button Layout

1. In the DemoApp::CreateChildWindows method, add the following code (shown in bold):

   // Button 1 position.
   POINT ptButton1Pos = { 10, 55 };
   g_metrics.ScalePoint(&ptButton1Pos);
   
   // Button 2 position is 75 pixels to the right of Button 1.
   POINT ptButton2Pos = { 85, 55 };
   g_metrics.ScalePoint(&ptButton2Pos);
   
   // Button 3 is 75 pixels to the right of button 2.
   POINT ptButton3Pos = { 160, 55 };
   g_metrics.ScalePoint(&ptButton3Pos);
   

   Note:

   Help

   The g_metrics.ScalePoint method scales points from raw pixels to relative pixels.

2. Save the file, recompile, and then run the application. The application should look like the following screen shot, with the appropriately scaled button size and layout: