Windows Phone 的屏幕方向

转自：http://msdn.microsoft.com/zh-cn/library/windowsphone/develop/jj207002(v=vs.105).aspx

 

Windows Phone 支持纵向和横向屏幕方向。

Windows Phone 支持以下屏幕方向：

• 纵向

• 向左横向

• 向右横向

应用的默认方向为纵向，并且您必须添加附加代码以支持横向。您不能只指定向左横向或向右横向方向。如果要支持横向方向，您必须同时支持向左和向右两个方向。要指定应用支持纵向和横向，您必须在 XAML 或代码中将SupportedOrientations 属性设置为PortraitOrLandscape。

可以使用不同的方法，以纵向或横向方向显示内容。其中两种方法是滚动和网格布局。

 

滚动方法

滚动方法使用放置在 ScrollViewer 控件内的StackPanel 控件。如果要显示列表中的内容或者如果您在页面上拥有一个接着一个显示的不同控件，请使用此方法。StackPanel 允许您在应用中一个接一个地对子元素进行排序，且当您从纵向切换到横向时，如果屏幕上容纳不下 UI 元素，ScrollViewer 控件允许您滚动浏览StackPanel。

要使用滚动方法，通常您会执行以下步骤。

• 将页面的 SupportedOrientations 属性更改为PortraitOrLandscape。

• 将“内容面板”区域中的默认 Grid 替换为ScrollViewer 和StackPanel。

下面的示例演示一个 StackPanel 和ScrollViewer 中的多个控件。

XAML

<ScrollViewer x:Name="ContentGrid" Grid.Row="1" VerticalScrollBarVisibility="Auto">
    <!--You must apply a background to the StackPanel control or you
    will be unable to pan the contents.-->
    <StackPanel Background="Transparent" >
        <!--Adding various controls and UI elements.-->
        <Button Content="This is a Button" />
        <Rectangle Width="100" Height="100" Margin="12,0"
            HorizontalAlignment="Left" Fill="{StaticResource PhoneAccentBrush}"/>
        <Rectangle Width="100" Height="100" HorizontalAlignment="Center"
            Fill="{StaticResource PhoneAccentBrush}"/>
        <Rectangle Width="100" Height="100" Margin="12,0"
            HorizontalAlignment="Right" Fill="{StaticResource PhoneAccentBrush}"/>
        <TextBlock Text="This is a line of text that will wrap in portrait
            orientation but not landscape orientation." TextWrapping="Wrap" />
        <CheckBox Content="A CheckBox"/>
        <RadioButton Content="A RadioButton" />
    </StackPanel>
</ScrollViewer> 

下图演示纵向和横向方向的滚动行为。纵向方向不要求滚动，但是横向方向要求滚动。

 

网格布局方法

网格布局方法将 UI 元素放置在 Grid 中。当发生方向更改时，您可以采用编程方式重新将元素放置在Grid 的不同单元格中。

要使用网格布局方法，通常您会执行以下步骤。

1. 将页面的 SupportedOrientations 属性更改为PortraitOrLandscape。

2. 将 Grid 用于内容面板。

3. 创建一个 OrientationChanged 事件处理程序并添加代码以重新将元素放置在Grid 中。

下面的示例将创建一个 2 x 2 的 Grid 来放置图像和按扭的集合。方向更改后，OrientationChanged 事件处理程序会将元素重新放置在 Grid 中。

XAML

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <!--Create a 2 x 2 grid to store an image and button layout.-->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!--Add an image to the grid. Ensure the image height and width
        are set to 300 and 500 respectively for this example.-->
    <Image x:Name="Image1" Grid.Row="0" Grid.Column="0"
        Stretch="Fill" HorizontalAlignment="Center" Source="licorice.jpg"
        Height="300" Width="500"/>
    <!--Add a StackPanel with buttons to the row beneath the image.-->
    <StackPanel x:Name="buttonList" Grid.Row="1" Grid.Column="0"
        HorizontalAlignment="Center" >
        <Button Content="Action 1" />
        <Button Content="Action 2" />
        <Button Content="Action 3" />
        <Button Content="Action 4" />
    </StackPanel>
</Grid> 

C#

private void PhoneApplicationPage_OrientationChanged(
object sender, OrientationChangedEventArgs e)
{
    // Switch the placement of the buttons based on an orientation change.
    if ((e.Orientation & PageOrientation.Portrait) == (PageOrientation.Portrait))
    {
        Grid.SetRow(buttonList, 1);
        Grid.SetColumn(buttonList, 0);
    }
    // If not in portrait, move buttonList content to visible row and column.
    else
    {
        Grid.SetRow(buttonList, 0);
        Grid.SetColumn(buttonList, 1);
    }
} 

下图演示纵向和横向方向的网格布局行为。在纵向方向中，按钮被放置在底部。在横向方向中，按钮被放置在右侧。