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

时间:2015-03-14 12:48:50

标签: c# xaml windows-phone-8 windows-phone-8.1 windows-8.1

我已经完成了我的应用程序并且一切正常,但是我刚刚意识到我的应用程序在屏幕旋转时无法正常运行,这意味着它可能会扩展到不同的屏幕分辨率。我在设计时使用了空白页面模板,但我找不到任何没有谈论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

2 个答案:

答案 0 :(得分:1)

你有硬编码的边距,如果你想让你的应用支持不同的方向/分辨率,这没什么好处。

考虑在网格中使用行/列,以及 Star 单位的高度/宽度,然后它将自动扩展:

(我不知道你希望你的布局如何,所以我已经把高度的示例值放在了

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

如果您使用 Star 的行/列作为高度/宽度,则将根据屏幕计算空间。请看一些教程和MSDN: onetwothreefour以及可能更多。

答案 1 :(得分:0)

您可以通过转到Package.appxmanifest并在“支持的轮播:”下选择应用的方向来选择应用支持的方向。