Windows Phone 7 Page Layout

The page layout mode of Windows Phone is generally implemented by the layout control, and the layout control has three types of grid, stackpanel and canvas.

Grid is a grid layout, which is equivalent to a table with rows and columns. Create a Windows Phone project and open mainpage. XAML. The core code of the page content is as follows:

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <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 additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>
    </Grid>

Two layout Methods grid and stackpanel are used in the Code. This is also the most common layout method for Windows Phone. Canvas is not commonly used in the layout. Of course, this does not mean it is useless, in some XAML, canvas cannot be verified, and grid and stackpanel cannot be replaced.

1. Grid

See the following code.

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Grid" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="left top"/>
            <TextBlock Grid.Column="1" Text="center top"/>
            <TextBlock Grid.Column="2" Text="right top"/>
            <TextBlock Grid.Row="1" Text="left center"/>
            <TextBlock Grid.Row="1" Grid.Column="1" Text="center center"/>
            <TextBlock Grid.Row="1" Grid.Column="2"  Text="right center"/>
            <TextBlock Grid.Row="2" Text="left bottom"/>
            <TextBlock Grid.Row="2" Grid.Column="1"  Text="center bottom"/>
            <TextBlock Grid.Row="2" Grid.Column="2"  Text="right bottom"/>
        </Grid>
    </Grid>

The running effect is as follows:

Add three rows and three columns to the grid with name contentpanel, <grid. rowdefinitions> is also a container. When several rowdefinition statements are placed inside the container, it indicates that the grid has several rows. <grid. put several columndefinition columns in columndefinitions>.
In addition, rowdefinition is only used to define columns. The content of a column is not directly placed under the rowdefinition label, but under the grid label. row and grid. column is used to define which row and which column the content belongs to. The default value is 0th rows and 0th columns. Therefore, if the content is placed in a grid with 0 rows. row does not need to be written, if it is placed in the 0 column grid. you don't need to write column, just think about the above Code.

In the grid, rowdefinition can define the height attribute, indicating the height, but not the width. columndefinition can define the width, indicating the width, but not the height. Therefore, the final width and height are jointly determined by the two.

The height and width attributes are enumeration types. You can enter three options: fixed height or width, and auto keyword, it is determined by the height and width of the row and slice. The largest part prevails. Fill in the asterisk (*) to occupy the rest. For example, fill in 100 in the first line of height, when two lines of poetry * are promoted, it indicates that the first row is 100, and the second and third rows are equally divided into the remaining parts of the Grid. For example, if the height of the grid is 500, the remaining part is 400, and the three rows have 200 rows.

In practice, there are very few regular row and column distributions. Some child controls usually need to span rows or columns, while grid. rowspan indicates cross rows, and grid. columnspan indicates cross columns.

See the following code.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.RowSpan="2" VerticalAlignment="Center" Text="left top"/>
            <TextBlock Grid.Column="1" Text="center top"/>
            <TextBlock Grid.Column="2" Text="right top"/>
            <TextBlock Grid.Row="1" Grid.Column="1" Text="center center"/>
            <TextBlock Grid.Row="1" Grid.Column="2"  Text="right center"/>
            <TextBlock Grid.Row="2" Text="left bottom"/>
            <TextBlock Grid.Row="2" Grid.ColumnSpan="2" HorizontalAlignment="Center" Grid.Column="1"  Text="center bottom"/>
        </Grid>

The running effect is as follows:

2. stackpanel

Stackpanel is a simple container that supports horizontal or vertical sub-Controls (the default is vertical). It cannot be horizontal or vertical at the same time, it is necessary to use child control nesting to live layout control nesting

Orientation is an enumeration type. Horizontal indicates horizontal and vertical indicates vertical.

View the following code and running results

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="left" Width="100"/>
                <TextBlock Text="center" Width="100"/>
                <TextBlock Text="right" Width="100"/>
            </StackPanel>
            <StackPanel Orientation="Vertical" Grid.Row="1">
                <TextBlock Text="top" Height="100"/>
                <TextBlock Text="center" Height="100"/>
                <TextBlock Text="bottom" Height="100"/>
            </StackPanel>
        </Grid>

3. Canvas

Canvas is an absolute positioning layout Control Based on the upper left corner (0, 0). It places the child control in it and uses cancas. EFT and cancas. right determines the offset from the upper left corner. It can be a negative value. If the control overlaps, you can use canvas. zindex attribute control, zindex will overwrite small

View the following code and running result

<Canvas>
                <TextBlock Canvas.Left="0" Canvas.Top="10" Text="textblock1"/>
                <StackPanel Canvas.ZIndex="2" Canvas.Left="0" Canvas.Top="10" Background="Red">
                    <TextBlock Text="hello"/>
                </StackPanel>
                <TextBlock Canvas.Left="100" Canvas.Top="100" Text="textblock2"/>
                <TextBlock Canvas.Left="300" Canvas.Top="300" Text="textblock3"/>
            </Canvas>

In addition, each control has a layout attribute. Subsequent articles, such as margin, will introduce the usage and attributes of different controls, and introduce the layout attributes. In today's content, the layout attributes, do not worry about children's shoes.

 

My Sina Weibo nickname is "@ Ma vegetables". I hope you will pay more attention to it. Thank you.