將尺寸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的自動大小。

希望它有幫助。