cati sources mon stack mar ber XML break pac

俺們都知道，智能手機可以通過旋轉手機來改變屏幕的顯示方向，更多的時候，對於屏幕方向的改變，我們要做出相應的處理，例如，當手機屏幕方向從縱向變為橫向時，可能要重新排列頁面上的控件以適應顯示區域的變化。

前面我們討論過，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. }

看看效果。看看效果。

縱向。

橫向。

Windows Phone開發（6）：處理屏幕方向的改變