Dynamic layout of Windows Phone-oriented processing

Source: Internet
Author: User
Tags xmlns silverlight

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.