Windows phone开发 页面布局之屏幕方向(1/2)

本篇文章主要介绍了"Windows phone开发 页面布局之屏幕方向"，主要涉及到Application,Windows phone方面的内容，对于Windows Phone开发感兴趣的同学可以参考一下： （博客部分内容参考Windows phone开发文档）Windows phone的屏幕方向是利用Windows phone设备的方向传感器提供的数据实现切换的。...

（博客部分内容参考Windows phone开发文档）

Windows phone的屏幕方向是利用Windows phone设备的方向传感器提供的数据实现切换的。 Windows phone支持纵向和横向屏幕方向，其中横向屏幕包括横向朝左和横向朝右。

应用的默认方向为纵向，如果要想应用支持纵向和横向，要在 XAML 或代码中将SupportedOrientations属性设置为PortraitOrLandscape。 Windows phone开发中还提供了OrientationChanged事件，用于检测屏幕方向发生变化时触发事件行为。

将SupportedOrientations属性设置为PortraitOrLandscape后，应该对界面进行设置以确保当设备方向发生改变时设备界面能友好的显示界面 可以使用以下两种方法：

　　（1）滚动方法：如果要显示列表中的内容或者如果页面上包含接连显示的不同控件，请使用此方法。 使用放置在ScrollViewer 控件内的 StackPanel 控件。StackPanel可以在应用中对子元素进行排序，而且当从纵向切换到横向时，如果屏幕上容纳不下UI元素，ScrollViewer控件支持滚动浏览StackPanel。

　　　　若要使用滚动方法，首先将页面的SupportedOrientations属性更改为 PortraitOrLandscape。然后把“ContentPanel”区域中的默认Grid替换为 ScrollViewer 和 StackPanel。

　　　　下面看一个例子，主要代码如下：

　　　　MainPage.xaml

 1<ScrollViewer x:Name="ContentGrid" Grid.Row="1" VerticalScrollBarVisibility="Auto"> 2<StackPanel Background="Transparent"> 3<TextBlock Text="hello SupportedOrientations" TextWrapping="Wrap"/> 4<TextBlock Text="hello SupportedOrientations" TextWrapping="Wrap"/> 5<TextBlock Text="hello SupportedOrientations" TextWrapping="Wrap"/> 6<Rectangle Width="100" Height="100" Margin="12,0" 7            HorizontalAlignment="Left" Fill="Blue"/> 8<Rectangle Width="100" Height="100" Margin="12,0" 9            HorizontalAlignment="Left" Fill="Yellow"/>10<Rectangle Width="100" Height="100" Margin="12,0"11            HorizontalAlignment="Left" Fill="RosyBrown"/>12StackPanel>13ScrollViewer>

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

　　　　要使用网格布局方法，首先要将页面的SupportedOrientations 属性更改为 PortraitOrLandscape。然后将Grid用于内容面板。 接下来就是最关键的一步：创建一个OrientationChanged 事件处理程序并添加代码以重新将元素放置在 Grid 中。

　　　　下面看一个例子，主要代码如下：

　　　　MainPage.xaml

 1<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 2<Grid.RowDefinitions> 3<RowDefinition Height="Auto"/> 4<RowDefinition Height="*"/> 5Grid.RowDefinitions> 6<Grid.ColumnDefinitions> 7<ColumnDefinition Width="Auto"/> 8<ColumnDefinition Width="*"/> 9Grid.ColumnDefinitions>10<Image x:Name="Image1" Grid.Row="0" Grid.Column="0"11        Stretch="Fill" HorizontalAlignment="Center" Source="1.jpg" Width="200" Margin="0,0,0,238" Grid.RowSpan="2"/>12<Image x:Name="Image2" Grid.Row="1" Grid.Column="0"13        Stretch="Fill" HorizontalAlignment="Center" Source="2.jpg" Width="200" Margin="0,324,0,10"/>14Grid>

　　　　MainPage.xaml.cs