将 UWP 应用程序扩展到所有手机尺寸答案

【问题标题】：Scale UWP Application to all phone sizes将 UWP 应用程序扩展到所有手机尺寸
【发布时间】：2016-11-17 04:39:47
【问题描述】：

所以我正在构建主要针对手机的 UWP 应用程序，但由于它可以在 PC 和平板电脑上运行，我使用 VisualStateManager 来纠正更大屏幕的布局。现在手机也有不同的屏幕尺寸，我正在寻找一种方法来简单地缩放页面中的所有组件，而无需为每个手机和屏幕分辨率使用视觉状态，或者使用状态管理器但不必重新定位每个屏幕尺寸的每个元素（5" 和 6" 之间的手机很容易，因为您可以看到 VS 2015 中更改的预览，但对于较小的手机，它非常烦人）。这是我的应用程序的示例页面：

    <Grid>
    <Canvas x:Name="canvas">
        <Canvas.Background>
            <ImageBrush Stretch="Fill" ImageSource="Assets/start-01.jpg"/>
        </Canvas.Background>
        <RelativePanel x:Name="relativePanel"  Canvas.Left="-3" Height="612" Canvas.Top="10" >

            <Image x:Name="play" HorizontalAlignment="Left" Height="36" Margin="83,271,-3,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="play_Tapped"/>
            <TextBlock x:Name="playTB" Height="36" Margin="130,265,69.333,0" TextWrapping="Wrap" Text="RACE" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="play_Tapped" FontFamily="Lucida Sans Unicode"/>
            <Image x:Name="highscoresBT" HorizontalAlignment="Left" Height="36" Margin="83,337,-3,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="highscoresBT_Tapped"/>
            <TextBlock x:Name="highscoreTB" Height="36" Margin="85,337,76,0" TextWrapping="Wrap" Text="HIGHSCORES" FontSize="24" VerticalAlignment="Top" CharacterSpacing="194" Tapped="highscoresBT_Tapped" FontFamily="Lucida Sans Unicode"/>
            <Image x:Name="storeBT" HorizontalAlignment="Left" Height="36" Margin="83,403,-3,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="storeBT_Tapped"/>
            <TextBlock x:Name="storeTB" HorizontalAlignment="Left" Height="36" Margin="124,397,-108,0" TextWrapping="Wrap" Text="STORE" Width="151" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="storeBT_Tapped"/>
            <Image x:Name="helpBut" HorizontalAlignment="Left" Height="100" Margin="144,522,-3,0" VerticalAlignment="Top" Width="72" Source="Assets/helpBut-01.png" Tapped="helpBut_Tapped"/>
            <Image x:Name="coinsBG" HorizontalAlignment="Left" Height="19" Margin="295,0,-3,0" VerticalAlignment="Top" Width="56" Source="Assets/comp bar-01.png" Stretch="Fill"/>
            <Image x:Name="coinsIC" HorizontalAlignment="Left" Height="19" VerticalAlignment="Top" Width="14" Source="Assets/coins-01.png" Margin="329,1,-3,0"/>
            <TextBlock x:Name="coinsOwnedTB" HorizontalAlignment="Left" Height="14" Margin="303,2,-3,0" TextWrapping="Wrap" Text="120" VerticalAlignment="Top" Width="21" FontSize="10" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
            <Image x:Name="scoreBG" HorizontalAlignment="Left" Height="23" Margin="13,0,-3,0" VerticalAlignment="Top" Width="136" Source="Assets/comp bar-01.png" Stretch="Fill"/>
            <TextBlock x:Name="scoreNameTB" HorizontalAlignment="Left" Height="21" Margin="14,2,-3,0" TextWrapping="Wrap" Text="Score: " VerticalAlignment="Top" Width="48" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
            <TextBlock x:Name="scoreTB" HorizontalAlignment="Left" Height="21" Margin="62,2,-3,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="87" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
            <Image x:Name="feedbackBT" HorizontalAlignment="Left" Height="36" Margin="83,469,-3,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="feedback_Tapped"/>
            <TextBlock x:Name="feedbackTB" Height="36" Margin="96,463,60.667,0" TextWrapping="Wrap" Text="SUPPORT" FontSize="30" VerticalAlignment="Top" Tapped="feedback_Tapped" FontFamily="Lucida Sans Unicode" TextAlignment="Center" CharacterSpacing="200"/>
        </RelativePanel>
    </Canvas>
