Scaling according to DPI sample

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.

 
 
 
 
 
4.5 Star
(2)
26,708 times
Add to favorites
11/26/2013
E-mail Twitter del.icio.us Digg Facebook

Solution explorer

C++
C#
JavaScript
VB.NET
<!--
THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
PARTICULAR PURPOSE.

Copyright (c) Microsoft Corporation. All rights reserved
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Override default scaling of UI elements</title>
    <link rel="stylesheet" href="/css/scenario2.css" />
    <script src="/js/scenario2.js"></script>
</head>
<body>
    <div data-win-control="SdkSample.ScenarioInput">
        <p>
            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.  At 100%, elements
            share the same size: boxes are 100x100 and text is 20pt. However, when the scale factor increases,
            notice that the overridden elements are not automatically scaled up. Instead, the physical
            dimensions of the box stay constant (100x100) and the text font-size is reduced. Because the app overrides
            scaling, both elements get physically smaller as the scale increases. You might want to use this
            scenario if you don't want Windows to automatically scale your images or text.
        </p>
        <p>
            <b>Note:</b>
            Use the simulator to view this scenario at different scaling percentages.
            For the 100% scale, use the 10.6" 1366x768 resolution setting. For 140% use 10.6"
            1920x1080 and for 180% use 10.6" 2560x1440.
        </p>
    </div>
    <div data-win-control="SdkSample.ScenarioOutput">
        <div id="effectiveResolution">
            <b>Current effective resolution: </b><span id="effectiveResolutionValue"></span>
        </div>
        <br />
        <div id="defaultTable" style="float: left;">
            <div id="standardLabel">
                <b>Default scaling</b>
            </div>
            <br />
            <table border="1">
                <tr>
                    <th>UI element</th>
                    <th>Text</th>
                </tr>
                <tr>
                    <td style="padding: 20px; height: 120px; width: 120px; text-align: center;">
                        <div class="box" id="standardBox" style="margin: 0 auto;">
                            <div id="standardBoxValue" class="boxValue"></div>
                        </div>
                    </td>
                    <td style="padding: 20px; height: 140px; width: 220px; text-align: center;" rowspan="2">
                        <div id="standardFont">20pt Segoe UI</div>
                    </td>
                </tr>
                <tr>
                    <td style="text-align:center">
                        <div id="standardBoxRelativePixels" class="boxDescription">
                        </div>
                        <div id="standardBoxPhysicalPixels" class="boxDescription">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div id="overrideTable" style="float: left">
            <div id="overrideLabel">
                <b>Override scaling</b>
            </div>
            <br />
            <table border="1">
                <tr>
                    <th>UI element</th>
                    <th>Text</th>
                </tr>
                <tr>
                    <td style="padding: 20px; height: 120px; width: 120px; text-align: center;">
                        <div class="box" id="overrideBox" style="margin: 0 auto;">
                            <div id="overrideBoxValue" class="boxValue"></div>
                        </div>
                    </td>
                    <td style="padding: 20px; height: 140px; width: 220px; text-align: center;" rowspan="2">
                        <div id="overrideFont"></div>
                    </td>
                </tr>
                <tr>
                    <td style="text-align:center">
                        <div id="overrideBoxRelativePixels" class="boxDescription">
                        </div>
                        <div id="overrideBoxPhysicalPixels" class="boxDescription">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>