wpf中的五类面板

Canvas、StackPanel、WrapPanel、DockPanel和Grid是WPF中主要的5种内建面板，这些面板类都位于System.Windows.Controls命名空间下。

1、wrappanel

WrapPanel与StackPanel类似，但是除了会对子元素作栈处理外，当没有足够空间来放一个栈时，它还会把子元素封装在行和列中。这对于显示Item的过渡数目十分有用，会产生一个比普通列表更加有趣的布局，很像Windows资源管理器。

它定义了3个控制其行为的属性：

       Orientation——这就像StackPanel中的Orientation属性，唯一不同的是默认值为Horizontal。当Horizontal Orientation看上去类似于Windows资源管理器的缩略图视图：元素是从左向右排列的，然后自上至下自动换行。Vertical Orientation看上去类似于Windows资源管理器的列表视图：元素是从上向下排列的，然后从左至右自动换行。

       ItemHeight——所有子元素都一致的高度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Height属性等。任何比ItemHeight高的元素都将被截断。

       ItemWidth——所有子元素都一致的宽度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Width属性等。任何比ItemWidth高的元素都将被截断。

2、stackpanel

StackPanel是以堆叠的方式显示其中的控件,排列方向用orientation.

Orientation="Vertical"

默认，由上到下显示各控件。控件在未定义的前提下，宽度为StackPanel的宽度，高度自动适应控件中内容的高度

Orientation="Horizontal"

由左到右显示各控件。控件在未定义的前提下，高度为StackPanel的高度，宽度自动适应控件中内容的宽度

布局属性

StackPanle的布局属性与HTML的布局容器很类似的，都可以设置对齐方式，外边距，最大最小宽度、高度等。

1. 对齐方式

首先我们来看下对其方式，在StackPanel中如果是垂直方向的排列，那么VerticalAligment属性不起作用，因为所有元素的高度都自动地调整为刚好满足各自需要，但是HorizentalAligment属性非常重要，它决定了各个元素在行的什么位置。HorizentalAligment有4个值可以选择:Left, Center, Right 和 Stretch, 相信熟悉Html代码的朋友来说，前面3个值很容易理解，最后一个值Stretch会将子元素拉伸至整个StackPanel面板的宽度，并且会被设置为默认值，

3、dockpanel

以上、下、左、右、中为基本结构的布局方式，类似于Java AWT布局中的BorderLayout。但与BorderLayout不同的是，每一个区域可以同时放置多个控件，在同一区域放置的多个控件采用的布局方式为StackPanel方式。

dockpanel.dock面板确定控件的停靠位置，dock面板中的控件可以实现控件的自动填充。

4、   Canvas

 Canvas是最基本的面板，它仅支持用显式坐标定位元素，它也允许指定相对任何角的坐标，而不仅仅是左上角。可以使用Left、Top、Right、Bottom附加属性在Canvas中定位元素。通过设置Left和Right属性的值表示元素最靠近的那条边，应该与Canvas左边缘或右边缘保持一个固定的距离，设置Top和Bottom的值也是类似的意思。实质上，你在选择每个元素停靠的角时，附加属性的值是作为外边距使用的。如果一个元素没有使用任何附加属性，它会被放在Canvas的左上角（等同于设置Left和Top为0）。

 元素不能使用两个以上的Canvas附加属性，如果同时设置Canvas.Left和Canvas.Right属性，那么后者将会被忽略。因此，一个元素一次不能停靠多于两个Canvas的角。虽然Canvas太原始，不能用来创建灵活的用户界面，但是它是最轻量级的面板。当真的需要对元素的位置做准确的控制时，应该注意使性能最大化，例如，Canvas对于矢量图形中原始形状的准确定位非常有用。

    <Canvas>
        <Button Background="Red">Left=0,Top=0</Button>
        <Button Canvas.Left="18" Canvas.Top="18" Background="Orange">Left=18,Top=18</Button>
        <Button Canvas.Right="18" Canvas.Bottom="18">Right=18,Bottom=18</Button>
        <Button Canvas.Right="0" Canvas.Bottom="0" Background="Lime">Right=0,Bottom=0</Button>
        <Button Canvas.Right="0" Canvas.Top="0" Background="Blue">Right=0,Top=0</Button>
        <Button Canvas.Left="0" Canvas.Bottom="0" Background="Aqua">Left=0,Bottom=0</Button>      
    </Canvas>

5、grid

grid.rowdefinitions  和grid.columndefinitions Grid是最通用的面板，它可以让你在一个多行、多列的表中排列子元素，而不依靠包装，提供了许多特性来有效地可能告知行和列。

其属性grid.row和grid.column可以设置grid面板中子元素的存放位置，另外grid.rowspan和grid.columnspan可以设置其跨越的范围。

要使用Grid，首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和ColumnDefinitions元素，从而定义行数和列数。可以在Grid中使用Row和Column附加属性定位子元素，它们都是以0为基准的整型值。如果没有显式设置任何行或列，Grid将会隐式地加入一个单元格。而如果没有在子元素上显式地设置Grid.Row或者Grid.Column，它们的值将为0.

        Grid的单元格可以是空的，一个单元格中可以有多个元素，而在单元格中元素是根据它们的Z顺序一个接着一个呈现的。同一个单元格中的子元素不会与其他元素交互布局，信息——它们仅仅是重叠而已。从上图中看到的在线文章列表太小了，可以使用Grid的两个附加属性来解决这个问题，它们是RowSpan和ColumnSpan。属性默认设置为1，且可以被设置为任何比1大的数字，这样可以让元素跨多行或多列。