WPF 入门 -- Layout：Grid, DockPanel and StackPanel

在WPF中，可以用Grid、DockPanel和StackPanel来做布局。

1.Grid

Grid是三者之间最灵活强大的，在其父控件中，Grid自动充满其Margin以外的所有空间，并可以自动响应resize。可以看作，Grid将Margin以外的父控件的空间，按照其行定义（Grid.RowDefinitions）和列定义（Grid.ColumnDefinitions）划分成若干单元格，而每个单元格可被看成“父控件的空间”从而继续进行进一步布局。

1.1 实例

<Window x:Class="WPF.LayoutContainer.Controls.GridLayoutWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="GridLayoutWindow" Height="300" Width="300" Background="LightCyan" Padding="10"> <Grid Margin="10" Background="Yellow"> <Grid.RowDefinitions> <RowDefinition Height="30"/> <RowDefinition Height="50"/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="2*"/> <ColumnDefinition Width="3*"/> <ColumnDefinition Width="4*"/> </Grid.ColumnDefinitions> <TextBlock Text="0,0" Grid.Row="0" Grid.Column="0" Background="Pink" Margin="5"/> <TextBlock Text="0,1" Grid.Row="0" Grid.Column="1" Background="Purple" Margin="5"/> <TextBlock Text="0,2" Grid.Row="0" Grid.Column="2" Background="Pink" Margin="5"/> <TextBlock Text="0,3" Grid.Row="0" Grid.Column="3" Background="Purple" Margin="5"/> <TextBlock Text="1,0" Grid.Row="1" Grid.Column="0" Background="Pink" Margin="5"/> <TextBlock Text="1,1" Grid.Row="1" Grid.Column="1" Background="Purple" Margin="5"/> <TextBlock Text="1,2" Grid.Row="1" Grid.Column="2" Background="Pink" Margin="5"/> <TextBlock Text="1,3" Grid.Row="1" Grid.Column="3" Background="Purple" Margin="5"/> <Grid Grid.Row="2" Grid.ColumnSpan="4" Background="yellow" Margin="5"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Label Content="0,0" Grid.Row="0" Grid.Column="0" HorizontalContentAlignment="Center" Background="Pink"/> <Label Content="0,1" Grid.Row="0" Grid.Column="1" HorizontalContentAlignment="Center" Background="Purple"/> <Label Content="1,0" Grid.Row="1" Grid.Column="0" HorizontalContentAlignment="Center" Background="Purple"/> <Label Content="1,1" Grid.Row="1" Grid.Column="1" HorizontalContentAlignment="Center" Background="Pink"/> <Label Content="2,0" Grid.Row="2" Grid.Column="0" HorizontalContentAlignment="Center" Background="Pink"/> <Label Content="2,1" Grid.Row="2" Grid.Column="1" HorizontalContentAlignment="Center" Background="Purple"/> </Grid> </Grid></Window> 

例子中的布局如下：

 

上例中，父控件的空间首先被分为3行4列的12个单元格。第3列的4个单元格被合并，合并后的空间又由Grid分为3行2列的6个单元格。

可以看出，用Gird控件，可以将父控件的空间划分成任意单元格，每个单元格可以被当成父控件空间，其内可以再次布局；单元格又可被合并。

 

1.2 Grid的特点

Grid的便利之处在于：

1）Grid本身并不占用任何空间，可以看作是用单元格对父控件空间的划分；

2）各个行定义的高度（或列定义的宽度）可以是成比例的（*/n*）、按需的（Auto）、固定的，自动响应父控件的Resize；

3）可以合并单元格（Grid.RowSpan / Grid.ColumnSpan）

但是，如果整个页面的布局都用Grid的话，可读性会降低。

 

 

2.DockPanel

顾名思义，DockPanel内的控件是“停靠”在父控件空间的某处（左、上、右、下）的。

2.1示例

<Window x:Class="WPF.LayoutContainer.Controls.DockPanelLayoutWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="DockPanelLayoutWindow" Height="300" Width="300" Background="LightCyan"> <DockPanel Margin="10"> <TextBlock DockPanel.Dock="Left" Text="Left" Background="White"/> <TextBlock DockPanel.Dock="Top" Text="Top" Background="LightGray" /> <TextBlock DockPanel.Dock="Right" Text="Right" Background="Gray"/> <TextBlock DockPanel.Dock="Bottom" Text="Bottom" Background="DarkGray"/> <TextBlock Text="Fill" Background="Black" Foreground="White"/> </DockPanel></Window> 

例子中的布局如下：

2.2 DockPanel的特点

DockPanel利用在子控件中设定DockPanel.Dock="Left"/"Top"/"Right"/"Bottom"来指定该子控件的泊靠位置，其布局效果与子控件书写顺序是相关的。例如，三个子控件的书写顺序是1)-DockPanel.Dock="Left"，2)-DockPanel.Dock="Right" 3)，布局效果是从左到右1、3、2，1泊靠在左边，3泊靠在右边，而2在中间填满。DockPanel有一个叫做的LastChildFill属性，默认值为真，在该情况下，左右一个书写的子控件的DockPanel.Dock设定是无效的，自动人为是DockPanel.Dock＝“Fill”。

3 StackPanel

StackPanel的功能最简单，只支持将子控件按书写顺序竖排（Orientation="Vertical" 默认）或者横排（Orientation="Horizontal"）。

3.1 示例

<Window x:Class="WPF.LayoutContainer.Controls.StackPanelLayoutWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="StackPanelLayoutWindow" Height="300" Width="300" Background="LightCyan" > <StackPanel Margin="10" Background="Yellow"> <StackPanel Margin="5" Background="Pink" Orientation="Horizontal"> <TextBlock Text="text1" Background="White" Margin="5"/> <TextBlock Text="text2" Background="LightGray" Margin="5"/> </StackPanel> <StackPanel Margin="5" Background="Pink" > <TextBlock Text="text3" Background="White" Margin="5"/> <TextBlock Text="text4" Background="LightGray" Margin="5"/> </StackPanel> </StackPanel></Window> 

例子中的布局如下：

3.2 StackPanel的特点

StackPanel中子控件书写最为简介，但是功能也最为简单。

 

结合三者特点，在做整个页边的布局时，Grid较为适合，它可以像划分表格一样，将整个页面划分成若干单元格，布局时利用行列标号将子控件放在任意指定位置；且自动响应Resize；而做固定大小的局部布局时，DockPanel和StackPanel比较适合，写法简明，层次清晰。