Dynamic Layout of Windows Phone development path (11)

Silverlight ApplicationProgramBy default, it runs in portrait mode. When the mobile phone changes the direction, if you want our application to automatically respond as the direction changes, you only need to go to mainpage. modify the value of supportedoritentations in the phoneapplicationpage flag of XAML. The value of supportedoritentations is of the enumeration type, and the value is portrait, landscape, or portraitorlandscape.

The two most important attributes for Processing dynamic la s are horizontalalignment and verticalignment.In the following example, nine textblock elements are placed in a grid element to demonstrate the usage of the horizontalalignment and verticalignment of the grid in nine different combinations.

XAMLCode:

<Phone: phoneapplicationpage
X: class = "  Dtlayout1.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  " 
Xmlns: MC = "  Http://schemas.openxmlformats.org/markup-compatibility/2006  " 
MC: ignorable = "  D  " D: designwidth = "  480  " D: designheight = "  768  " 
Fontfamily = "  {Staticresource phonefontfamilynormal}  " 
Fontsize = "  {Staticresource phonefontsizenormal}  " 
Foreground = "  {Staticresource phoneforegroundbrush}  " 
 Supportedorientations ="Portraitorlandscape" Orientation ="  Portrait  " 
Shell: systemtray. isvisible = "  True  " >

<! -- Layoutroot is the root mesh that contains all page content -->
<Grid X: Name = "  Layoutroot  " Background = "  Transparent  " >
<Textblock text ="  Top-left  " Horizontalalignment = "  Left  " Verticalalignment = "  Top  " />
<Textblock text = "  Top-center  " Horizontalalignment = "  Center  " Verticalalignment = "  Top  " />
<Textblock text = "  Top-Right  " Horizontalalignment = "  Right  " Verticalalignment = "  Top  " />
<Textblock text = " Center-left  " Horizontalalignment = "  Left  " Verticalalignment = "  Center  " />
<Textblock text = "  Center  " Horizontalalignment = "  Center  " Verticalalignment ="  Center  " />
<Textblock text = "  Center-right  " Horizontalalignment = "  Right  " Verticalalignment = "  Center  " />
<Textblock text = "  Bottom-left " Horizontalalignment = "  Left  " Verticalalignment = "  Bottom  " />
<Textblock text = "  Bottom-center  " Horizontalalignment = "  Center  " Verticalalignment = " Bottom  " />
<Textblock text = "  Bottom-Right  " Horizontalalignment = "  Right  " Verticalalignment = "  Bottom  " />
</GRID>
</Phone: phoneapplicationpage>

Effect

Vertical direction horizontal direction

In the Silverlight Layout System, the margin (margin) attribute is also very important. The margin attribute is of the thickness type, and thickness is a struct with four attributes: left, top, right, and bottom, generally, four values are specified to indicate the left, top, right, and bottom margins. Of course, you can also specify a value in XAML, which indicates that the four margins are the same value. If you specify two values, they represent the margins between the left and the right, and between the top and bottom. The following example adds the margin attribute to the 5th textblocks in the above program.

XAML code:

 
<Textblock text ="Center"Horizontalalignment ="Center"Verticalalignment ="Center"Margin ="100,200, 50,300"/>
 

Effect

We can see that the textblock with text as the center is no longer centered.

the preceding content is summarized today. There are three important attributes: horzontalalignment, verticalignment, and margin. In practical applications, we need to use these three attributes flexibly.