玩转Silverlight控件（四）——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的方式，分行，列来进行布局。