Windows Phone开发（6）：处理屏幕方向的改变

Windows Phone开发（6）：处理屏幕方向的改变
俺们都知道，智能手机可以通过旋转手机来改变屏幕的显示方向，更多的时候，对于屏幕方向的改变，我们要做出相应的处理，例如，当手机屏幕方向从纵向变为横向时，可能要重新排列页面上的控件以适应显示区域的变化。

前面我们讨论过，Silverlight for Windows Phone的页面布局有三个常用的布局控件，那么，当屏幕方向改变后，我们所做的对布局的更改基础上是基于这几个容器进行的操作。

本文我将通过三个示例来分别说明。

开始之前，先说一下PhoneApplicationPage类的OrientationChanged事件，该事件就是当屏幕的方向改变之后发生，我们从事件参数OrientationChangedEventArgs类的实例的Orientation属性中获取当前屏幕的方向，即改变后的方向，比如，原来屏幕是纵向，现在我把手机屏幕改为横向，则Orientation属性获取到的方向就是横向的，呵呵，当然也包括从哪个方向旋转过来的，这里只是举例而已。

要使页面支持旋转，要把PhoneApplicationPage的SupportedOrientations属性改为PortraitOrLandscape，然后可以通过定义OrientationChanged事件来处理布局。形如：
1. <phone:PhoneApplicationPage
3. ..............
4. SupportedOrientations="PortraitOrLandscape"
5. Orientation="Portrait"
6. OrientationChanged="PhoneApplicationPage_OrientationChanged">
一、Grid控件的处理。
1. <phone:PhoneApplicationPage
2. x:Class="Sample_PageDir.Page1"
3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5. xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
6. xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
7. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
8. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9. FontFamily="{StaticResource PhoneFontFamilyNormal}"
10. FontSize="{StaticResource PhoneFontSizeNormal}"
11. Foreground="{StaticResource PhoneForegroundBrush}"
12. mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
13. shell:SystemTray.IsVisible="True"
14. SupportedOrientations="PortraitOrLandscape"
15. Orientation="Portrait"
16. OrientationChanged="PhoneApplicationPage_OrientationChanged">
18. <Grid x:Name="layoutRoot">
19. <Grid.RowDefinitions>
20. <RowDefinition Height="Auto" />
21. <RowDefinition Height="Auto" />
22. </Grid.RowDefinitions>
23. <Grid.ColumnDefinitions>
24. <ColumnDefinition Width="Auto" />
25. <ColumnDefinition Width="Auto" />
26. </Grid.ColumnDefinitions>
27. <Image x:Name="img" Source="http://gubapic.eastmoney.com/member/e68/e681999/e68199920091216131540.jpg" Stretch="UniformToFill" Width="270" Grid.Row="0" Grid.Column="0" />
28. <TextBlock x:Name="txtBlock"
29. Grid.Row="1"
30. Grid.Column="0"
31. FontSize="70"
32. Margin="28">
33. <Run Foreground="Coral">信春哥</Run>
34. <LineBreak/>
35. <Run Foreground="Yellow">唱情歌</Run>
36. <LineBreak/>
37. <Run Foreground="SkyBlue">不挂科</Run>
38. </TextBlock>
39. </Grid>
41. </phone:PhoneApplicationPage>
页面主要有两个控件，一个用于显示图片，一个用于显示文本信息，通过事件处理代码来相应改变两个控件的布局。
1. private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
2. {
3. // 如果是横向的
4. if (e.Orientation == PageOrientation.Landscape ||
5. e.Orientation == PageOrientation.LandscapeLeft ||
6. e.Orientation == PageOrientation.LandscapeRight)
7. {
8. Grid.SetColumn(this.img, 0);
9. Grid.SetRow(this.img, 0);
10. Grid.SetRow(this.txtBlock, 0);
11. Grid.SetColumn(this.txtBlock, 1);
12. }
13. // 如果是纵向
14. else if (e.Orientation == PageOrientation.Portrait ||
15. e.Orientation == PageOrientation.PortraitDown ||
16. e.Orientation == PageOrientation.PortraitUp)
17. {
18. Grid.SetColumn(this.img, 0);
19. Grid.SetRow(this.img, 0);
20. Grid.SetRow(this.txtBlock, 1);
21. Grid.SetColumn(this.txtBlock, 0);
22. }
23. else
24. {
25. Grid.SetColumn(this.img, 0);
26. Grid.SetRow(this.img, 0);
27. Grid.SetRow(this.txtBlock, 1);
28. Grid.SetColumn(this.txtBlock, 0);
29. }
30. }
按F5运行程序，默认的屏幕方向是纵向的，如下图所示：

