原本是打算在解决WPF动态加载并显示外部配置文件这样一个问题之后再写文章的，不过大概是当成作业了，所以这里整理一些基础的知识，全当自己在温习了。也好在公司做WPF的不多，所以讲些基础应该也不算说废话吧.....

       言归正传，容器控件为WPF控件提供内置的布局和定位功能，方便快速设计各种有效的用户界面。WPF容器控件包含的种类有很多种，比如我们今天要介绍的Grid、Canvas 或 StackPanel；UniformGrid；WrapPanel等。而每种容器控件都可以处理其包含的控件的布局和位置，并且可以向包含的控件提供有助于定位的属性。

 

 

===================

              Grid

=================== 

最常用的容器控件了。默认情况下，在WPF设计器中打开的每个新 Window 中都包含一个 Grid 控件。Grid是以表格形式组织控件的一种布局方式，他的每一个单元格中可以放置多个控件，但控件可能会层叠在一起 ，单元格可以合并，且可以自定行列的高度和宽度。

在设置高度和宽度时可以采用两种写法： 
1、Height=”60”：不加“星号”表示固定的高度 
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控件结合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的单元格中 

如下图所示：

 

 

===================
               Canvas
===================

唯一一个支持绝对定位的容器控件，也就是说你可以将里面的控件放置在距离面板的任一角有一定偏移量的位置。它包含四种属性：Top、Bottom、Right 和 Left。Canvas 控件内包含的控件必须指定一个水平属性和一个垂直属性，并借此指定该控件将要偏离的角。是最灵活的一个面板。之前公司做游戏需要动态加载时就是利用他的绝对定位。

 

 

 

注：以上两个是我比较常用的容器控件，今天在做填单平台的界面时也是先用把主界面用Grid分成 若干行列，在细化分各个单元格内的元素。

 

 

===================         

         UniformGrid
===================

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

 

例如，如果四个控件添加到 UniformGrid 中，它们将安排在包含四个单元格的网格中。

如：

  <UniformGrid>

      <Button Content="ButtonA" />

      <Button Content="ButtonB" />

      <Button Content="ButtonC" />

      <Button Content="ButtonD" />

      <Button Content="ButtonE" />

      <Button Content="ButtonF" />

      <Button Content="ButtonG" />

      <Button Content="ButtonH" />

  </UniformGrid>

 

 

 

在使用UniformGrid的时候：

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

· 单元格的数量取决于放入的控件的数量，且单元格一定是行、列数相同的，即1*1、2*2、3*3、4*4…的单元格分布。

 

 

 

===================               

        StackPanel
===================
StackPanel 要么垂直叠放包含的控件，要么将包含的WPF容器控件排列在水平行中，具体情况取决于 Orientation 属性的值。如果将比 StackPanel 的宽度能显示的控件还要多的控件添加到 StackPanel 中，这些控件将被截掉且不显示。
 

纵向：

<StackPanel Orientation="Vertical">

   <Button>Button A</Button>

   <Button>Button B</Button>

   <Button>Button C</Button>

   <Button>Button D</Button>

   <Button>Button E</Button>

   <Button>Button F</Button>

</StackPanel>

 

 

横向：

<StackPanel Orientation="Horizontal">

   <Button>Button A</Button>

   <Button>Button B</Button>

   <Button>Button C</Button>

   <Button>Button D</Button>

   <Button>Button E</Button>

   <Button>Button F</Button>

</StackPanel>

 

 

 

===================                

         WrapPanel

===================

 功能和StackPanel有写类似，不过多加了换行支持。因此，如果将比 WrapPanel 的宽度能显示的控件还要多的控件添加到 WrapPanel 中，这些控件将换行以形成另一个叠放或行。

 

 

 

===================                

         DockPanel

===================

DockPanel 提供停靠支持，以便让工具栏或您希望停靠在面板一侧的其他控件容易定位。DockPanel 控件以上、下、左、右、中为基本结构的布局方式，每一个区域可以同时放置多个控件，在同一区域放置的多个控件采用的布局方式为StackPanel方式。

如：

<DockPanel >

   <Button Content="ButtonA" Width="70" DockPanel.Dock="Top" />

   <Button Content="ButtonB" Width="70" HorizontalAlignment="Right" DockPanel.Dock="Top" />

   <Button Content="ButtonC" Margin="10" DockPanel.Dock="Top" />

   <Button Content="ButtonD" DockPanel.Dock="Left" />

   <Button Content="ButtonE" DockPanel.Dock="Right" />

   <Button Content="ButtonF" DockPanel.Dock="Bottom" />

   <Button Content="ButtonG" />

</DockPanel>

 

 

 

 

基本如上介绍了，希望有了解到。另外开头说的问题，我会在解决后另付一篇写上的，一起学习了。