WPF布局之Grid

1.Grid

   Grid是以表格形式組織控件的一種布局方式，與Java AWT中的GridLayout類似，但區別在於

       WPF中的Grid的每一個單元格中可以放置多個控件，但控件可能會層疊在一起

       WPF中的Grid支持單元格的合並，類似於HTML中的table td中的rowspan和colspan

      Grid中的行和列可以自定義高度（Height）和寬度（Width）

           在設置高度和寬度時可以采用兩種寫法：

          1）Height=”60”：不加“星號”表示固定的高度

          2）Height=”60*”：加“星號”表示“加權”的高度，在調整窗體大小時，此高度或寬度會按窗體大小改變的比例進行縮

     如代碼：

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="60" />
            <RowDefinition Height="202*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0" Grid.Row="0" Height="30" VerticalAlignment="Top">ButtonA</Button>
        <Button Grid.Column="0" Grid.Row="0" Height="30" VerticalAlignment="Bottom">ButtonB</Button>
        <Button Grid.Column="1" Grid.Row="0">ButtonC</Button>
        <Button Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2">ButtonD</Button>
    </Grid>

生成的效果為：類似與table中的布局模式

  

2.GridSplit

  GridSplit控件結合Grid控件實現類似於Windows應用程序中SplitContainer的功能，即分區域且可拖動大小

  如下面的例子，代碼:

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="88*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="190*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="172*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="90*" />
        </Grid.RowDefinitions>
        <Button Content="ButtonA" Margin="3" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" />
        <Button Content="ButtonB" Margin="3" Grid.Row="0" Grid.Column="2" />
        <Button Content="ButtonC" Margin="3" Grid.Row="2" Grid.Column="2" />   
        <GridSplitter Width="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                    Grid.Row="0" Grid.Column="1" Grid.RowSpan="3"></GridSplitter>
        <GridSplitter Height="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
                   Grid.Row="1" Grid.Column="2"></GridSplitter>
    </Grid>

實現的效果如下圖所示，紅色標記的區域可進行左右，上下拖動來更改各區域的大小。

　

代碼說明：首先在Grid中定義一個3行3列的區域，ButtonA放置於0行0列，高度占據3行，ButtonB放置於0行2列，ButtonC放置於2行2列，然后分別在第1列和第1行2列放置一個GridSplit用於分割各區域。如下圖所示。

3.UniformGrid

   UniformGrid 控件為控件提供了一種簡化的網格布局。當控件添加到 UniformGrid 時，它們會排列在一個網格模式中，該網格模式會自動調整以使控件之間的距離保持均勻。單元格的數目將進行調整，以適應控件的數目。例如，如果四個控件添加到 UniformGrid 中，它們將安排在包含四個單元格的網格中。

如代碼：

<UniformGrid>
  <Button Content="ButtonA" />
  <Button Content="ButtonB" />
  <Button Content="ButtonC" />
  <Button Content="ButtonD" />
  <Button Content="ButtonE" />
  <Button Content="ButtonF" />
  <Button Content="ButtonG" />
  <Button Content="ButtonH" />
  <Button Content="ButtonI" />
  <Button Content="ButtonJ" />
</UniformGrid>

效果圖：

　　

在上圖中，雖然button個數為10個，但是仍然會生成4*4個單元格，隨着窗體大小變化，各Button的大小保持一致，位置不變。

在使用UniformGrid的時候：

    各單元格的大小完全相同

    單元格的數量取決於放入的控件的數量，且單元格一定是行、列數相同的，即1*1、2*2、3*3、4*4…的單元格分布