Silverlight玩转控件(四)——Grid布局

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

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

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

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

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

 

效果如下:

Silverlight玩转控件(四)——Grid布局_第1张图片

当我们用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来指定他所位于的所在行和所在列。

其效果如下:

Silverlight玩转控件(四)——Grid布局_第2张图片

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

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

 

产生效果如下:

Silverlight玩转控件(四)——Grid布局_第3张图片

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

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

效果如下:

Silverlight玩转控件(四)——Grid布局_第4张图片

这个时候,我们可以很清楚地看到列的比例为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>

 

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

Silverlight玩转控件(四)——Grid布局_第5张图片

看代码:

<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的方式,分行,列来进行布局。

Grid的介绍就到这为止,欢迎继续关注下文。

你可能感兴趣的:(Silverlight玩转控件(四)——Grid布局)