在 Windows Phone 8.1 中正确处理屏幕方向

Question

我已经完成了我的应用程序并且一切正常，但是我刚刚意识到我的应用程序在屏幕旋转时不能正常运行，这意味着它可能会缩放到不同的屏幕分辨率。我在设计时使用了一个空白页面模板，但我找不到任何不涉及 Windows Phone 8 的文档。我必须做些什么来确保我的应用程序在旋转和不同屏幕尺寸期间正确缩放和运行?我发布的最后一个应用是针对 Windows Phone 7 的

<Page
x:Class="SynagramsWindows8App.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SynagramsWindows8App"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid ScrollViewer.HorizontalScrollBarVisibility="Auto">
    <Grid.Background>
        <ImageBrush ImageSource="Assets/cute-clouds-seamless-pattern.png" Stretch="UniformToFill"/>
    </Grid.Background>
    <TextBlock x:Name="lblMain" Margin="2,28,0,0" TextWrapping="Wrap" Text="SYNAGRAMS!" VerticalAlignment="Top" HorizontalAlignment="Stretch" FontFamily="Buxton Sketch" FontSize="72" TextAlignment="Center" Foreground="#FF085EF5"/>
    <Button x:Name="btnGameMode" Content="Game Modes" HorizontalAlignment="Stretch" Margin="70,168,70,0" VerticalAlignment="Top" Background="Transparent" BorderThickness="1" BorderBrush="#FF0E0474" FontFamily="Buxton Sketch" FontSize="48" Click="btnGameMode_Click" Foreground="#FF071570" RenderTransformOrigin="0.5,0.5"/>
    <Button x:Name="btnInstructions" Content="Instructions" HorizontalAlignment="Stretch" Margin="70,329,70,0" VerticalAlignment="Top" BorderBrush="#FF0E0474" BorderThickness="1" FontFamily="Buxton Sketch" FontSize="48" Click="btnInstructions_Click" Foreground="#FF071570" RenderTransformOrigin="0.5,0.5">

    </Button>
    <Button x:Name="btnTopScore" Content="Achievements" HorizontalAlignment="Stretch" Margin="70,470,70,50" VerticalAlignment="Top" BorderBrush="#FF0E0474" BorderThickness="1" FontFamily="Buxton Sketch" FontSize="48" Foreground="#FF071570" RenderTransformOrigin="0.5,0.5" Click="btnTopScore_Click">

    </Button>

</Grid>

这是纵向和横向图片的链接（稍后将修复字体大小）。我可以将屏幕锁定为纵向。

App main screen pics

Answer 1

你已经硬编码了 Margins，当你想让你的应用支持不同的方向/分辨率时，这并不是什么好事。

考虑在网格中使用行/列，以及高度/宽度的 星 单位，然后它将自动缩放：

（我不知道你希望你的布局是什么样子，所以我放了 Height 的示例值）

<Grid>
   <Grid.Background>
      <ImageBrush ImageSource="Assets/cute-clouds-seamless-pattern.png" Stretch="UniformToFill"/>
   </Grid.Background>
   <Grid.RowDefinitions>
       <RowDefinition Height="2*"/>
       <RowDefinition Height="1*"/>
       <RowDefinition Height="1*"/>
   </Grid.RowDefinitions>

   <TextBlock Grid.Row="0" x:Name="lblMain" Margin="2" TextWrapping="Wrap" Text="SYNAGRAMS!" VerticalAlignment="Top" HorizontalAlignment="Stretch" FontFamily="Buxton Sketch" FontSize="72" TextAlignment="Center" Foreground="#FF085EF5"/>
   <Button Grid.Row="1" x:Name="btnGameMode" Content="Game Modes" HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="Transparent" BorderThickness="1" BorderBrush="#FF0E0474" FontFamily="Buxton Sketch" FontSize="48" Click="btnGameMode_Click" Foreground="#FF071570" RenderTransformOrigin="0.5,0.5"/>
   <Button Grid.Row="2" x:Name="btnInstructions" Content="Instructions" HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderBrush="#FF0E0474" BorderThickness="1" FontFamily="Buxton Sketch" FontSize="48" Click="btnInstructions_Click" Foreground="#FF071570" RenderTransformOrigin="0.5,0.5"/>    
   <!-- and so on -->
</Grid>

如果您使用星形作为高度/宽度的行/列，那么空间将根据屏幕计算。请看一些教程和MSDN： one、two、three、four 可能还有更多。

Answer 2

您可以通过转到 Package.appxmanifest 并在“支持的旋转：”下检查您的应用使用的方向来选择您的应用支持的方向。