WPF响应式的布局面板

DockPanel：泊靠式面板:
DockPanel定义一个区域，在这个区域中，可以使子元素通过描点的形式排列，这些对象位于 Children 属性中。停靠面板类似于WinForm中控件的Dock属性。DockPanel会对每个子元素进行排序，并将根据指定的边进行停靠，多个停靠在同侧的元素则按顺序排序。在DockPanel中，指定停靠边的控件，会根据定义的顺序占领边角，所有控件绝不会交叠，先定义的控件占的空间其他后定义的控件是不会占到一点点的，只能使用剩余空间，无论对DockPanel的最后一个子元素设置任何停靠值，该子元素都将始终填满剩余的空间。如果不希望最后一个元素填充剩余区域，可以将DockPanel属性LastChildFill设置为false，还必须为最后一个子元素显式指定停靠方向。
使用场合：自适应的窗口布局
下面展示DockPanel属性LastChildFill的两种情况：
第一种：不设置LastChildFill属性默认情况：

<DockPanel>
        <Button DockPanel.Dock="Left" Content="OneLeft" />
        <Button DockPanel.Dock="Top" Content="TwoTop" />
        <Button DockPanel.Dock="Right" Content="ThreeRight" />
        <Button DockPanel.Dock="Bottom" Content="FourBottom" />
        <Button DockPanel.Dock="Top" Content="Five填充剩余空间"/>
 </DockPanel>

WPF响应式的布局面板
第二种:设置LastChildFill属性为false

<DockPanel LastChildFill="False">
        <Button DockPanel.Dock="Left" Content="OneLeft" />
        <Button DockPanel.Dock="Top" Content="TwoTop" />
        <Button DockPanel.Dock="Right" Content="ThreeRight" />
        <Button DockPanel.Dock="Bottom" Content="FourBottom" />
        <Button DockPanel.Dock="Top" Content="Five不填充剩余空间"/>
</DockPanel>

WPF响应式的布局面板
WrapPanel：自动折行面板（环绕面板）
WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列，当长度或高度不够时
会自动调整进行换行，后续排序按照从上至下或从右至左的顺序进行
Orientation—设置内容换行方向。当Orientation属性的值设置为 Horizontal：元
素是从左向右排列的，然后自上至下自动换行。当Orientation属性的值设置为
Vertical：元素是从上向下排列的，然后从左至右自动换行。
ItemHeight—设置面板下所有子元素高度。每个子元素填充高度的方式取决于它的
VerticalAlignment属性、Height属性等。任何比ItemHeight高的元素都将被截断。
ItemWidth—设置面板下所有子元素宽度。每个子元素填充高度的方式取决于它的
VerticalAlignment属性、Width属性等。任何比ItemWidth高的元素都将被截断。
水平换行Orientation=“Horizontal”

<Window x:Class="WpfApplication1.自动折行面板_环绕面板_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 Orientation="Horizontal" ItemWidth="90">
        		<Button>按钮1</Button>
        		<Button>按钮2</Button>
        		<Button>按钮3</Button>
        		<Button>按钮4</Button>
        		<Button>按钮5</Button>
        		<Button>按钮6</Button>
    		</WrapPanel>    
</Window>

WPF响应式的布局面板
垂直换行Orientation=“Horizontal”

<Window x:Class="WpfApplication1.自动折行面板_环绕面板_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 Orientation="Vertical" ItemHeight="89">
        		<Button>Vertical1</Button>
        		<Button>Vertical2</Button>
        		<Button>Vertical3</Button>
        		<Button>Vertical4</Button>
        		<Button>Vertical5</Button>
        		<Button>Vertical6</Button>
        		<Button>Vertical7</Button>
    		</WrapPanel>
</Window>

WPF响应式的布局面板
DockPanel：泊靠式面板、WrapPanel：自动折行面板（环绕面板）这两个布局面板都是
可以自适应的，适合做自适应的窗口布局