Windows Phone 7 - 屏幕方向

fmms 12年前

wp7支持竖屏和横屏,但是默认情况下,Silverlight程序以纵向开始,XNA程序以横向开始(游戏通常在宽屏下表现会更好)。我们可以通过修改SupportedOrientations=" Portrait" Orientation=" Portrait"来更改屏幕支持和启动的方向。

SupportedOrientations:支持屏幕的方向。有三种可选:

  • Portrait (默认值)
  • Landscape
  • PortraitOrLandscape

Orientation:启动屏幕的方向:

  • Landscape
  • LandscapeLeft (将电话向左翻转,头部在左)
  • LandscapeRight (将电话向右翻转,头部在右)
  • Portrait
  • PortraitDown (正常的竖直方向)
  • PortraitUp (倒置)

如果支持的方向为SupportedOrientations,那么当翻转屏幕时,系统会自动翻屏。但是一般系统自动翻转处理的都不好,那么就需要我们来重新布局,这是就要重写OrientationChanged。

public About()          {                InitializeComponent();         OrientationChanged += new EventHandler<OrientationChangedEventArgs>(About_OrientationChanged);          }

void About_OrientationChanged(object sender, OrientationChangedEventArgs e)          {                if (e.Orientation == PageOrientation.LandscapeLeft || e.Orientation== PageOrientation.LandscapeRight)                {                       TitlePanel.Visibility = Visibility.Collapsed;      //横屏不可见                }                 else if (e.Orientation == PageOrientation.PortraitDown || e.Orientation== PageOrientation.PortraitUp)                {                       TitlePanel.Visibility = Visibility.Visible;       //竖屏可见     }   }

下面提两个布局的技巧,如何是页面翻转后仍然好看。

1、使用自动调整大小和滚动

这个技巧需要在ScrollViewer控件中使用StackPanel,适用于需要显示列表数据或者一个控件接着一个控件显示的情况。 StackPanel允许将其内部的控件一个接一个地显示,ScrollViewer控件允许转屏的过程中当控件超出屏幕的时候在StackPanel中 显示滚动条。

步骤是替换(不是在Grid下面添加)Grid为ScrollViewer和StackPanel。如:

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

Windows Phone 7 - 屏幕方向

2、使用Grid布局

这个技巧的元素布局在Grid中。当方向改变的时候,通过编程的方式对元素的在Grid中的行和列重新定位(即更改子元素的Grid.Row和Grid.Column属性)。

XAML

<!--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 that 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="TestImage.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>

C#

(1)在 MainPage.xaml 文件的 XAML 代码中,将以下代码添加到页面顶部的 phone:PhoneApplicationPage 下。

OrientationChanged="PhoneApplicationPage_OrientationChanged"

(2)转到 MainPage.xaml.cs 并找到事件处理程序。下面的代码根据方向更改来切换按键列表的位置。

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 the portrait mode, move buttonList content to a visible row and column.                else              {                  Grid.SetRow(buttonList, 0);                  Grid.SetColumn(buttonList, 1);                }            }

Windows Phone 7 - 屏幕方向