Windows Phone Development (6): Handling Changes in screen orientation

We all know that smartphones can be rotated to change the display direction of the screen, more time, for the screen direction of change, we have to do the appropriate processing, for example, when the phone screen orientation from portrait to landscape, you may want to rearrange the controls on the page to accommodate the changes in the display area.

As we discussed earlier, the page layout of the Silverlight for Windows phone has three common layout controls, so when the screen orientation changes, the changes we make to the layout are based on the actions of these containers. In this article, I will explain each of the three examples. Before you begin, talk about the orientationchanged event of the PhoneApplicationPage class, which occurs when the orientation of the screen changes. We get the direction of the current screen from the Orientation property of the instance of the event argument Orientationchangedeventargs class, that is, the direction of the change, for example, the original screen is portrait, and now I change the screen of the phone to landscape, Then the Orientation property gets to the direction is horizontal, hehe, of course, also includes from which direction rotation comes, here is just an example.

To make the page support rotation, change the PhoneApplicationPage supportedorientations property to Portraitorlandscape, and then you can handle the layout by defining the Orientationchanged event. Shaped like:

1. <phone:phoneapplicationpage
3. ..............
4. Supportedorientations= "Portraitorlandscape"
5. orientation= "Portrait"
6. orientationchanged= "Phoneapplicationpage_orientationchanged" >

One, the processing of the grid control.

2. <phone:phoneapplicationpage
4. X:class= "Sample_pagedir.page1"
6. Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
8. xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"
10. Xmlns:phone= "Clr-namespace:microsoft.phone.controls;assembly=microsoft.phone"
12. Xmlns:shell= "Clr-namespace:microsoft.phone.shell;assembly=microsoft.phone"
14. Xmlns:d= "http://schemas.microsoft.com/expression/blend/2008"
16. Xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006"
18. Fontfamily= "{StaticResource phonefontfamilynormal}"
20. Fontsize= "{StaticResource phonefontsizenormal}"
22. Foreground= "{StaticResource Phoneforegroundbrush}"
24. mc:ignorable= "D" d:designheight= "768" d:designwidth= "480"
26. Shell:systemtray.isvisible= "True"
28. Supportedorientations= "Portraitorlandscape"
30. orientation= "Portrait"
32. orientationchanged= "Phoneapplicationpage_orientationchanged" >
36. <grid x:name= "LayoutRoot" >
38. <Grid.RowDefinitions>
40. <rowdefinition height= "Auto"/>
42. <rowdefinition height= "Auto"/>
44. </Grid.RowDefinitions>
46. <Grid.ColumnDefinitions>
48. <columndefinition width= "Auto"/>
50. <columndefinition width= "Auto"/>
52. </Grid.ColumnDefinitions>
54. <image x:name= "img" source= "http://gubapic.eastmoney.com/member/e68/e681999/e68199920091216131540.jpg" Stretch = "UniformToFill" width= "grid.row=" 0 "grid.column=" 0 "/>
56. <textblock x:name= "Txtblock"
58. grid.row= "1"
60. grid.column= "0"
62. Fontsize= "70"
64. Margin= ">"
66. <run foreground= "Coral" > Xin chun </Run>
68. <LineBreak/>
70. <run foreground= "Yellow" > Singing love songs </Run>
72. <LineBreak/>
74. <run foreground= "Skyblue" > Non-hanging section </Run>
76. </TextBlock>
78. </Grid>
82. </phone:PhoneApplicationPage>

The main page has two controls, one for displaying pictures, one for displaying text information, and for changing the layout of two controls with event-handling code.

2. private void Phoneapplicationpage_orientationchanged (object sender, Orientationchangedeventargs e)
4. {
6. If it's horizontal,
8. if (e.orientation = = Pageorientation.landscape | |
10. E.orientation = = Pageorientation.landscapeleft | |
12. E.orientation = = pageorientation.landscaperight)
14. {
16. Grid.setcolumn (this.img, 0);
18. Grid.setrow (this.img, 0);
20. Grid.setrow (this.txtblock, 0);
22. Grid.setcolumn (This.txtblock, 1);
24. }
26. If it is portrait
28. else if (e.orientation = = Pageorientation.portrait | |
30. E.orientation = = Pageorientation.portraitdown | |
32. E.orientation = = Pageorientation.portraitup)
34. {
36. Grid.setcolumn (this.img, 0);
38. Grid.setrow (this.img, 0);
40. Grid.setrow (This.txtblock, 1);
42. Grid.setcolumn (this.txtblock, 0);
44. }
46. Else
48. {
50. Grid.setcolumn (this.img, 0);
52. Grid.setrow (this.img, 0);
54. Grid.setrow (This.txtblock, 1);
56. Grid.setcolumn (this.txtblock, 0);
58. }
60. }

