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

核心提示：在这一节，我主要来介绍Silverlight的Grid布局，玩转Silverlight控件（四）——Grid布局，先来让我们复习一下HTML的Table布局，在这里这么说：Table布局只是为了为Grid来做个铺垫，而Table是边指定，边使用，因为我们知道，Table是为了容纳数据

在这一节，我主要来介绍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>