Grid

一、Grid

Grid是以表格形式组织控件的一种布局方式，与Java AWT中的GridLay

out类似，但区别在于

WPF中的Grid的每一个单元格中可以放置多个控件，但控件可能会层叠在一起

WPF中的Grid支持单元格的合并，类似于HTML中的table td中的rowspan和colspan

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

在设置高度和宽度时可以采用两种写法：

1. Height=”60”：不加“星号”表示固定的高度
2. 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>

如图：

二、使用GridSplit分割

 

可以使用GridSplit控件结合Grid控件实现类似于Windows应用程序中SplitContainer的功能，如下面的应用程序：

 

要实现以下的功能：

ButtonA和ButtonB、ButtonC组成的整体，可以左右拖动，改变两者的宽度ButtonB和ButtonC可以上下拖动，改变两者的高度

实现以上功能的XAML代码如下：

<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>

其核心想法为：定义3*3的表格，其中放置分割线的列（下标为1）和行（下标为1）的宽度和高度设置为Auto

ButtonA放置在Row=0、Column=0、RowSpan＝3的单元格中

ButtonB放置在Row=0、Column=2的单元格中

ButtonC放置在Row=2、Column=2的单元格中

竖直分割线放置在Row=0、Column=1、ColSpan＝3的单元格中

水平分割线放置在Row=1、Column=2的单元格中

如下图所示：