Handling screen orientation properly in WIndows Phone 8.1

Question

I've finished my app and everything works properly, however I just realized my app does not act properly when the screen is rotated, which means its probably going to scale to different screen resolutions either. I used a blank page template when I designed it, and I can't find any documentation that doesn't talk about Windows Phone 8. What do I have to do to make sure my app scales and acts properly during rotations and different screen sizes? Last app I published was for 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>

Here is a link to the pics of portrait and landscape (going to fix font sizes later). I may just lock the screen to portrait.

App main screen pics

Answer 1

You have hardcoded Margins which is nothing good when you want to make your app support different orientations/resolutions.

Consider using Rows/Columns in your grid, along with Star units for Height/Width, then it will scale automactically:

(I don't know how you wish your layout to look like, so I've put example values of 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>

If you use Rows/Columns with Star as Height/Width then the space will be calculated according to screen. Please take a look at some tutorials and MSDN: one , two , three , four and probably more.

Answer 2

您可以转到Package.appxmanifest，然后在“支持的轮播：”下选择应用程序支持的方向，然后检查应用程序可以使用的方向。