1、Grid

Grid是以表格形式组织控件的一种布局方式,与Java AWT中的GridLayout类似,但区别在于

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

· WPF中的Grid支持单元格的合并,类似于HTML中的table td中的rowspancolspan

· Grid中的行和列可以自定义高度(Height)和宽度(Width
 在设置高度和宽度时可以采用两种写法:
1Height=60:不加星号表示固定的高度
2Height=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>

2、使用GridSplit分割

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

ButtonAButtonBButtonC组成的整体,可以左右拖动,改变两者的宽度

·ButtonBButtonC可以上下拖动,改变两者的高度

实现以上功能的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=0Column=0RowSpan3的单元格中

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

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

· 竖直分割线放置在Row=0Column=1ColSpan3的单元格中

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

3、UniformGrid

UniformGrid 控件为控件提供了一种简化的网格布局。当控件添加到 UniformGrid 时,它们会排列在一个网格模式中,该网格模式会自动调整以使控件之间的距离保持均匀。单元格的数目将进行调整,以适应控件的数目。  

在使用UniformGrid的时候:

· 各单元格的大小完全相同

· 单元格的数量取决于放入的控件的数量,且单元格一定是行、列数相同的,即1*12*23*34*4的单元格分布