</Grid>

所以基本上我需要一种方法来根据 Grid/Canvas/Relative 面板大小来缩放和重新定位所有元素（对于这个页面来说，它们并不是真正需要的，这只是某种试验）。

也许是一种编程方式，不一定会改变 XAML 代码。

提前致谢：)

【问题讨论】：

标签： c# xaml uwp visualstatemanager

【解决方案1】：

如果您希望您的应用具有可扩展性/反应性，您确实应该避免使用 Canvas 来布局视觉元素。此外，当您在使用 Canvas 时，您应该使用 Canvas.Left 和 Canvas.Top 属性来定位元素，而不是 Margin 属性。

无论如何，下面的 XAML 将提供一个可缩放的布局，类似于您的画布布局，但本机可调整大小以适应任何显示。不幸的是，由于我没有您的所有资产，因此我无法验证它是否完全匹配，但对您正在尝试做的事情进行了一些有根据的猜测：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0" Margin="10">
        <Image x:Name="scoreBG" HorizontalAlignment="Left" Height="23" VerticalAlignment="Top" Source="Assets/comp bar-01.png" Stretch="Fill"/>
        <TextBlock x:Name="scoreNameTB" HorizontalAlignment="Left" Height="21" TextWrapping="Wrap" Text="Score: " VerticalAlignment="Top" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="1" Margin="10">
        <Image x:Name="helpBut" HorizontalAlignment="Left" VerticalAlignment="Top" Source="Assets/helpBut-01.png" Tapped="helpBut_Tapped"/>
        <Image x:Name="coinsBG" HorizontalAlignment="Left" VerticalAlignment="Top" Source="Assets/comp bar-01.png" Stretch="Fill"/>
        <Image x:Name="coinsIC" HorizontalAlignment="Left" VerticalAlignment="Top" Source="Assets/coins-01.png"/>
        <TextBlock x:Name="coinsOwnedTB" HorizontalAlignment="Left" Height="14" TextWrapping="Wrap" Text="120" VerticalAlignment="Top"  FontSize="10" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
    </StackPanel>
    <Grid Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Center" Margin="10">
            <Image x:Name="play" Height="36" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="play_Tapped"/>
            <TextBlock x:Name="playTB" Height="36" TextWrapping="Wrap" Text="RACE" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="play_Tapped" FontFamily="Lucida Sans Unicode"/>
        </StackPanel>
        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" Margin="10">
            <Image x:Name="highscoresBT" HorizontalAlignment="Left" Height="36" VerticalAlignment="Top" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="highscoresBT_Tapped"/>
            <TextBlock x:Name="highscoreTB" Height="36" TextWrapping="Wrap" Text="HIGHSCORES" FontSize="24" VerticalAlignment="Top" CharacterSpacing="194" Tapped="highscoresBT_Tapped" FontFamily="Lucida Sans Unicode"/>
        </StackPanel>
        <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center" Margin="10">
            <TextBlock x:Name="storeTB" HorizontalAlignment="Left" TextWrapping="Wrap" Text="STORE" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="storeBT_Tapped"/>
        </StackPanel>
        <StackPanel Grid.Row="3" Orientation="Horizontal" HorizontalAlignment="Center" Margin="10">
            <Image x:Name="feedbackBT" HorizontalAlignment="Left" Height="36" VerticalAlignment="Top" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="feedback_Tapped"/>
            <TextBlock x:Name="feedbackTB" Height="36" TextWrapping="Wrap" Text="SUPPORT" FontSize="30" VerticalAlignment="Top" Tapped="feedback_Tapped" FontFamily="Lucida Sans Unicode" TextAlignment="Center" CharacterSpacing="200"/>
        </StackPanel>
    </Grid>
</Grid>

请注意，在大多数地方，我已经删除了边距和指定的宽度/高度属性，因为这些属性应该根据显示/DPI/语言环境自动调整大小。

希望对你有帮助。

