WPF中的Panel（面板），是继承自FrameworkElement的抽象类，表示一个可以用来排列子元素的面板。

在WPF中，一种预设了几种常用的面板，如Grid、StackPanel、WrapPanel等。他们都是继承自Panel类，并拥有自己的排列子元素的逻辑。

因此，想要自定义一个Panel，核心的问题就是如何排列子元素。

例如，我们做一个轴排列的元素，即元素沿着X、Y轴排列。我们定义，以面板宽度（Width）或者高度（Height）的中点，为坐标原点，水平向右为X轴，垂直向下位Y轴。如下图所示

先上源代码：

后代代码：

1 public class AxisPanel:Panel
2 {
3 internal static readonly DependencyProperty OrientationProperty = DependencyProperty.Register(
4 "Oritentation",typeof(Orientation),typeof(AxisPanel),new FrameworkPropertyMetadata(Orientation.Horizontal,FrameworkPropertyMetadataOptions.AffectsArrange));
5
6
7 ///

8 /// 指示子元素的布局方向 9 ///

10 public Orientation Orientation
11 {
12 get => (Orientation)GetValue(OrientationProperty);
13 set => SetValue(OrientationProperty, value);
14 }
15
16
17 ///

18 /// 测量子元素，以确定自己的DesiredSize。 19 /// 此方法由父级元素自动调用 20 ///

21 /// 父级元素提供给该面板的可用空间尺寸
22 /// 此面板对象需要的尺寸（DesiredSize）
23 protected override Size MeasureOverride(Size availableSize)
24 {
25 double width = 0, height = 0;
26 switch(Orientation)
27 {
28 case Orientation.Horizontal:
29 // 水平布局
30 foreach(UIElement child in Children)
31 {
32 child.Measure(availableSize);
33 width += child.DesiredSize.Width; // 计算面板需要的宽度；
34
35 if(child.DesiredSize.Height > height) // 计算面板需要的高度：为所有元素中最大的高度
36 {
37 height = child.DesiredSize.Height;
38 }
39 }
40 break;
41
42 case Orientation.Vertical:
43 // 垂直布局
44 foreach(UIElement child in Children)
45 {
46 child.Measure(availableSize);
47 height += child.DesiredSize.Height; // 计算面板需要的高度
48
49 if(child.DesiredSize.Width > width)
50 {
51 width = child.DesiredSize.Width; // 计算面板需要宽度：为所有元素中最大的宽度
52 }
53 }
54 break;
55 }
56
57 return new Size(width, height);
58 }
59
60
61
62 ///

63 /// 排列子元素 64 /// 此方法由父级元素自动调用 65 ///

66 /// 父级元素提供给该面板用于布局的最终尺寸。
67 ///
68 protected override Size ArrangeOverride(Size finalSize)
69 {
70 double totalWidth = 0, totalHeight = 0; // 面板的总宽度、高度
71 switch(Orientation)
72 {
73 case Orientation.Horizontal: // 水平排列：需要计算子元素左上角的坐标点，已经用于排列子元素的区域大小
74 double x1, y1; // 子元素左上角点的坐标
75 for (int i=0;i<Children.Count;i++)
76 {
77 x1 = totalWidth; // 子元素的x坐标，应该为总宽度的值
78 y1 = (finalSize.Height - Children[i].DesiredSize.Height) / 2; // 子元素的y坐标，始终保存在轴上
79 totalWidth += Children[i].DesiredSize.Width; // 总宽度增加
80 Rect rect = new(x1, y1, Children[i].DesiredSize.Width, Children[i].DesiredSize.Height); // 放置子元素的矩形区域
81 Children[i].Arrange(rect); // 放置子元素
82 }
83 break;
84
85 case Orientation.Vertical:
86 double x2, y2=0;
87
88 for (int i = 0; i < Children.Count;i++)
89 {
90 x2 = (finalSize.Width - Children[i].DesiredSize.Width) / 2;
91 y2 = totalHeight;
92 totalHeight += Children[i].DesiredSize.Height; // 所有子元素的总高度
93 Rect rect2 = new(x2, y2, Children[i].DesiredSize.Width, Children[i].DesiredSize.Height);
94 Children[i].Arrange(rect2);
95 }
96 break;
97 }
98 return finalSize;
99 }
100 }

