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,712 times
Add to favorites
11/26/2013
E-mail Twitter del.icio.us Digg Facebook

Solution explorer

C++
C#
JavaScript
VB.NET
<!--
//*********************************************************
//
// Copyright (c) Microsoft. All rights reserved.
// THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
// ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
// IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
// PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
//
//*********************************************************
-->
<common:LayoutAwarePage
    x:Class="SDKSample.Scaling.Scenario1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SDKSample.Scaling"
    xmlns:common="using:SDKSample.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid x:Name="Input" Grid.Row="0">
            <TextBlock TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left">
                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 <Run FontWeight="Bold">scaling aware</Run> 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.
                <LineBreak/><LineBreak/>
              For Windows Store apps, the following table demonstrates different methods you can use to ensure
              that Windows loads the correct asset depending on scaling percentage. The table also show what
              would happen if you didn't provide multiple assets. We recommend that you choose the appropriate
              method depending on your app's specific scenarios so use the descriptions in the table to guide
              you as you make your decision. In some cases, you might want to use multiple methods. The table
              also shows you info about the device's current scale, which includes the minimum requirements a
              screen must meet to default to this scale.
              <LineBreak/><LineBreak/>
                <Run FontWeight="Bold" Text="Note:"/>
                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.
            </TextBlock>
        </Grid>

        <Grid x:Name="Output" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top">
            <StackPanel Orientation="Vertical">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" FontWeight="bold" Text="Current scale:&#160;"/>
                    <TextBlock x:Name="ScalingText" Style="{StaticResource BasicTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" FontWeight="bold" Text="Min screen DPI requirement for this scale:&#160;"/>
                    <TextBlock x:Name="MinDPIText" Style="{StaticResource BasicTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" FontWeight="bold" Text="Min screen resolution requirement for this scale:&#160;"/>
                    <TextBlock x:Name="MinScreenResolutionText" Style="{StaticResource BasicTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" FontWeight="bold" Text="Logical DPI for this scale:&#160;"/>
                    <TextBlock x:Name="LogicalDPIText" Style="{StaticResource BasicTextStyle}"/>
                </StackPanel>
                                    
                <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,20,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="200"/>
                        <ColumnDefinition Width="700"/>
                        <ColumnDefinition Width="120"/>
                    </Grid.ColumnDefinitions>

                    <!-- Outer border for the table -->
                    <Border Grid.RowSpan="5" Grid.ColumnSpan="3" BorderThickness="2" BorderBrush="Black" />
                    
                    <!-- Header -->
                    <Border Grid.Row="0" Grid.Column="0" BorderThickness="2" BorderBrush="Black" Margin="6,6,2,2">
                        <TextBlock Margin="5,5,5,5" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" FontWeight="bold">Method</TextBlock>
                    </Border>
                    <Border Grid.Row="0" Grid.Column="1" BorderThickness="2" BorderBrush="Black" Margin="2,6,2,2">
                        <TextBlock Margin="5,5,5,5" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" FontWeight="bold">Description</TextBlock>
                    </Border>
                    <Border Grid.Row="0" Grid.Column="2" BorderThickness="2" BorderBrush="Black" Margin="2,6,6,2">
                        <TextBlock Margin="5,5,5,5" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" FontWeight="bold">Result</TextBlock>
                    </Border>

                    <Border Grid.Row="1" Grid.Column="0" BorderThickness="2" BorderBrush="Black" Margin="6,2,2,2">
                        <TextBlock Margin="5,5,5,5" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Foreground="Red">
                            Not scaling aware
                        </TextBlock>
                    </Border>
                    <Border Grid.Row="1" Grid.Column="1" BorderThickness="2" BorderBrush="Black" Margin="2,2,2,2">
                        <TextBlock Margin="5,5,5,5" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap" Foreground="Red">
                            If only one version of an asset is provided, the app is not scaling aware. This may be difficult to see in the simulator but notice how
                            the asset is distorted at the 140% and 180% scale factors.
                        </TextBlock>
                    </Border>
                    <Border Grid.Row="1" Grid.Column="2" BorderThickness="2" BorderBrush="Black" Margin="2,2,6,2">
                        <Grid Background="LightCyan" HorizontalAlignment="Center" VerticalAlignment="Center" Height="90" Width="90" Margin="5,5,5,5">
                            <Border BorderThickness="2" BorderBrush="#00b9f2"/>
                            <Image x:Name="StretchedImage" Source="Assets/projector-stretch.png" Margin="5,5,5,5"/>
                        </Grid>
                    </Border>
                                        
                    <Border Grid.Row="2" Grid.Column="0" BorderThickness="2" BorderBrush="Black" Margin="6,2,2,2">
                        <TextBlock Margin="5,5,5,5" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">
                            Scaled packaged assets
                        </TextBlock>
                    </Border>
                    <Border Grid.Row="2" Grid.Column="1" BorderThickness="2" BorderBrush="Black" Margin="2,2,2,2">
                        <StackPanel HorizontalAlignment="Left" VerticalAlignment="Center" >
                            <TextBlock Margin="5,5,5,5" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" TextWrapping="Wrap">
                                The framework can automatically display the right asset from your package based on
                                the current DPI. To enable this behavior, your must include 3 versions of each asset
                                using the appropriate naming convention: image.scale-100.png, image.scale-140.png 
                                and image.scale-180.png. Then, when you use "image.png" within your app, Windows will 
                                automatically use the correct asset based on the current scale factor.
                            </TextBlock>
                            <TextBlock Margin="5,0,5,5" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" TextWrapping="Wrap">
                                When using the XAML framework, this method will select the 
                                correct image when the view is first loaded and will also change the asset dynamically 
                                during runtime if the scale changes (for example, if the app is moved to a different 
                                monitor). No additional code is required for dynamic reloading.
                            </TextBlock>
                            <TextBlock Margin="5,0,5,5" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" TextWrapping="Wrap">
                                Note: The image shown to the right has had text added to make clear which version of the 
                                image is actually loaded.
                            </TextBlock>
                        </StackPanel>
                    </Border>
                    <Border Grid.Row="2" Grid.Column="2" BorderThickness="2" BorderBrush="Black" Margin="2,2,6,2">
                        <Grid Background="LightCyan" HorizontalAlignment="Center" VerticalAlignment="Center" Height="90" Width="90" Margin="5,5,5,5">
                            <Border BorderThickness="2" BorderBrush="#00b9f2"/>
                            <Image Source="Assets/projector.png" Margin="5,5,5,5"/>
                        </Grid>
                    </Border>

                    <Border Grid.Row="3" Grid.Column="0" BorderThickness="2" BorderBrush="Black" Margin="6,2,2,2">
                        <TextBlock Margin="5,5,5,5" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">
                            Vector Graphics Using XAML Path
                        </TextBlock>
                    </Border>
                    <Border Grid.Row="3" Grid.Column="1" BorderThickness="2" BorderBrush="Black" Margin="2,2,2,2">
                        <TextBlock Margin="5,5,5,5" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap">
                            To use vector images, directly encode the graphic in XAML markup.  The resource will 
                            resize automatically when the modern scale factor changes.
                        </TextBlock>
                    </Border>
                    <Border Grid.Row="3" Grid.Column="2" BorderThickness="2" BorderBrush="Black" Margin="2,2,6,2">
                        <Grid Background="LightCyan" HorizontalAlignment="Center" VerticalAlignment="Center" Height="90" Width="90" Margin="5,5,5,5" >
                            <Border BorderThickness="2" BorderBrush="#00b9f2"/>
                            <!-- XAML Image -->
                            <Canvas x:Name="XAMLImage"  HorizontalAlignment="Left" VerticalAlignment="Center" Margin="3,0,0,25" >
                                <Path x:Name="Path" Width="8.53067" Height="3.19733" Canvas.Left="5.33333" Canvas.Top="34.136" Stretch="Fill" Fill="#FF010101" Data="F1 M 13.864,36.2653L 12.796,37.3333L 6.40133,37.3333L 5.33333,36.2653L 5.33333,34.136L 13.864,34.136"/>
                                <Path x:Name="Path_0" Width="8.53067" Height="3.19733" Canvas.Left="69.3333" Canvas.Top="34.136" Stretch="Fill" Fill="#FF010101" Data="F1 M 77.864,36.2653L 76.796,37.3333L 70.4013,37.3333L 69.3333,36.2653L 69.3333,34.136L 77.864,34.136"/>
                                <Path x:Name="Path_1" Width="25.5987" Height="25.5987" Canvas.Left="40.5307" Canvas.Top="6.40131" Stretch="Fill" Fill="#FF010101" Data="F1 M 53.3333,6.40131C 46.26,6.40131 40.5307,12.136 40.5307,19.204C 40.5307,26.2653 46.26,32 53.3333,32C 60.4013,32 66.1293,26.2653 66.1293,19.204C 66.1293,12.136 60.4013,6.40131 53.3333,6.40131 Z M 53.3333,28.8026C 48.0253,28.8026 43.7347,24.5 43.7347,19.204C 43.7347,13.9013 48.0253,9.59863 53.3333,9.59863C 58.6347,9.59863 62.932,13.9013 62.932,19.204C 62.932,24.5 58.6347,28.8026 53.3333,28.8026 Z "/>
                                <Path x:Name="Path_2" Width="83.1973" Height="32" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" Fill="#FF010101" Data="F1 M 74.5933,0L 8.604,0C 2.86933,0 0,2.91199 0,8.72931L 0,30.5466C 0,31.3493 0.645333,32 1.432,32L 43.7653,32C 39.864,29.084 37.3333,24.4426 37.3333,19.204C 37.3333,10.3707 44.4893,3.20398 53.3333,3.20398C 62.172,3.20398 69.3333,10.3707 69.3333,19.204C 69.3333,24.4426 66.796,29.084 62.9013,32L 81.7653,32C 82.552,32 83.1973,31.3493 83.1973,30.5466L 83.1973,8.72931C 83.1973,2.91199 80.328,0 74.5933,0 Z M 23.4627,27.7346L 5.33333,27.7346L 5.33333,25.5986L 23.4627,25.5986M 23.4627,23.4693L 5.33333,23.4693L 5.33333,21.3333L 23.4627,21.3333M 23.4627,19.204L 5.33333,19.204L 5.33333,17.068L 23.4627,17.068M 23.4627,14.9319L 5.33333,14.9319L 5.33333,12.8026L 23.4627,12.8026"/>
                            </Canvas>
                        </Grid>
                    </Border>

                    <Border Grid.Row="4" Grid.Column="0" BorderThickness="2" BorderBrush="Black" Margin="6,2,2,6">
                        <TextBlock Margin="5,5,5,5" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">
                            Scaled external assets
                        </TextBlock>
                    </Border>
                    <Border Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="2" BorderThickness="2" BorderBrush="Black" Margin="2,2,6,6">
                        <TextBlock Margin="5,5,5,5" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap">
                            If you are loading any images that did not come with your app's package or 
                            resource pack (e.g. downloaded from a web server), then you must manually query the
                            system DPI and load the corresponding image. An example URL is given below:
                            <LineBreak/>
                            <LineBreak/>
                            <Run FontWeight="Bold" x:Name="ManualLoadURL"></Run>
                        </TextBlock>
                    </Border>
                </Grid>
            </StackPanel>
        </Grid>

        <!-- Add Storyboards to the visual states below as necessary for supporting the various layouts -->
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="DefaultLayout"/>
                <VisualState x:Name="Below768Layout"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>