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

玩转Silverlight控件（四）——Grid布局2011-09-13 博客园飞林沙在这一节，我主要来介绍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>