Silverlight玩转控件（四）——Grid布局

在这一节，我主要来介绍Silverlight的Grid布局。

先来让我们复习一下HTML的Table布局。

在这里这么说：Table布局只是为了为Grid来做个铺垫。因为我们知道，Table是为了容纳数据，而CSS才是我们布局的首选。

先不管这些，我们看下我们用Table是如何布局的。

<table border="1">
    <tr>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
    <tr>
        <td>444</td>
        <td>555</td>
        <td>666</td>
    </tr>
</table>

 

效果如下：

当我们用Silverlight的Grid进行布局的时候，也是一样的道理。我们一样需要制定Grid的行和列，不同的是，Grid是先指定，后使用。而Table是边指定，边使用。让我们来看一个使用Grid的例子，使其达到与我们Table布局同样的效果：

<Grid x:Name="grdLayoutRoot" Background="White" Width="400" Height="300" ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBlock Text="111" Grid.Row="0" Grid.Column="0"></TextBlock>
    <TextBlock Text="222" Grid.Row="0" Grid.Column="1"></TextBlock>
    <TextBlock Text="333" Grid.Row="0" Grid.Column="2"></TextBlock>
    <TextBlock Text="444" Grid.Row="1" Grid.Column="0"></TextBlock>
    <TextBlock Text="555" Grid.Row="1" Grid.Column="1"></TextBlock>
    <TextBlock Text="666" Grid.Row="1" Grid.Column="2"></TextBlock>
</Grid>

看Grid中几个重要的属性：

1. RowDefinitions 和 ColumnDefinitions ：这两个属性主要是来指定Grid控件的行数和列数，内部嵌套几个Definition，那么就代表这个Grid有几行几列。

2. ShowGridLines : 很明显，就是指定我们的Grid控件行列之间是否显示分割线，与Table中的Border属性非常类似。

3. 当我们使用其他控件内置于Grid中时，我们需要使用Grid.Row和Grid.Column来指定他所位于的所在行和所在列。

其效果如下：

当然，我们还可以指定这些行和列的宽度。(如果默认情况下则默认的是每行，每类的宽度，高度都相等）：

<Grid.RowDefinitions>
    <RowDefinition Height="40"></RowDefinition>
    <RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="40"></ColumnDefinition>
    <ColumnDefinition></ColumnDefinition>
    <ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>

 

产生效果如下：

继续于Table做类比，在Table布局中，我们可以指定width的百分比。当然，在Grid中，我们一样可以实现这样的功能，方法是用*去代替了%，我们看下：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="40*"></ColumnDefinition>
    <ColumnDefinition Width="50*"></ColumnDefinition>
    <ColumnDefinition Width="30*"></ColumnDefinition>
    <ColumnDefinition Width="20*"></ColumnDefinition>
</Grid.ColumnDefinitions>

效果如下：

这个时候，我们可以很清楚地看到列的比例为40:50:30:20

这个相对于Table来说，更多了一分灵活性，因为在Table中，我们只能使用百分比的布局方式，而这个相对来说更加灵活。

在Grid中，我们还可以使用auto来作为宽度和高度的属性，这种情况下，Grid的宽度和高度便随着内部内容的大小而自动发生改变：

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

我们还可以为宽度为自动的情况下指定最大和最小的宽度（或高度）。

<Grid.ColumnDefinitions>
    <ColumnDefinition MinWidth="30" MaxWidth="150"></ColumnDefinition>
    <ColumnDefinition Width="Auto" MinWidth="30" MaxWidth="150"></ColumnDefinition>
    <ColumnDefinition Width="Auto" MinWidth="30" MaxWidth="150"></ColumnDefinition>
    <ColumnDefinition Width="Auto" MinWidth="30" MaxWidth="150"></ColumnDefinition>
</Grid.ColumnDefinitions>

 

另外，如果我们实现这样一种情况，就是说要求一个控件跨越两个列，如下图所示：

看代码:

<Button Grid.ColumnSpan="2" Grid.RowSpan="2" x:Name="btnTest" Width="50" Height="30" Content="Text" Grid.Row="0" Grid.Column="0"></Button>

 

里面的关键代码：Grid.RowSpan=”2”。我也不多解释了，就是跨越两行。

好，总结下，Grid是一个很常用的布局控件。他提供了仿照HTML中Table的方式，分行，列来进行布局。