C#教程

关注公众号 jb51net

关闭
首页 > 软件编程 > C#教程 > WPF自定义面板

WPF实现自定义Panel面板的示例详解

作者:卓尔不设凡

WPF中的Panel(面板),是继承自FrameworkElement的抽象类,表示一个可以用来排列子元素的面板,本文主要来和大家聊聊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自定义面板的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文