WPF中5种内建面板Canvas、StackPanel、WrapPanel、DockPanel、Grid分析

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

• Grid 按行列排列内容，如果没有特别说明行列则内容充满容器，多个内容则重叠充满内容
• StackPanel 水平或垂直的放置内容元素
• WrapPanel 自动换行的方式放置内容元素
• DockPanel 按照Top、left、right等方式布局内容元素，最后一个元素充满可利用的容器空间
• Canvas 在内容元素中设置附加属性Top、Left，根据Top、Left布局内容元素

WPF内建面板之——Grid
Grid是最通用的面板，它可以让你在一个多行、多列的表中排列子元素，而不依靠包装，提供了许多特性来有效地可能告知行和列。 用Grid实现类似于Visual Studio的启动界面：<Grid Background=“LightBlue”
要使用Grid，首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和ColumnDefinitions元素，从而定义行数和列数。可以在Grid中使用Row和Column附加属性定位子元素，它们都是以0为基准的整型值。如果没有显式设置任何行或列，Grid将会隐式地加入一个单元格。而如果没有在子元素上显式地设置Grid.Row或者Grid.Column，它们的值将为0. Grid的单元格可以是空的，一个单元格中可以有多个元素，而在单元格中元素是根据它们的Z顺序一个接着一个呈现的。
与Canvas一样，同一个单元格中的子元素不会与其他元素交互布局，信息——它们仅仅是重叠而已。可以使用Grid的两个附加属性来解决这个问题，它们是RowSpan和ColumnSpan。属性默认设置为1，且可以被设置为任何比1大的数字，这样可以让元素跨多行或多列。 通过设置某个RowDefinition的Height和某个ColumnDefinition的Width为字符串Auto（区分大小写），就可以实现自动尺寸监控。
Grid的特点
Grid的便利之处在于：
1）Grid本身并不占用任何空间，可以看作是用单元格对父控件空间的划分；
2）各个行定义的高度（或列定义的宽度）可以是成比例的（/n）、按需的（Auto）、固定的，自动响应父控件的Resize；
3）可以合并单元格（Grid.RowSpan / Grid.ColumnSpan）但是，如果整个页面的布局都用Grid的话，可读性会降低。

<Grid Width="200" Height="100" >
<!--定义了两列-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="100*"/>
</Grid.ColumnDefinitions>
 
<!--定义了四行-->
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
 
<TextBlock Grid.Row="0" Grid.Column="0" TextAlignment="Right" Text="用户名：" Name="UserName"/>
<!--第一行第一列-->
 
<TextBlock Grid.Row="1" Grid.Column="0" TextAlignment="Right" Text="密码：" Name="pass"/>
<TextBlock Grid.Row="2" Grid.Column="0" TextAlignment="Right" Text="确认密码：" Name="repass"/>
<Button Grid.Row="3" Grid.ColumnSpan="2" Height="23" Width="100" Content="确认" Click="Button_Click" Name="btn"/>
<!--Grid.ColumnSpan="2":合并单元格-->
<TextBox Name="TxtBoxName" Grid.Row="0" Grid.Column="1" Text="" />
<!--第一行第二列-->
<PasswordBox Name="pass1" Grid.Row="1" Grid.Column="1"/>
<!--密码框-->
<PasswordBox Name="pass2" Grid.Row="2" Grid.Column="1" />
</Grid>

WPF内建面板之——DockPanel
DockPanel支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。

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”。

 <DockPanel >
   2:     <Button Content="ButtonA" Width="70" DockPanel.Dock="Top" />
   3:     <Button Content="ButtonB" Width="70" HorizontalAlignment="Right" DockPanel.Dock="Top" />
   4:     <Button Content="ButtonC" Margin="10" DockPanel.Dock="Top" />
   5:     <Button Content="ButtonD" DockPanel.Dock="Left" />
   6:     <Button Content="ButtonE" DockPanel.Dock="Right" />
   7:     <Button Content="ButtonF" DockPanel.Dock="Bottom" />
   8:     <Button Content="ButtonG" />
   9: </DockPanel>
DockPanel

WPF内建面板之——WrapPanel
WrapPanel与StackPanel类似，但是除了会对子元素作栈处理外，当没有足够空间来放一个栈时，它还会把子元素封装在行和列中。这对于显示Item的过渡数目十分有用，会产生一个比普通列表更加有趣的布局，很像Windows资源管理器。与StackPanel医院，WrapPanel没有附加属性来控制元素的位置。它定义了3个控制其行为的属性： Orientation——这就像StackPanel中的Ori。
WrapPanel是一个非常简单的面板，
从左至右按顺序位置定位子元素，如果排满断开至下一行。
后续排序按照从上至下或从右至左的顺序进行。
WrapPanel面板也提供了Orientation属性设置排列方式，这跟StatickPanel基本相似。不同的是WrapPanel会根据内容自动换行。

<Window x:Class="WpfTutorialSamples.Panels.WrapPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel" Height="300" Width="300">
        <WrapPanel>
                <Button>Test button 1</Button>
                <Button>Test button 2</Button>
                <Button>Test button 3</Button>
                <Button Height="40">Test button 4</Button>
                <Button>Test button 5</Button>
                <Button>Test button 6</Button>
        </WrapPanel>
</Window>

WPF内建面板之——StackPanel
StackPanel是一个受欢迎的面板，因为它方便好用，它会顺序对它的子元素进行排列。它是少数几个没有定义任何附加属性的面板之一。由于没有附加属性来排列子元素
StackPanel的功能最简单，只支持将子控件按书写顺序竖排（Orientation=“Vertical” 默认）或者横排（Orientation=“Horizontal”）。

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

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

    <Canvas>
        <Button Canvas.Left="152" Canvas.Top="209" Content="Button" Height="23" Name="button1" Width="75" />
    </Canvas>