This sample describes how to build an app that scales according to the dots per inch (dpi) (pixel density) of the screen by loading images of the right scale or by overriding default scaling. This sample uses the Windows.Graphics.Display API.

The sample demonstrates these scenarios:

Loading images for different dpi scales

When a screen’s pixel density (dpi) and resolution are very high, Windows scales images and other UI elements to maintain physical sizing across devices. We recommend that you make your app scaling aware by providing multiple versions of these assets so that they retain quality across different scale factors. If you don’t provide multiple versions, Windows will stretch your assets by default.

Overriding default scaling of UI elements

To preserve the physical size of UI, Windows automatically scales UI elements as the scale factor (ResolutionScale) changes. You might not want this behavior especially if your app doesn’t have a high-res version of an element available. This scenario demonstrates how to override the automatic scaling of text and UI as the scale factor changes from 100% to 140%. You might want to use this scenario if you don’t want Windows to automatically scale your images or text.

Important APIs in this sample include:

To obtain an evaluation copy of Windows 8.1, go to Windows 8.1.

To obtain an evaluation copy of Microsoft Visual Studio 2013, go to Visual Studio 2013.

Note  For Windows 8 app samples, download the Windows 8 app samples pack. The samples in the Windows 8 app samples pack will build and run only on Microsoft Visual Studio 2012.

Related topics

Windows 8 app samples

Operating system requirements

Client
Windows 8.1
Server
Windows Server 2012 R2

Build the sample

  1. Start Visual Studio 2013 and select File > Open > Project/Solution.
  2. Go to the directory in which you unzipped the sample. Go to the directory named for the sample, and double-click the Microsoft Visual Studio Solution (.sln) file.
  3. Press F7 or use Build > Build Solution to build the sample.

Run the sample

Important  To see the effects of different screen dpi on the sample, you must run it using the simulator that is provided by Visual Studio Express 2013 for Windows.

Before running the sample you must go to the Debug tab of the ScalingSample project's Properties dialog box and change the Target device to Simulator (by default the target device is the local machine). After building the sample and setting it to run using the simulator, press F5 (run with debugging enabled) or Ctrl+F5 (run without debugging enabled). (Or select the corresponding options from the Debug menu.)

While the sample is running in the simulator, you can change the size and dpi of the screen to see the effects of the scale factor applied for different dpi.

Tip  To close the simulator you must right-click the simulator icon on your task bar and click Exit.