Exercise 5: Fix the Window Size and Clipped Text

In this exercise, you fix the window size and clipped text. To do so, scale the window size to the current DPI setting, and then use the default theme text to fix the clipped text. To scale the window properly, use the ScaleX and ScaleY functions of the CDPI class to convert raw pixels to relative pixels to scale the window size to the current DPI setting.

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

Task 1 - Scale the Window Properly

1. In the DemoApp::Initialize function, find the call to the CreateWindow function, and then ensure that the X and Y parameters that are passed in are scaled by using the respective g_metrics.ScaleY and g_metrics.ScaleY methods, as shown in the following bold code.// Create window.
   m_hwnd = CreateWindow(
   TEXT("HighDPIDemoApp"),
   TEXT("High DPI Demo App"),
   WS_OVERLAPPEDWINDOW,
   CW_USEDEFAULT,
   CW_USEDEFAULT,
   g_metrics.ScaleX(420),
   g_metrics.ScaleY(200),
   NULL,
   NULL,
   HINST_THISCOMPONENT,
   this
   );

Task 2 - Replace TextOut with the default theme text API

1. In the DemoApp::OnRender method, comment out the TextOut function call.

2. Uncomment the code for the theme text drawing. When you are done, the code should look like this:// TextOut(ps.hdc, rcText.left, rcText.top, szText, lstrlen(szText));
   // This is the recommended way of using the theme API to draw text.
   // You will un-comment this during the exercise to see how to draw
   // properly themed text.
   
   OffsetRect(&rcText, g_metrics.ScaleX(8), g_metrics.ScaleY(8));
   HTHEME hTheme = OpenThemeData(hWnd, VSCLASS_TEXTSTYLE);
   if (hTheme)
   {
   DrawThemeText(hTheme, ps.hdc, TEXT_BODYTEXT,
   0, szText, -1, DT_SINGLELINE, 0, &rcText);
   CloseThemeData(hTheme);
   }
   else
   {
   // Visual styles are not enabled.
   DrawText(ps.hdc, szText, -1, &rcText, DT_SINGLELINE);
   }

3. Save the file, recompile, and then run the application. The application appears with all UI issues resolved, as shown in the following screen shot.