使用WrapPanel和DockPanel

WrapPanel和DockPanel也是连个比较简单的布局容器，这两个空间将弥补StackPanel的某些不足，该开发人员更多可选择的布局方式，这两个作用如下：

　　WrapPanel控件：该控件根据Orientation属性，在垂直叠放控件或者在行中放置控件方面，WrapPanel与StackPanel类似。除了叠放外，WrapPanel还未包含的控件提供了换行支持，因此，如果在WrapPanel

中放入超过其容器宽度的内容时，这些控件被换行显示以形成换行效果，

　　

　　DockPanel控件：DockPanel提供停靠支持，以便让工具栏或用户希望停靠在面板一侧的其他控件容易定位。

　　使用WrapPanel控件布局

　　与Stackpanel控件类似，WrapPanel也有一个Orientation属性，默认值Horizontal，控件将从左向右进行排列。如果容器的宽度不足以排放所有控件时，将会一个新行从左向右进行排列

。Orientation属性的另外一个选择是vertical，元素从上到下排列。

 WrapPanel通常用在一些小范围的布局场合，而不是整个窗口的总体布局，比如可以使用WrapPanel来保持控件以一种类似工具条的形式，下面看实例：

　　

<WrapPanel Margin="3">
            <Button Name="btn1" Content="按钮1" VerticalAlignment="Top" />
            <Button Name="btn2" MaxHeight="60" Content="按钮2" />
            <Button Name="btn3" VerticalAlignment="Center">居中按钮</Button>
        </WrapPanel>

在代码中，添加3个按钮，并为这些按钮分别设置了verticalAlignment属性，已设置按钮在控件中的对齐方式，也许读者会觉得这与Stackpanel没什么区别，但是如果调整主窗体大小，则

会看到当宽度不够摆放在一行时，WrapPanel将换一个新的行进行按钮的显示。

使用DockPanel控件布局

　　Dockpanel容器面板用于拉伸空间以停靠在指定的窗口边缘。比如，在Windows Forms中的工具栏，通常停靠在Windows窗体的顶端 放置在Dockpanel中的控件将被拉伸以适应容器的边缘。

比如，将一个Button控件Dock在容器的顶部，则控件的宽度被拉伸以适应容器的宽度，而高度则保持适应内容的大小。

DockPanel 控件提供了附加属性Dock。这是一个Dock枚举类型，可选的值如下，

　　Left：位于DockPanel左侧的子元素。

　　Top：位于DockPanel的顶部的子元素。

　　Right：位于DockPanel右侧的子元素。

　　Bottom：位于DockPanel底部的子元素。

容器中的子元素可以使用Dock属性来设置要停靠的容器边缘，下面新建一个DockpanelDemo的示例，而高度保持适应内容的大小

    <DockPanel>
        <Button x:Name="button" Content="Button" DockPanel.Dock="Top" />
        <Button x:Name="button1" Content="Button" DockPanel.Dock="Bottom" />
        <Button x:Name="button2" Content="button" DockPanel.Dock="Left"/>
        <Button Name="btn1" Content="button2" DockPanel.Dock="Right"/>
        <Button x:Name="button3" Content="Button" />
    </DockPanel>

如下图：

　　

在这个XAML文档中，DockPanel上、下、左、右分别放置了一个Button 通过使用DockPanel控件的附加属性，将Button控件分别Dock到容器的4个边缘

需要注意的是最后一个Button，该Button没有设置任何属性，但是会自动沾满DockPanel控件的剩余部分空间，这是因为为DockPanel控件指定了LastChildFill属性。

　　注意：如果将LastChildFill属性设置为true，这是默认设置，则无论对DockPanel的最后一个子元素设置的其他任何停靠值是什么，该元素都将始终填满剩余的控件。要将子元素停靠在另一个方向，必须将LastChildFill属性设置为false，还必须对最后一个子元素设置I显示停靠的方向。

    <DockPanel LastChildFill="False">
        <Button x:Name="button" Content="Button" DockPanel.Dock="Top" />
        <Button x:Name="button1" Content="Button" DockPanel.Dock="Bottom" />
        <Button x:Name="button2" Content="button" DockPanel.Dock="Left"/>
        <Button Name="btn1" Content="button2" DockPanel.Dock="Right"/>
        <Button x:Name="button3" Content="Button"  DockPanel.Dock="Top" />
    </DockPanel>

开发人员也可以使用Margin、HorizontalAlignment、VerticalAlignment、属性来控制子元素的显示方式

    <DockPanel LastChildFill="False">
        <Button x:Name="button" Content="Button" DockPanel.Dock="Top" HorizontalAlignment="Center" />
        <Button x:Name="button1" Content="Button" DockPanel.Dock="Bottom" />
        <Button x:Name="button2" Content="button" DockPanel.Dock="Left"/>
        <Button Name="btn1" Content="button2" DockPanel.Dock="Right"/>
        <Button x:Name="button3" Content="Button"  DockPanel.Dock="Top" />
    </DockPanel>