好，现在，我们把屏幕旋转一下，看看会怎么样。

二、StackPanel控件的处理。
1. <phone:PhoneApplicationPage
2. x:Class="Sample_PageDir.Page2"
3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5. xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
6. xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
7. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
8. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9. FontFamily="{StaticResource PhoneFontFamilyNormal}"
10. FontSize="{StaticResource PhoneFontSizeNormal}"
11. Foreground="{StaticResource PhoneForegroundBrush}"
12. SupportedOrientations="PortraitOrLandscape"
13. OrientationChanged="PhoneApplicationPage_OrientationChanged"
14. Orientation="Portrait"
15. mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
16. shell:SystemTray.IsVisible="True">
18. <phone:PhoneApplicationPage.Resources>
19. <Style TargetType="TextBlock">
20. <Setter Property="FontSize" Value="46"/>
21. </Style>
22. </phone:PhoneApplicationPage.Resources>
24. <StackPanel x:Name="pl">
25. <TextBlock Text="文本一"/>
26. <TextBlock Text="文本二"/>
27. <TextBlock Text="文本三"/>
28. </StackPanel>
29. </phone:PhoneApplicationPage>
后台事件处理代码。
1. private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
2. {
3. if (e.Orientation == PageOrientation.Landscape ||
4. e.Orientation == PageOrientation.LandscapeLeft ||
5. e.Orientation == PageOrientation.LandscapeRight)
6. {
7. this.pl.Orientation = System.Windows.Controls.Orientation.Horizontal;
8. }
9. else
10. {
11. this.pl.Orientation = System.Windows.Controls.Orientation.Vertical;
12. }
13. }
运行，默认方向是纵向。

把屏幕旋转后。

三、Canvas控件的处理。
1. <phone:PhoneApplicationPage
2. x:Class="Sample_PageDir.Page3"
3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5. xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
6. xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
7. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
8. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9. FontFamily="{StaticResource PhoneFontFamilyNormal}"
10. FontSize="{StaticResource PhoneFontSizeNormal}"
11. Foreground="{StaticResource PhoneForegroundBrush}"
12. SupportedOrientations="PortraitOrLandscape"
13. Orientation="Portrait"
14. OrientationChanged="PhoneApplicationPage_OrientationChanged"
15. mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
16. shell:SystemTray.IsVisible="True">
18. <Canvas x:Name="cv">
19. <Rectangle x:Name="rect1"
20. Width="232"
21. Height="238"
22. Fill="Red"
23. Canvas.Left="88"
24. Canvas.Top="88"/>
25. <Rectangle x:Name="rect2"
26. Height="192"
27. Width="275"
28. Fill="Yellow"
29. Canvas.Top="268"
30. Canvas.Left="155"/>
31. </Canvas>
33. </phone:PhoneApplicationPage>
后台代码。后台代码。
1. private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
2. {
3. if (e.Orientation== PageOrientation.Landscape||e.Orientation== PageOrientation.LandscapeLeft||e.Orientation== PageOrientation.LandscapeRight)
4. {
5. Canvas.SetTop(this.rect1, 37);
6. Canvas.SetLeft(this.rect1, 46);
7. Canvas.SetTop(this.rect2, 240);
8. Canvas.SetLeft(this.rect2, 462);
9. }
10. else
11. {
12. Canvas.SetTop(this.rect1, 88);
13. Canvas.SetLeft(this.rect1, 88);
14. Canvas.SetTop(this.rect2, 268);
15. Canvas.SetLeft(this.rect2, 155);
16. }
17. }
看看效果。看看效果。

纵向。

横向。
相关阅读:
乘法DAC一点知识
 #4 判断字符串是否为整数
 #3 不使用循环输出1到100
#2 判断一个字符串是否包含重复字符
 #22 结语
 #1 组成互不相同且不重复的三位数
 #21 Python异常
 #19 re&jieba模块
 2020国庆正睿笔记
 2019正睿csp-s赛前冲刺
原文地址：https://www.cnblogs.com/xieweikai/p/6833109.html

Windows Phone开发（6）：处理屏幕方向的改变

一、Grid控件的处理。

二、StackPanel控件的处理。

三、Canvas控件的处理。