WPF实现自定义Panel面板的示例详解
作者：卓尔不设凡
WPF中的Panel（面板），是继承自FrameworkElement的抽象类，表示一个可以用来排列子元素的面板。
在WPF中，一种预设了几种常用的面板，如Grid、StackPanel、WrapPanel等。他们都是继承自Panel类，并拥有自己的排列子元素的逻辑。
因此，想要自定义一个Panel，核心的问题就是如何排列子元素。
例如，我们做一个轴排列的元素，即元素沿着X、Y轴排列。我们定义，以面板宽度（Width）或者高度（Height）的中点，为坐标原点，水平向右为X轴，垂直向下位Y轴。如下图所示
先上源代码：
后代代码：
public class AxisPanel:Panel
{
internal static readonly DependencyProperty OrientationProperty = DependencyProperty.Register(
"Oritentation",typeof(Orientation),typeof(AxisPanel),new FrameworkPropertyMetadata(Orientation.Horizontal,FrameworkPropertyMetadataOptions.AffectsArrange));
/// <summary>
/// 指示子元素的布局方向
/// </summary>
public Orientation Orientation
{
get => (Orientation)GetValue(OrientationProperty);
set => SetValue(OrientationProperty, value);
}
/// <summary>
/// 测量子元素，以确定自己的DesiredSize。
/// 此方法由父级元素自动调用
/// </summary>
/// <param name="availableSize">父级元素提供给该面板的可用空间尺寸</param>
/// <returns>此面板对象需要的尺寸（DesiredSize）</returns>
protected override Size MeasureOverride(Size availableSize)
{
double width = 0, height = 0;
switch(Orientation)
{
case Orientation.Horizontal:
// 水平布局
foreach(UIElement child in Children)
{
child.Measure(availableSize);
width += child.DesiredSize.Width; // 计算面板需要的宽度；
if(child.DesiredSize.Height > height) // 计算面板需要的高度：为所有元素中最大的高度
{
height = child.DesiredSize.Height;
}
}
break;
case Orientation.Vertical:
// 垂直布局
foreach(UIElement child in Children)
{
child.Measure(availableSize);
height += child.DesiredSize.Height; // 计算面板需要的高度
if(child.DesiredSize.Width > width)
{
width = child.DesiredSize.Width; // 计算面板需要宽度：为所有元素中最大的宽度
}
}
break;
}
return new Size(width, height);
}
/// <summary>
/// 排列子元素
/// 此方法由父级元素自动调用
/// </summary>
/// <param name="finalSize">父级元素提供给该面板用于布局的最终尺寸。</param>
/// <returns></returns>
protected override Size ArrangeOverride(Size finalSize)
{
double totalWidth = 0, totalHeight = 0; // 面板的总宽度、高度
switch(Orientation)
{
case Orientation.Horizontal: // 水平排列：需要计算子元素左上角的坐标点，已经用于排列子元素的区域大小
double x1, y1; // 子元素左上角点的坐标
for (int i=0;i<Children.Count;i++)
{
x1 = totalWidth; // 子元素的x坐标，应该为总宽度的值
y1 = (finalSize.Height - Children[i].DesiredSize.Height) / 2; // 子元素的y坐标，始终保存在轴上
totalWidth += Children[i].DesiredSize.Width; // 总宽度增加
Rect rect = new(x1, y1, Children[i].DesiredSize.Width, Children[i].DesiredSize.Height); // 放置子元素的矩形区域
Children[i].Arrange(rect); // 放置子元素
}
break;
case Orientation.Vertical:
double x2, y2=0;
for (int i = 0; i < Children.Count;i++)
{
x2 = (finalSize.Width - Children[i].DesiredSize.Width) / 2;
y2 = totalHeight;
totalHeight += Children[i].DesiredSize.Height; // 所有子元素的总高度
Rect rect2 = new(x2, y2, Children[i].DesiredSize.Width, Children[i].DesiredSize.Height);
Children[i].Arrange(rect2);
}
break;
}
return finalSize;
}
}前端代码：
<rayPanel:AxisPanel Orientation="Horizontal">
<Button Content="Button1" Width="100" Height="40"/>
<Button Content="Button2" Width="100" Height="40" Canvas.Left="100"/>
<Button Content="Button3" Width="100" Height="40" Canvas.Left="200"/>
<TextBlock Text="你在么？"/>
</rayPanel:AxisPanel>显示效果如下：
当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的布局系统，该元素最终使用了多少空间。
以上就是WPF实现自定义Panel面板的示例详解的详细内容，更多关于WPF自定义面板的资料请关注脚本之家其它相关文章！