Windows Phone development (6): Process screen orientation changes

As we all know, smartphones can rotate their mobile phones to change the display direction of the screen. More often, we need to handle changes to the screen direction. For example, when the phone screen direction changes from portrait to landscape, you may need to rearrange the controls on the page to adapt to the changes in the display area.

As we have discussed earlier, the page layout of Silverlight for Windows Phone has three common layout controls. When the screen direction changes, the changes we made to the layout are based on these containers. This article uses three examples to describe them separately. Before starting, let's talk about the orientationchanged event of the phoneapplicationpage class. This event occurs when the screen direction changes. We get the orientation of the current screen from the orientation attribute of the instance of the event parameter orientationchangedeventargs class, that is, the direction after the change. For example, if the original screen is portrait, and now I change the mobile phone screen to landscape, the orientation attribute gets the horizontal direction, of course, it also includes the direction from which to rotate. Here is just an example.

To enable page rotation, change the supportedorientations attribute of phoneapplicationpage to portraitorlandscape. Then, you can define the orientationchanged event to process the layout. Shape:

<phone:PhoneApplicationPage     ..............    SupportedOrientations="PortraitOrLandscape"     Orientation="Portrait"    OrientationChanged="PhoneApplicationPage_OrientationChanged">

1. Processing of the grid control.

<Phone: phoneapplicationpage X: class = "sample_pagedir.page1" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns: Phone = "CLR-namespace: Microsoft. phone. controls; Assembly = Microsoft. phone "xmlns: shell =" CLR-namespace: Microsoft. phone. shell; Assembly = Microsoft. phone "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC = "http://schemas.openxmlformats.org/markup-compatibility/2006" fontfamily = "{staticresource phonefontfamilynormal}" fontsize = "{staticresource quota}" foreground = "{staticresource phoneforegroundbrush}" MC: ignorable = "D" D: designheight = "768" D: designwidth = "480" shell: systemtray. isvisible = "true" supportedorientations = "portraitorlandscape" orientation = "portrait" orientationchanged = "phoneapplicationpage_orientationchanged"> <grid X: Name = "layoutroot"> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "Auto"/> </grid. rowdefinitions> <grid. columndefinitions> <columndefinition width = "Auto"/> <columndefinition width = "Auto"/> </grid. columndefinitions> <image X: Name = "IMG" Source = "http://gubapic.eastmoney.com/member/e68/e681999/e68199920091216131540.jpg" stretch = "uniformtofill" width = "270" grid. row = "0" grid. column = "0"/> <textblock X: Name = "txtblock" grid. row = "1" grid. column = "0" fontsize = "70" margin = "28"> <run foreground = "Coral"> Xin Chun Ge </run> <linebreak/> <run foreground = "Yellow "> singing love songs </run> <linebreak/> <run foreground =" skyblue "> do not join the subject </run> </textblock> </GRID> </phone: phoneapplicationpage>

There are two main controls on the page, one for displaying images, and the other for displaying text information. The layout of the two controls is changed through event processing code.

Private void phoneapplicationpage_orientationchanged (Object sender, orientationchangedeventargs e) {// if it is a horizontal if (E. orientation = pageorientation. landscape | E. orientation = pageorientation. landscapeleft | E. orientation = pageorientation. landscaperight) {grid. setcolumn (this. IMG, 0); grid. setrow (this. IMG, 0); grid.setrow(this.txt block, 0); grid.setcolumn(this.txt block, 1);} // if it is a vertical else if (E. orientation = pageorientation. portrait | E. orientation = pageorientation. portraitdown | E. orientation = pageorientation. portraitup) {grid. setcolumn (this. IMG, 0); grid. setrow (this. IMG, 0); grid.setrow(this.txt block, 1); grid.setcolumn(this.txt block, 0);} else {grid. setcolumn (this. IMG, 0); grid. setrow (this. IMG, 0); grid.setrow(this.txt block, 1); grid.setcolumn(this.txt block, 0 );}}

Run the program by pressing F5. The default screen direction is vertical, as shown in:

 

Now, let's rotate the screen to see what will happen.

 

 

2. Handling stackpanel controls.

<Phone: phoneapplicationpage X: class = "sample_pagedir.page2" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns: Phone = "CLR-namespace: Microsoft. phone. controls; Assembly = Microsoft. phone "xmlns: shell =" CLR-namespace: Microsoft. phone. shell; Assembly = Microsoft. phone "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC = "http://schemas.openxmlformats.org/markup-compatibility/2006" fontfamily = "{staticresource quota}" fontsize = "{staticresource quota}" foreground = "{staticresource quota}" supportedorientations = "portraitorlandscape" orientationchanged = "phoneapplicationpage_orientationchanged" Orientation = "portrait" MC: ignorable = "D" D: designheight = "768" D: designwidth = "480" shell: systemtray. isvisible = "true"> <Phone: phoneapplicationpage. resources> <style targettype = "textblock"> <setter property = "fontsize" value = "46"/> </style> </Phone: phoneapplicationpage. resources> <stackpanel X: name = "PL"> <textblock text = "text 1"/> <textblock text = "text 2"/> <textblock text = "Text 3"/> </stackpanel> </phone: phoneapplicationpage>

Background event processing code.

 

        private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)        {            if (e.Orientation == PageOrientation.Landscape ||                e.Orientation == PageOrientation.LandscapeLeft ||                e.Orientation == PageOrientation.LandscapeRight)            {                this.pl.Orientation = System.Windows.Controls.Orientation.Horizontal;            }            else            {                this.pl.Orientation = System.Windows.Controls.Orientation.Vertical;            }        }

Run. The default direction is vertical.

 

 

Rotate the screen.

 

 

3. Canvas control processing.

<phone:PhoneApplicationPage     x:Class="Sample_PageDir.Page3"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    FontFamily="{StaticResource PhoneFontFamilyNormal}"    FontSize="{StaticResource PhoneFontSizeNormal}"    Foreground="{StaticResource PhoneForegroundBrush}"    SupportedOrientations="PortraitOrLandscape"    Orientation="Portrait"    OrientationChanged="PhoneApplicationPage_OrientationChanged"    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"    shell:SystemTray.IsVisible="True">    <Canvas x:Name="cv">        <Rectangle x:Name="rect1"            Width="232"            Height="238"            Fill="Red"            Canvas.Left="88"            Canvas.Top="88"/>        <Rectangle x:Name="rect2"            Height="192"            Width="275"            Fill="Yellow"            Canvas.Top="268"            Canvas.Left="155"/>    </Canvas></phone:PhoneApplicationPage>

Background code. Background code.

 

        private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)        {            if (e.Orientation== PageOrientation.Landscape||e.Orientation== PageOrientation.LandscapeLeft||e.Orientation== PageOrientation.LandscapeRight)            {                Canvas.SetTop(this.rect1, 37);                Canvas.SetLeft(this.rect1, 46);                Canvas.SetTop(this.rect2, 240);                Canvas.SetLeft(this.rect2, 462);            }            else            {                Canvas.SetTop(this.rect1, 88);                Canvas.SetLeft(this.rect1, 88);                Canvas.SetTop(this.rect2, 268);                Canvas.SetLeft(this.rect2, 155);            }        }

Check the effect. Check the effect.

 

Vertical.

 

 

Horizontal.