一天一天学 windows phone 页面布局 之 Grid （九）

今天开始 讲布局。

先从Grid 容器说起，我个人觉得Grid容器，有点类似，我在 html中table标签，Grid容器通过ColumnDefinitions属性和RowDefinitions属性将Grid以网格状分割。为了更方便的看清楚我们的分割线，我们设置ShowGridLines 属性为true。然后我们将Grid划分成4行3列。代码如下：

            <Grid ShowGridLines="True">
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
            </Grid>

效果如图。 宽度对应属性 Width 高度对应 Height。

分割好了，我们继续往分隔中填写相关内容。例如我们希望向第二行，第二列中添加一个Button控件，红框的位置处。

代码如下：

                    <Button Grid.Row="1"
                        Grid.Column="1"
                        Content="Hello" />

Grid容器的 Row 和 Column 的索引是从 0 开始 的所以第二行第二列是 1,1 假设第三行第二列 就是 2,1

跨行和 html中table的跨行一样使用 跨行用RowSpan 跨列用ColumnSpan 。举个例子，如果我们想在第4行 三列合并为一个放一个button控件 我们的代码如下：

<Button Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Content="World!" />

效果如图：

OK 

Grid 中Margin 属性 的用法 很简单 除顺序和 css 中不一样是  “左、上、右、下” 效果就是css中div中用padding 一模一样。这个我就不多说了。

Grid 中 HorizontalAlignment 加上 VerticalAlignment 就的对应 css 中text-align。这里也不多说了。

对于布局来说，大家自己多用用就出来，大多和css 中属性很像，到时候试试也出来了。

(写的不好 请见谅，有不对请留言告知我，免得误人子弟。）