Windows phone7 screen direction and common controls

Learning WP7 with Mr Lin Yongjian

• Orientation)
• Commonly used controls (canvas, grid, stackpanel, textblock, image, mediaelement)

Screen orientation page (portraint, landscape)

• You can add portraint and landscape pages in;
• The page can support horizontal screen or vertical screen or both
• Cannot passCodeTo change the screen direction

Supportedorientations indicates the screen direction supported by the page, and orientation indicates the page START direction;

You can register events to control elements:

Namespace pagenavigation. views {public partial class about: phoneapplicationpage {public about () {initializecomponent (); orientationchanged + = new eventhandler <strong> (strong);} void about_orientationchanged (Object sender, lead E) {If (E. orientation = pageorientation. landscapeleft | E. orientation = pageorientation. landscaperight) {titlepanel. visibility = visibility. collapsed;} else if (E. orientation = pageorientation. portraitdown | E. orientation = pageorientation. portraitup) {titlepanel. visibility = visibility. visible ;}}}}
 

Use textblock to format text:

<Textblock Height = "183" horizontalalignment = "Left" margin = "56,126, 335 "name =" textblock1 "verticalignment =" TOP "width =" "> <linebreak> </linebreak> <run foreground =" beige "fontsize =" 32 "> text 1 </run> <linebreak/> <run foreground = "green" fontsize = "20"> text 2 </run> </textblock>
 

IMG control: supports PNG, JPEG, and network files and local files (the build action of local files is content)

 

<Grid X: Name = "contentpanel" grid. Row = "1" margin = "121,"> <Image Height = "" Source = "http://cn.bing.com/az/hprichbg? P0000rb00002fpipefishes_zh-cn1693383898.jpg "horizontalalignment =" Left "margin =" 9,6, 0, 0 "name =" image1 "stretch =" fill "verticalignment =" TOP "width =" 398 "/> <Image Height =" 350 "Source ="/pictures/dscf0885.jpg "horizontalalignment = "Left" margin = "6,154, 462 "name =" image2 "stretch =" fill "verticalignment =" TOP "width =" "/> </GRID>
 

Comparison of UI layout controls:

• Canvas is an absolute positioning control with high speed,
• Grid grid positioning,
• Stackpanel Automatic Positioning Control

When using canvas, the portrait screen is always complete and the landscape screen lacks elements. There are two solutions: first, register an event, the second is to use scrollviewer;

Public partial class picture: phoneapplicationpage {public picture () {initializecomponent (); orientationchanged + = new eventhandler <strong> (strong);} void picture_orientationchanged (Object sender, lead E) {If (E. orientation = pageorientation. landscapeleft | E. orientation = pageorientation. landscaperight) {canvas. settop (button1, 200);} else if (E. orientation = pageorientation. portraitdown | E. orientation = pageorientation. portraitup) {canvas. settop (button1, 466 );}}}
 

Stackpanel control: automatically locates controls. You cannot specify the layout of specific child controls;

You can adjust the direction of the sub-control by registering an event.

If (E. orientation = pageorientation. landscapeleft | E. orientation = pageorientation. landscaperight) {stackpaneltest. orientation = system. windows. controls. orientation. horizontal;} else if (E. orientation = pageorientation. portraitdown | E. orientation = pageorientation. portraitup) {stackpaneltest. orientation = system. windows. controls. orientation. vertical ;}
 

Grid Control: easy to support layout of screen flip controls

Event registration code

If (E. orientation = pageorientation. landscapeleft | E. orientation = pageorientation. landscaperight) {grid. setrow (stackpaneltest1, 0); grid. setcolumn (stackpaneltest1, 1);} else if (E. orientation = pageorientation. portraitdown | E. orientation = pageorientation. portraitup) {grid. setrow (stackpaneltest1, 1); grid. setcolumn (stackpaneltest1, 0 );}
 

The mediaelement control supports audio and video, network files, and local files. If the file is a local file, builaction is set to content.

 
Mediaelement1.autoplay = true; mediaelement1.source = new uri ("/vedio/my girl-shark in Love", urikind. relativeorabsolute); mediaelement1.volume = 10; mediaelement1.position = timespan. frommilliseconds (0); mediaelement1.play ();
 

Code download