Dynamic layout of Windows Phone-oriented processing

By default, the Silverlight application runs in portrait mode. When the mobile phone changes 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.

Xaml files

The code is as follows:

Copy code

<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" verticalignment = "Top"/> <TextBlock Text = "Top-Center" HorizontalAlignment = "Center" verticalignment = "Top"/> <TextBlock Text = "Top-Right" HorizontalAlignment = "Right" verticalignment = "Top"/> <TextBlock Text = "Center-Left" HorizontalAlignment = "Left" verticalignment = "Center"/> <TextBlock Text = "Center" HorizontalAlignment = "Center" verticalignment = "Center"/> <TextBlock Text = "Center-Right" HorizontalAlignment = "Right" verticalignment = "Center"/> <TextBlock Text = "Bottom-Left" HorizontalAlignment = "Left" verticalignment = "Bottom"/> <TextBlock Text = "Bottom-Center" HorizontalAlignment = "Center" verticalignment = "Bottom"/> <TextBlock Text = "Bottom-Right" HorizontalAlignment = "Right" verticalignment = "Bottom"/> </Grid> </Phone: PhoneApplicationPage>

The effect is shown in the following figure:

   
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:

The code is as follows:	Copy code
<TextBlock Text = "Center" HorizontalAlignment = "Center" verticalignment = "Center" Margin = "100,200, 50,300"/>

The effect is shown in the following figure:

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.