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

这里是link纵向和横向的图片（稍后会修复字体大小）。我可能只是将屏幕锁定为纵向。

App main screen pics

Answer 1

您可以 select 您的应用程序支持哪些方向，方法是转到 Package.appxmanifest 并在 "Supported rotations:" 下检查您的应用程序使用的方向。

Answer 2

您硬编码了边距，当您想让您的应用支持不同 orientations/resolutions.

时，这不是什么好事

考虑在您的网格中使用 Rows/Columns，以及 Height/Width 的星单位，然后它会自动缩放：

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

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

如果您使用 Rows/Columns 与 Star 作为 Height/Width 那么 space 将根据屏幕计算。请查看一些教程和 MSDN： one, two, three, four 可能更多。

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

Handling screen orientation properly in WIndows Phone 8.1

c#

xaml

windows-phone-8

windows-8.1

windows-phone-8.1