Press F5 to run the program, the default screen orientation is portrait, as shown in:

OK, now, let's rotate the screen to see what happens.

Second, the processing of StackPanel control.

2. <phone:phoneapplicationpage
4. X:class= "Sample_pagedir.page2"
6. Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
8. xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"
10. Xmlns:phone= "Clr-namespace:microsoft.phone.controls;assembly=microsoft.phone"
12. Xmlns:shell= "Clr-namespace:microsoft.phone.shell;assembly=microsoft.phone"
14. Xmlns:d= "http://schemas.microsoft.com/expression/blend/2008"
16. Xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006"
18. Fontfamily= "{StaticResource phonefontfamilynormal}"
20. Fontsize= "{StaticResource phonefontsizenormal}"
22. Foreground= "{StaticResource Phoneforegroundbrush}"
24. Supportedorientations= "Portraitorlandscape"
26. Orientationchanged= "Phoneapplicationpage_orientationchanged"
28. orientation= "Portrait"
30. mc:ignorable= "D" d:designheight= "768" d:designwidth= "480"
32. shell:systemtray.isvisible= "True" >
36. <phone:PhoneApplicationPage.Resources>
38. <style targettype= "TextBlock" >
40. <setter property= "FontSize" value= "/>"
42. </Style>
44. </phone:PhoneApplicationPage.Resources>
48. <stackpanel x:name= "PL" >
50. <textblock text= "text One"/>
52. <textblock text= "text two"/>
54. <textblock text= "text three"/>
56. </StackPanel>
58. </phone:PhoneApplicationPage>

Background event handling code.

2. private void Phoneapplicationpage_orientationchanged (object sender, Orientationchangedeventargs e)
4. {
6. if (e.orientation = = Pageorientation.landscape | |
8. E.orientation = = Pageorientation.landscapeleft | |
10. E.orientation = = pageorientation.landscaperight)
12. {
14. This.pl.Orientation = System.Windows.Controls.Orientation.Horizontal;
16. }
18. Else
20. {
22. This.pl.Orientation = System.Windows.Controls.Orientation.Vertical;
24. }
26. }

Run, the default orientation is portrait.

Turn the screen back on.

Third, the processing of the canvas control.

2. <phone:phoneapplicationpage
4. X:class= "Sample_pagedir.page3"
6. Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
8. xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"
10. Xmlns:phone= "Clr-namespace:microsoft.phone.controls;assembly=microsoft.phone"
12. Xmlns:shell= "Clr-namespace:microsoft.phone.shell;assembly=microsoft.phone"
14. Xmlns:d= "http://schemas.microsoft.com/expression/blend/2008"
16. Xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006"
18. Fontfamily= "{StaticResource phonefontfamilynormal}"
20. Fontsize= "{StaticResource phonefontsizenormal}"
22. Foreground= "{StaticResource Phoneforegroundbrush}"
24. Supportedorientations= "Portraitorlandscape"
26. orientation= "Portrait"
28. Orientationchanged= "Phoneapplicationpage_orientationchanged"
30. mc:ignorable= "D" d:designheight= "768" d:designwidth= "480"
32. shell:systemtray.isvisible= "True" >
36. <canvas x:name= "CV" >
38. <rectangle x:name= "Rect1"
40. Width= "232"
42. Height= "238"
44. Fill= "Red"
46. canvas.left= "88"
48. Canvas.top= "/>"
50. <rectangle x:name= "Rect2"
52. Height= "192"
54. Width= "275"
56. Fill= "Yellow"
58. canvas.top= "268"
60. canvas.left= "155"/>
62. </Canvas>
66. </phone:PhoneApplicationPage>

Background code. Background code.

2. private void Phoneapplicationpage_orientationchanged (object sender, Orientationchangedeventargs e)
4. {
6. if (e.orientation== pageorientation.landscape| | e.orientation== pageorientation.landscapeleft| | e.orientation== pageorientation.landscaperight)
8. {
10. Canvas.settop (This.rect1, 37);
12. Canvas.setleft (This.rect1, 46);
14. Canvas.settop (This.rect2, 240);
16. Canvas.setleft (This.rect2, 462);
18. }
20. Else
22. {
24. Canvas.settop (This.rect1, 88);
26. Canvas.setleft (This.rect1, 88);
28. Canvas.settop (This.rect2, 268);
30. Canvas.setleft (This.rect2, 155);
32. }
34. }

Look at the effect. Look at the effect.

Longitudinal.

Transverse.

Windows Phone Development (6): Handling Changes in screen orientation