将尺寸UWP应用程序应用于所有手机尺寸

Question

因此，我正在构建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> 

所以basiclly我需要一种方法来扩展和重新定位全部根据网/月/相对面板尺寸的元素（他们是不是真的需要这个这只是一些试验）。

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

感谢提前:)

Answer 1

我设法得到了我与自动缩放我的应用程序，以适应屏幕尺寸的视框的帮助下寻找：

<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> 

这对我来说:)

Answer 2

如果您希望您的应用程序具有可扩展性/无功，你真的应该避免使用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> 

需要注意的是，在大多数地方，我已经删除了边距和指定的宽度/高度属性，因为这些属性应该保留为基于display/DPI/locale的自动大小。

希望它有帮助。