【讨论】：

你的尝试帮助我理解了一些东西，所以谢谢你。虽然我所寻找的无法通过这个实现，但我回答了我的问题，发现 ViewBox 可以完成缩放工作，而无需调整我拥有的所有页面，其中许多页面必须有一个画布控件，并且使用您的方法无法轻松更改以进行扩展。

【解决方案2】：

在 ViewBox 的帮助下，我设法得到了我想要的东西，它可以自动缩放我的应用程序以适应屏幕大小：

    <Viewbox Stretch="UniformToFill" >
    <Grid x:Name="canvas" >
        <Grid.Background>
            <ImageBrush Stretch="Fill" ImageSource="Assets/start-01.jpg"/>
        </Grid.Background>
        <Image x:Name="play" Height="34" HorizontalAlignment="Left" Margin="78,281,0,325" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="play_Tapped"/>
        <TextBlock x:Name="playTB" Height="34" Margin="125,276,90,0" TextWrapping="Wrap" Text="RACE" FontSize="30" CharacterSpacing="364" Tapped="play_Tapped" FontFamily="Lucida Sans Unicode"  VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment"/>
        <Image x:Name="highscoresBT" HorizontalAlignment="Left" Height="34" Margin="78,335,0,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="highscoresBT_Tapped"/>
        <TextBlock x:Name="highscoreTB" Height="34" Margin="88,335,82,0" TextWrapping="Wrap" Text="HIGHSCORES" FontSize="24" VerticalAlignment="Top" CharacterSpacing="100" Tapped="highscoresBT_Tapped" FontFamily="Lucida Sans Unicode"/>
        <Image x:Name="storeBT" HorizontalAlignment="Left" Height="34" Margin="78,398,0,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="storeBT_Tapped"/>
        <TextBlock x:Name="storeTB" HorizontalAlignment="Left" Height="34" Margin="111,392,0,0" TextWrapping="Wrap" Text="STORE" Width="151" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="storeBT_Tapped"/>
        <Image x:Name="helpBut" Height="96" Margin="115,511,122,0" VerticalAlignment="Top" Source="Assets/helpBut-01.png" Tapped="helpBut_Tapped" d:LayoutOverrides="HorizontalAlignment, LeftPosition, RightPosition"/>
        <Image x:Name="coinsBG" HorizontalAlignment="Left" Height="18" Margin="294,12,0,0" VerticalAlignment="Top" Width="56" Source="Assets/comp bar-01.png" Stretch="Fill"/>
        <Image x:Name="coinsIC" HorizontalAlignment="Left" Height="18" VerticalAlignment="Top" Width="14" Source="Assets/coins-01.png" Margin="328,13,0,0"/>
        <TextBlock x:Name="coinsOwnedTB" HorizontalAlignment="Left" Height="14" Margin="302,14,0,0" TextWrapping="Wrap" Text="120" VerticalAlignment="Top" Width="21" FontSize="10" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
        <Image x:Name="scoreBG" HorizontalAlignment="Left" Height="22" VerticalAlignment="Top" Width="136" Source="Assets/comp bar-01.png" Stretch="Fill" Margin="12,12,0,0" d:LayoutOverrides="HorizontalAlignment"/>
        <TextBlock x:Name="scoreNameTB" HorizontalAlignment="Left" Height="20" Margin="13,14,0,0" TextWrapping="Wrap" Text="Score: " VerticalAlignment="Top" Width="48" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
        <TextBlock x:Name="scoreTB" HorizontalAlignment="Left" Height="20" Margin="61,14,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="87" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257" d:LayoutOverrides="HorizontalAlignment"/>
        <Image x:Name="feedbackBT" HorizontalAlignment="Left" Height="34" Margin="78,461,0,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="feedback_Tapped"/>
        <TextBlock x:Name="feedbackTB" Height="34" Margin="91,455,98,0" TextWrapping="Wrap" Text="SUPPORT" FontSize="30" VerticalAlignment="Top" Tapped="feedback_Tapped" FontFamily="Lucida Sans Unicode" TextAlignment="Center" CharacterSpacing="200"/>
    </Grid>
</Viewbox>

这对我有用:)

【讨论】：