佈局篇-Grid佈局

特點：

1）可以定義任意數量的行和列

2）行的高度和列的寬度可以使用絕對值、相對比例或自動調整的方式，可設置最大值和最小值

3）內部元素可以設置自己所在的行、列，還可以設置跨越幾行、幾列

4）可以設置內部元素的對齊方向

Grid類具有ColumnDefinitions和RowDefinitions兩個屬性，它們分別是ColumnDefinition和RowDefinition的集合，表示Grid定義了多少列、多少行，下面這段代碼定義了一個3行4列的表格

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="20" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="30" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
    </Grid>

對於Grid 的行高和列寬，可以設置3類值：

1）絕對值：double數值加單位後綴，默認爲像素

2）比例值：double數值後加*

3）自動值：字符串Auto

設置內部控件的起始行用Grid.Row屬性，起始列用Grid.Column屬性，跨越行使用Grid.RowSpan屬性，跨越列使用Grid.ColumnSpan屬性

上面代碼結果如下

 

如果希望列寬可以拖動，Grip佈局本身是不支持的，需要用Grid佈局加上GridSplitter來實現，GridSplitter會改變Grid初始的行高、列寬，代碼如下

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BorderBrush="Black" />
        <TextBox Grid.Row="1" Grid.Column="0" BorderBrush="Black" />
        <GridSplitter Grid.Row="1" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Width="5" Background="Gray" ShowsPreview="True"></GridSplitter>
        <TextBox Grid.Row="1" Grid.Column="2" BorderBrush="Black" />
    </Grid>