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的方式，分行，列來進行佈局。