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

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

1.Grid

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

1.1 实例

 

view plaincopy to clipboardprint?
  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>  
 

 

例子中的布局如下：

Grid Layout

 

上例中，父控件的空间首先被分为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示例

 

view plaincopy to clipboardprint?
  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>  
 

 

例子中的布局如下：

DockPanel

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

 

view plaincopy to clipboardprint?
  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>  
 

 

例子中的布局如下：

StackPanel

3.2 StackPanel的特点

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

 

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

posted @ 2011-11-09 20:56  therockthe  阅读(543)  评论(0)    收藏  举报