DockPanel泊靠式面板—趣味拼图

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

Window：窗口
UserControl : 用户控件

<UserControl x:Class="DockPanel.DockPanel泊靠式面板"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:DockPanel"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="630">
   
</UserControl>

定义设计高度为300，设计宽度为630

这是页面的布局，设置了上下左右DockPanel.Dock后接着又是一组上下左右：

在这个布局里，将它按比例划分切割成九份，然后嵌套到布局中成了一个拼图：
高：19.18 除以5份 3.836

宽：40.45 除以5份 8.09

Height 从上到下的比例 1.25，0.5，1.5，0.5 ，1.25 各乘于3.836等于高度

With 从左到右的比例 0.75，0.75，2，0.75，0.75 各乘于8.09等于宽度

将切出来的图片按顺序拼接进视图：

代码如下:

<UserControl x:Class="DockPanel.DockPane