Exercise 3: Modify the Form's Automatic Scaling Mode

In this exercise, you modify the AutoScaleMode property of the application's form and observe its effect on the different UI element displayed by the application.

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

Task 1 - Modify the AutoScaleMode to Font Scaling

1. Open the DemoApp.cs(C#) or DemoApp.vb(Visual Basic) designer and make sure the form is selected.

2. In the Properties window, locate the AutoScaleMode property and modify its value to Font.

   Save the file, recompile, and then run the application. The application appears as shown in the following screen shot, with the UI elements scaled according to font size:

   UI element	Appearance at 144 DPI
   Size of the window frame	Larger
   Size of the buttons	Larger
   Size of image box	Larger
   Size of the text	Larger
   Clipped text on the buttons	No
   Clipped text in the window	No
   Aspect ratio preserved	No

   Note:

   Help

   Notice that the text is no longer clipped in any of the UI elements, and the sizes of the buttons, image box, and window frame are increased. However, if you observe the aspect ratio of these enlarged UI elements, you'll notice (mainly around the image box) that the aspect ratio has changed. This means that if the image were stretched to fit the whole image box, it would be squished.

   When you set the form to use font scaling, everything is scaled by the enlarged size of the fonts caused by the increased DPI setting, without considering possible changes of the aspect ratio. That's why this scaling is recommended for controls containing text (or forms containing such controls).

Task 2 - Modify the AutoScaleMode to DPI Scaling

1. Return to the DemoApp.cs (C#) or DemoApp.vb (Visual Basic) designer and make sure the form is selected.
2. In the Properties window, locate the AutoScaleMode property and modify its value to DPI.

3. Save the file, recompile, and then run the application. The application appears as shown in the following screen shot, with the UI elements scaled according to DPI settings.

   UI element	Appearance at 144 DPI
   Size of the window frame	Larger
   Size of the buttons	Larger
   Size of image box	Larger
   Size of the text	Larger
   Clipped text on the buttons	Yes, but less
   Clipped text in the window	Yes, but less
   Aspect ratio preserved	Yes

   Note:

   Help

   Notice that the text is clipped (although less that before), and the sizes of the buttons, image box, and window frame are increased while preserving their aspect ratio.

   When you set the form to use DPI scaling, everything is scaled by the higher DPI value, which is currently the same horizontally and vertically. This ensures preservation of aspect ratio and avoids image squishing. That's why this scaling is recommended for controls displaying charts or other graphics, so that they always occupy a certain percentage of the screen.