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
<!--
//*********************************************************
//
// 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.Scenario2"
    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">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid x:Name="Input" Grid.Row="0">
            <TextBlock TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left">
                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.
                <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" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <StackPanel Grid.Row="0" Orientation="Horizontal">
                <TextBlock Style="{StaticResource BasicTextStyle}" TextWrapping="Wrap" Text="Effective Resolution:&#160;" FontWeight="Bold"/>
                <TextBlock Style="{StaticResource BasicTextStyle}" x:Name="ResolutionTextBlock" TextWrapping="Wrap" HorizontalAlignment="Stretch"/>
                <TextBlock Style="{StaticResource BasicTextStyle}" x:Name="ScaleTextBlock" TextWrapping="Wrap" HorizontalAlignment="Stretch"/>
            </StackPanel>

            <StackPanel Grid.Row="1" x:Name="OutputStackPanel" Orientation="Horizontal">
                <!-- default scaling -->
                <StackPanel Orientation="Vertical" Margin="0,0,20,0">
                    <TextBlock Style="{StaticResource BasicTextStyle}" Text="Default scaling" FontWeight="Bold" Margin="0,20,20,0"/>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="140"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="200"/>
                            <ColumnDefinition Width="200"/>
                        </Grid.ColumnDefinitions>

                        <!-- Outer border for the grid -->
                        <Border Grid.RowSpan="4" Grid.ColumnSpan="2" BorderThickness="2" BorderBrush="Black"/>

                        <!-- Header -->
                        <Border Grid.Row="0" Grid.Column="0" BorderThickness="2" BorderBrush="Black" Margin="6,6,2,2">
                            <TextBlock Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" FontWeight="Bold" Margin="5,5,5,5">UI element</TextBlock>
                        </Border>
                        <Border Grid.Row="0" Grid.Column="1" BorderThickness="2" BorderBrush="Black" Margin="2,6,6,2">
                            <TextBlock Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" FontWeight="Bold" Margin="5,5,5,5">Text</TextBlock>
                        </Border>

                        <Border Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" BorderThickness="2" BorderBrush="Black" Margin="6,2,2,6"/>
                        <Border Grid.Row="1" Grid.RowSpan="3" Grid.Column="1" BorderThickness="2" BorderBrush="Black" Margin="2,2,6,6"/>

                        <Rectangle x:Name="DefaultLayoutRect" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="LightCyan" Margin="5,5,5,5" Height="100" Width="100"/>
                        <TextBlock x:Name="DefaultRelativePx" Grid.Row="2" Grid.Column="0" Style="{StaticResource BasicTextStyle}" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="6,0,6,0" FontWeight="Bold"/>
                        <TextBlock x:Name="DefaultPhysicalPx" Grid.Row="3" Grid.Column="0" Style="{StaticResource BasicTextStyle}" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="6,0,6,8" FontWeight="Bold"/>

                        <TextBlock x:Name="DefaultLayoutText" Grid.Row="1" Grid.RowSpan="3" Grid.Column="1" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#00b9f2"/>
                    </Grid>
                </StackPanel>

                <StackPanel Orientation="Vertical">
                    <!-- override scaling -->
                    <TextBlock Style="{StaticResource BasicTextStyle}" Text="Override scaling" FontWeight="Bold" Margin="0,20,20,0"/>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="140"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="200"/>
                            <ColumnDefinition Width="200"/>
                        </Grid.ColumnDefinitions>

                        <!-- Outer border for the grid -->
                        <Border Grid.RowSpan="4" Grid.ColumnSpan="2" BorderThickness="2" BorderBrush="Black"/>

                        <!-- Header -->
                        <Border Grid.Row="0" Grid.Column="0" BorderThickness="2" BorderBrush="Black" Margin="6,6,2,2">
                            <TextBlock Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" FontWeight="Bold" Margin="5,5,5,5">UI element</TextBlock>
                        </Border>
                        <Border Grid.Row="0" Grid.Column="1" BorderThickness="2" BorderBrush="Black" Margin="2,6,6,2">
                            <TextBlock Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" FontWeight="Bold" Margin="5,5,5,5">Text</TextBlock>
                        </Border>

                        <Border Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" BorderThickness="2" BorderBrush="Black" Margin="6,2,2,6"/>
                        <Border Grid.Row="1" Grid.RowSpan="3" Grid.Column="1" BorderThickness="2" BorderBrush="Black" Margin="2,2,6,6"/>

                        <Rectangle x:Name="OverrideLayoutRect" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="LightCyan" Margin="5,5,5,5"/>
                        <TextBlock x:Name="OverrideRelativePx" Grid.Row="2" Grid.Column="0" Style="{StaticResource BasicTextStyle}" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="6,0,6,0" FontWeight="Bold"/>
                        <TextBlock x:Name="OverridePhysicalPx" Grid.Row="3" Grid.Column="0" Style="{StaticResource BasicTextStyle}" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="6,0,6,8" FontWeight="Bold"/>

                        <TextBlock x:Name="OverrideLayoutText" Grid.Row="1" Grid.RowSpan="3" Grid.Column="1" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#00b9f2"/>
                    </Grid>
                </StackPanel>
            </StackPanel>

            <!-- Add Storyboards to the visual states below as necessary for supporting the various layouts for the output section -->
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="OutputDefaultLayout"/>
                    <VisualState x:Name="OutputFullScreenPortrait">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Orientation" Storyboard.TargetName="OutputStackPanel">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Vertical" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="OutputBelow768Layout">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Orientation" Storyboard.TargetName="OutputStackPanel">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Vertical" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Grid>
    </Grid>
</common:LayoutAwarePage>