导出 (0) 打印
全部展开
信息
您所需的主题如下所示。但此主题未包含在此库中。

快速入门:Windows Phone 8 的屏幕方向

2014/6/18

适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

Windows Phone 支持纵向和横向屏幕方向。本快速入门描述如何在 Windows Phone 中处理方向更改。

本主题包括以下部分。

Windows Phone 支持以下屏幕方向:

  • 纵向

  • 横向朝左

  • 横向朝右

用户可以通过旋转设备轻松启动从一个方向到另一个方向的更改。在模拟器中测试您的应用时,您可以通过单击模拟器工具栏中的按钮,切换屏幕方向。方向按钮包含带箭头的矩形,它们指示方向的更改。

Screen Orientation - Emulator

处于纵向方向时,页面按垂直方向显示,以使页面的高度要大于其宽度。

处于两种横向方向的任一方向时,“状态栏”“应用程序栏”各自位于具有“电源”“启动”按钮的屏幕的一侧。“横向朝左”视图的“状态栏”在左侧,“横向朝右”视图的“状态栏”在右侧。

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

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

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

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

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

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

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

AP_Con_Orien_Scroll1

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

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

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

  2. Grid 用于内容面板。

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

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

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

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);
    }
} 

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

AP_Con_Orientation(Port)

显示:
© 2014 Microsoft