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

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

1.Grid

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

1.1 实例

[xhtml]  view plain copy

1. <Window x:Class="WPF.LayoutContainer.Controls.GridLayoutWindow"  
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4.     Title="GridLayoutWindow" Height="300" Width="300" Background="LightCyan" Padding="10">  
5.     <Grid Margin="10" Background="Yellow">  
6.         <Grid.RowDefinitions>  
7.             <RowDefinition Height="30"/>  
8.             <RowDefinition Height="50"/>  
9.             <RowDefinition/>  
10.         </Grid.RowDefinitions>  
11.         <Grid.ColumnDefinitions>  
12.             <ColumnDefinition Width="*"/>  
13.             <ColumnDefinition Width="2*"/>  
14.             <ColumnDefinition Width="3*"/>  
15.             <ColumnDefinition Width="4*"/>  
16.         </Grid.ColumnDefinitions>  
17.         <TextBlock Text="0,0" Grid.Row="0" Grid.Column="0" Background="Pink" Margin="5"/>  
18.         <TextBlock Text="0,1" Grid.Row="0" Grid.Column="1" Background="Purple" Margin="5"/>  
19.         <TextBlock Text="0,2" Grid.Row="0" Grid.Column="2" Background="Pink" Margin="5"/>  
20.         <TextBlock Text="0,3" Grid.Row="0" Grid.Column="3" Background="Purple" Margin="5"/>  
21.         <TextBlock Text="1,0" Grid.Row="1" Grid.Column="0" Background="Pink" Margin="5"/>  
22.         <TextBlock Text="1,1" Grid.Row="1" Grid.Column="1" Background="Purple" Margin="5"/>  
23.         <TextBlock Text="1,2" Grid.Row="1" Grid.Column="2" Background="Pink" Margin="5"/>  
24.         <TextBlock Text="1,3" Grid.Row="1" Grid.Column="3" Background="Purple" Margin="5"/>  
25.           
26.         <Grid Grid.Row="2" Grid.ColumnSpan="4" Background="yellow" Margin="5">  
27.             <Grid.RowDefinitions>  
28.                 <RowDefinition/>  
29.                 <RowDefinition/>  
30.                 <RowDefinition/>                 
31.             </Grid.RowDefinitions>  
32.             <Grid.ColumnDefinitions>  
33.                 <ColumnDefinition/>  
34.                 <ColumnDefinition/>  
35.             </Grid.ColumnDefinitions>  
36.             <Label Content="0,0" Grid.Row="0" Grid.Column="0" HorizontalContentAlignment="Center" Background="Pink"/>  
37.             <Label Content="0,1" Grid.Row="0" Grid.Column="1" HorizontalContentAlignment="Center" Background="Purple"/>  
38.             <Label Content="1,0" Grid.Row="1" Grid.Column="0" HorizontalContentAlignment="Center" Background="Purple"/>  
39.             <Label Content="1,1" Grid.Row="1" Grid.Column="1" HorizontalContentAlignment="Center" Background="Pink"/>  
40.             <Label Content="2,0" Grid.Row="2" Grid.Column="0" HorizontalContentAlignment="Center" Background="Pink"/>  
41.             <Label Content="2,1" Grid.Row="2" Grid.Column="1" HorizontalContentAlignment="Center" Background="Purple"/>  
42.         </Grid>  
43.     </Grid>  
44. </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示例

[c-sharp]  view plain copy

1. <Window x:Class="WPF.LayoutContainer.Controls.DockPanelLayoutWindow"  
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4.     Title="DockPanelLayoutWindow" Height="300" Width="300" Background="LightCyan">  
5.     <DockPanel Margin="10">  
6.         <TextBlock DockPanel.Dock="Left" Text="Left" Background="White"/>  
7.         <TextBlock DockPanel.Dock="Top" Text="Top" Background="LightGray" />  
8.         <TextBlock DockPanel.Dock="Right" Text="Right" Background="Gray"/>  
9.         <TextBlock DockPanel.Dock="Bottom" Text="Bottom" Background="DarkGray"/>  
10.         <TextBlock Text="Fill" Background="Black" Foreground="White"/>  
11.     </DockPanel>  
12. </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 示例

[c-sharp]  view plain copy

1. <Window x:Class="WPF.LayoutContainer.Controls.StackPanelLayoutWindow"  
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
4.     Title="StackPanelLayoutWindow" Height="300" Width="300" Background="LightCyan" >  
5.     <StackPanel Margin="10" Background="Yellow">  
6.         <StackPanel Margin="5" Background="Pink" Orientation="Horizontal">  
7.             <TextBlock Text="text1" Background="White" Margin="5"/>  
8.             <TextBlock Text="text2" Background="LightGray" Margin="5"/>  
9.         </StackPanel>  
10.         <StackPanel Margin="5" Background="Pink" >  
11.             <TextBlock Text="text3" Background="White" Margin="5"/>  
12.             <TextBlock Text="text4" Background="LightGray" Margin="5"/>  
13.         </StackPanel>  
14.     </StackPanel>  
15. </Window>  

 

例子中的布局如下：