【细说windows8开发——UI篇】布局和视图

本篇的的主要内容

****所有代码为完整代码，不是部分或者添加的代码，均通过测试。

****欢迎问题反馈和交流  : zhu_yifan@me.com

• 布局分类

• Auto和*

• Panel

• StackPanel

• Grid

win8的布局分为绝对布局和静态布局两大类。

绝对布局中提供了Canvas来支持绝对定位（XAML框架），比如   Canvas.Left   和   Canvas.Top

动态布局则是在不同的电脑分辨率下都能显示完好的布局，我们需要定义的就是子元素相对于父元素的位置就可以了

MSDN提供了三个建议，对于动态布局的使用，大家来看看

1、将 Height 和 Width 设置为Auto，Auto支持控件和Grid和StackPanel布局。

2、对于包含文本的控件，移除Height和Width属性，而是设置MinWidth和MinHeight属性，这可以防止文本在等比例缩放时变得不可读。

3、在Grid布局中设置RowDefinition和ColumnDefinition属性

Auto 和 *

Auto 自动尺寸可以使空间更好的适应它的内容，即使内容的大小改变。

* 号是根据比重用来分配可用空间的。

比如我们有一个拥有四列的Grid布局，我们可以这样设置

Column_1	Auto	这一列的设置可以使它自动适应自己的内容
Column_2	*	当Auto属性的列自己计算完之后，这一列会占用剩下的部分，而且是第四列的一半
Column_3	Auto	这一列的设置可以使它自动适应自己的内容
Column_4	2*	当Auto属性的列自己计算完之后，这一列会占用剩下的部分，而且是第二列的二倍

Panel

Panel是XAML中的内置面板

我们可以直接绘制出一个长方形

在新建的空白页中（BlankPage1.xaml）更改为如下代码

<Page
    x:Class="App2.BlankPage2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Rectangle Canvas.Left="200" Canvas.Top="100"
    Fill="red" Width="350" Height="350" />
</Page>

效果如图所示

我的缩放比例是25%。

StackPanel

这个属性可以让它的子元素按照一条线排列，当然，可以使垂直也可以使水平。

我们可以通过更改Orientation属性来设置水平或垂直，默认的是垂直的。也就是Orientation.Vertical。

同样，来一个完整的例子。

xaml代码如下（同样，是完整的代码，不是部分的代码）

<Page
    x:Class="App2.BlankPage2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <StackPanel Margin="20">
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10" />
        <Rectangle Fill="Blue" Width="100" Height="100" Margin="10" />
        <Rectangle Fill="Green" Width="100" Height="100" Margin="10" />
        <Rectangle Fill="Purple" Width="100" Height="100" Margin="10" />
    </StackPanel>
</Page>

效果图:

Grid

最后一个布局咯。

顾名思义，网格布局就是允许有很多列和很多行。

我们可以通过RowDefinitions和ColumnDefinitions来声明有多少列和行，子元素在使用的时候用Grid.Column和Grid.Row就可以了，最好是用Auto和*，因为相对很多时候总要比绝对的好。

如果一个子元素想要跨很多行或者列，就使用Grid.RowSpan或者Grid.ColumnSpan就可以，同样，一个完整的例子。

<Page
    x:Class="App2.BlankPage2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Margin="12,0,12,0">

        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TextBox Text="第一行第一列" FontSize="60" Grid.Column="0" Grid.Row="0" />
        <TextBox Text="第三行第一列" FontSize="60" Grid.Column="0" Grid.Row="2" />

        <Button Content="第一行第二列" FontSize="60" Grid.Column="1" Grid.Row="0" />
        <Button Content="第三行第二列" FontSize="60" Grid.Column="1" Grid.Row="2" />

    </Grid>
</Page>

效果图

特别提醒：第一行其实写代码的时候是 0 哦！！列也一样。