Windows Phone development experience (4)-process changes in the direction of Windows Phone

In the process of mobile app development, we often face the problem of horizontal and vertical screen of the program, in order for our applications to have a better user experience, we must ensure that the effects displayed on both the vertical screen and the horizontal screen are still intact and there is no variation, we know that in Android, the Android: orientations of the activity can be used to forcibly set whether the display mode of the application is horizontal or vertical, similar properties exist in Windows phone7: supportedorientations

There are two ways to set the application screen display:

1. You can add the following attributes to the. XAML file:

    SupportedOrientations="PortraitOrLandscape"

The value is as follows:

Attribute Value	Description
Portrait	It indicates that the application may support a vertical screen.
Landscape	It indicates that the application may support horizontal screen
Portraitorlandscape	Both types are supported.

 

2. You can specify attributes in page loading events.

private voidPhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)        {            this.SupportedOrientations= SupportedPageOrientation.PortraitOrLandscape;        } 

Example: Set attributes

Use the following code in mainpage. XAML. The value of supportedorientations is set to portraitorlandscape.

<Phone: phoneapplicationpage X: class = "orientationsdemo. mainpage "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 "XM LNS: MC = "http://schemas.openxmlformats.org/markup-compatibility/2006" MC: ignorable = "D" D: designwidth = "480" D: designheight = "768" fontfamily = "{staticresource quota}" fontsize = "{staticresource quota}" foreground = "{staticresource quota}" region = "portraitorlandscape" orientation = "portrait" Shell: systemtray. isvisible = "true" loaded = "phoneapplicat Ionpage_loaded "> <! -- Layoutroot is the root mesh that contains all page content --> <grid X: Name = "layoutroot" background = "Transparent"> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "*"/> </grid. rowdefinitions> <! -- Titlepanel contains the application name and page title --> <stackpanel X: Name = "titlepanel" grid. row = "0" margin = ","> <textblock X: name = "applicationtitle" text = "my application" style = "{staticresource phonetextnormalstyle}"/> <textblock X: name = "pagetitle" text = "mar" margin =" 9,-7,0, 0 "style =" {staticresource phonetexttitle1style} "/> </stackpanel> <scrollviewer grid. row = "1" name = "scrollviewer1" verticalscrollbarvisibility = "Auto"> <Stackpanel background = "Transparent"> <! -- Adding various controls and UI elements. --> <button content = "this is a button"/> <rectangle Height = "100" name = "rectangle1" stroke = "black" strokethickness = "1" width = "116 "Fill =" # ffbe2c2c "horizontalalignment =" Left "/> <rectangle fill =" # ff762a2a "Height =" 100 "name =" rectangle2 "stroke =" black "strokethickness =" 1 "width =" 121 "horizontalalignment =" center "/> <rectangle Height =" 100 "name =" rectangle3 "s Troke = "black" strokethickness = "1" width = "134" fill = "# ff3c8aba" horizontalalignment = "right"/> <textbox Height = "71" name = "textbox1" TEXT = "textbox" width = "460"/> <textbox Height = "71" name = "textbox2" text = "textbox" width = "460"/> <textbox Height = "71" name = "textbox3" text = "textbox" width = "460"/> </stackpanel> </scrollviewer> </GRID> <! -- DEMO code to demonstrate ApplicationBar usage --> <! -- <Phone: phoneapplicationpage. applicationBar> <shell: ApplicationBar isvisible = "true" ismenuenabled = "true"> <shell: applicationbariconbutton iconuri = "/images/appbar_button1.png" text = "button 1"/> <shell: applicationbariconbutton iconuri = "/images/appbar_button2.png" text = "button 2"/> <shell: ApplicationBar. menuitems> <shell: applicationbarmenuitem text = "menu item 1"/> <shell: applicationbarmenuitem text = "menu item 2"/> </shell: ApplicationBar. menuitems> </shell: ApplicationBar> </Phone: phoneapplicationpage. applicationBar> --> </Phone: phoneapplicationpage>

The implementation result is:

 

Example: Use code to dynamically change the layout mode to achieve the same effect

Put the following code in the mainpage. XAML file:

<Phone: phoneapplicationpage X: class = "orientationsdemo. 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 quota}" fontsize = "{staticresource quota}" foreground = "{staticresource quota}" supportedorientations = "portraitorlandscape" orientation = "portrait" MC: ignorable = "D" D: designheight = "768" D: designwidth = "480" shell: systemtray. isvisible = "true" orientationchanged = "phone Applicationpage_orientationchanged "> <! -- Layoutroot is the root mesh that contains all page content --> <grid X: Name = "layoutroot" background = "Transparent"> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "*"/> </grid. rowdefinitions> <! -- Titlepanel contains the application name and page title --> <stackpanel X: Name = "titlepanel" grid. row = "0" margin = ","> <textblock X: name = "applicationtitle" text = "my application" style = "{staticresource phonetextnormalstyle}"/> <textblock X: name = "pagetitle" text = "Page name" margin = "9,-7,0, 0" style = "{staticresource phonetexttitle1style}"/> </stackpanel> <! -- Contentpanel-place other content here --> <grid X: Name = "contentpanel" grid. row = "1" margin = "12, 0, 12, 0"> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "*"/> </grid. rowdefinitions> <grid. columndefinitions> <columndefinition width = "Auto"/> <columndefinition width = "*"/> </grid. columndefinitions> <image X: Name = "image1" grid. row = "0" grid. column = "0" stretch = "fill" horizontalalignment = "cente R "Source ="/orientationsdemo; component/images/image01.jpg "Height =" 300 "width =" 500 "/> <! -- Add astackpanel with buttons to the row beneath the image. --> <stackpanel X: Name = "buttonlist" grid. row = "1" grid. column = "0" horizontalalignment = "center"> <button content = "Action1"/> <button content = "Action2"/> <button content = "action3"/> <button content = "Action4"/> </stackpanel> </GRID> <! -- DEMO code to demonstrate ApplicationBar usage --> <! -- <Phone: phoneapplicationpage. applicationBar> <shell: ApplicationBar isvisible = "true" ismenuenabled = "true"> <shell: applicationbariconbuttoniconuri = "/images/appbar_button1.png" text = "button 1"/> <shell: applicationbariconbuttoniconuri = "/images/appbar_button2.png" text = "button 2"/> <shell: ApplicationBar. menuitems> <shell: applicationbarmenuitemtext = "menu item 1"/> <shell: applicationbarmenuitem text = "menu item 2"/> </shell: ApplicationBar. menuitems> </shell: ApplicationBar> </Phone: phoneapplicationpage. applicationBar> --> </Phone: phoneapplicationpage>

Then write the following code in the mainpage. XAML. CS file:

Here we make a judgment to get the screen direction. Let's set the position of the rotation control in the grid.

if((e.Orientation & PageOrientation.Portrait)== (PageOrientation.Portrait))            {                Grid.SetRow(buttonList, 1);                Grid.SetColumn(buttonList, 0);             }            // If not in the portrait mode, move buttonList content toa visible row and column.             else            {                Grid.SetRow(buttonList, 0);                Grid.SetColumn(buttonList, 1);             } 

Implementation results:

For a comparative learning method, we know that changing the screen direction in Android will lead to some changes in the activity lifecycle function, while Windows Phone is about the application lifecycle, therefore, after testing, its application lifecycle functions have not changed significantly.

If you need to reprint reference please indicate the source: http://blog.csdn.net/jiahui524