前端代码：

1 2 3 4 5 6

显示效果如下：

（当Orientation = “Horizontal”）                                                     （当Orientation="Vertical"）

名词简写：

元素：表示一个继承自UIElement类的实例。

Frame元素：表示一个继承自FrameworkElement类的实例。

因为FrameworkElement是继承自UIElement的，因此在很多时候，一个FrameworkElement也可以被称为元素。只有在涉及到FrameworkElement类自己的属性、方法时，会被称为Frame元素。

WPF的布局，分为两个步骤：

1. 测量：确定子元素需要的尺寸（DesiredSize）。

2. 排列：确定子元素的位置，大小。

1. 测量：

在UIElement中，定义了两个方法：Measure() 和 MeasureCore()。在FrameworkElement中还定义了MeasureOverride()方法。他们的工作方式是：

1）. 父级元素调用子元素实例的Measure()，此时Measure()方法会做一堆的逻辑检查，然后调用其MeasureCore()方法。在MeasureCore()方法中，真正的去计算元素的期望尺寸（DesiredSize）。在UIElement类中，MeasureCore()返回的尺寸永远是（0，0）（请看微软的源代码：UIElement.MeasureCore()）。这意味着如果子元素是一个UIElement的实例，则其期望尺寸永远会是（0，0）。

2）.FrameworkElement继承了UIElement，重写并密封了MeasureCore()方法。因此，当调用子元素的Measure()方法时，子元素的Measure()方法实际上会调用重写后的MeasureCore()方法，以计算Frame元素的期望尺寸。

3）.在FrameworkElement重写的MeasureCore()方法中，实际上又会调用MeasureOverride()方法。MeasureOverride()方法是一个虚方法，可供用户重写，以实现用户自己的测量逻辑，同时还能保证相关的检查不被遗漏。

2. 排列：

排列的工作方式，与“测量”是一样的。不再赘述。

由此可知，要实现自己的布局，就有三个选择：

1）继承自UIElement，并重写MeasureCore()和ArrangeCore()方法（并添加需要的属性等）。此路径难度很大。

2）继承自FrameworkElement，并重写MeasureOverride()和ArrangeOverride()方法（并添加需要的属性等）。此路径难度不小。

3）继承自Panel，并重写MeasureOverride()和ArrageOverride()方法（并添加需要的属性等）。此路径难度最小。因为Panel类已经定义了很多相关的属性、方法可共用户使用。

参数的意义

　　在MeasureOverride()和ArrageOverride()方法中，两个参数及返回值的意义是不同的：

　　MeasureOverride()：该方法的参数availableSize，表示父元素，可以用来布局该元素的可用空间。此参数由WPF布局系统确定；返回值为该元素期望的尺寸（DesiredSize）。自定义面板中，如果用户不重写该方法（实现自己的测量方式），则会返回一个(0,0)的期望尺寸。

　　ArrangeOverride()：该方法的参数finalSize，表示父元素，最终分配给该元素，用于排列子元素的尺寸。当WPF的布局系统测量完各控件的尺寸后，开始依次排列子元素。当排列到本元素时，剩余的空间可能与MeasureOverride()方法中的availableSize不同。因此此时传递进来的，是可以用于排列子元素的最终的空间大小。在ArrangeOverride()方法中的，可以按照自己的逻辑去排列子元素。并最终返回一个尺寸值（Size类型），告诉WPF的布局系统，该元素最终使用了多少空间。

以上为自己学习并理解的。如有错误，还请指正。