WPF自定义Panel的示例详解_C#

在 wpf 应用程序中，拖放操作是实现用户交互的重要组成部分。通过拖放操作，用户可以轻松地将数据从一个位置移动到另一个位置，或者将控件从一个容器移动到另一个容器。然而，wpf 中默认的拖放操作可能并不是那么好用。为了解决这个问题，我们可以自定义一个 panel 来实现更简单的拖拽操作。

自定义 panel 的优点有很多。首先，我们可以根据自己的需求来设计 panel 的外观和行为。其次，我们可以使用代码来控制拖放操作的细节，比如拖放的开始和结束位置、拖放过程中控件的显示方式等等。最后，我们可以将自定义 panel 作为一个控件，方便地应用到不同的应用程序中。

在本教程中，我们将一步一步地创建一个自定义 panel 来实现更简单的拖拽操作。我们将学习如何定义 panel 的布局、如何处理拖放事件，以及如何将自定义 panel 应用到不同的应用程序中。按照本教程的步骤操作，您将能够创建一个功能强大且易于使用的自定义 panel，从而使您的 wpf 应用程序更加友好和易用。

1.定义一个继承自panel的类

public class dragstackpanel : panel
{
    /// <summary>
    /// 获取或设置方向
    /// </summary>
    public orientation orientation
    {
        get { return (orientation)getvalue(orientationproperty); }
        set { setvalue(orientationproperty, value); }
    }

    public static readonly dependencyproperty orientationproperty =
        dependencyproperty.register("orientation", typeof(orientation), typeof(dragstackpanel), new propertymetadata(orientation.vertical));
}

2.重写panel类的measureoverride方法测量控件size

public class dragstackpanel : panel
{
    protected override size measureoverride(size availablesize)
    {
        var paneldesiredsize = new size();
        foreach (uielement child in internalchildren)
        {
            child.measure(availablesize);
            if (this.orientation == orientation.horizontal)
            {
                paneldesiredsize.width += child.desiredsize.width;
                paneldesiredsize.height = double.isinfinity(availablesize.height) ? child.desiredsize.height : availablesize.height;
            }
            else
            {
                paneldesiredsize.width = double.isinfinity(availablesize.width) ? child.desiredsize.width : availablesize.width;
                paneldesiredsize.height += child.desiredsize.height;
            }
        }
        return paneldesiredsize;
    }
}

3.重写panel类的arrangeoverride方法排列控件位置

public class dragstackpanel : panel
{
    protected override size arrangeoverride(size finalsize)
    {
        double x = 0, y = 0;
        foreach (frameworkelement child in internalchildren)
        {
            // 坐标
            var position = new point(x, y);
            // 宽度
            var width = child.desiredsize.width;
            // 高度
            var height = child.desiredsize.height;
            // 通过排列方向计算宽度和高度
            if (this.orientation == orientation.vertical)
            {
                width = finalsize.width;
            }
            else
            {
                height = finalsize.height;
            }

            // 尺寸
            var size = new size(width, height);
            // 排列位置及尺寸
            child.arrange(new rect(position, size));

            // 计算位置
            if (this.orientation == orientation.horizontal)
            {
                x += child.desiredsize.width;
            }
            else
            {
                y += child.desiredsize.height;
            }
        }

        return finalsize;
    }
}

查看运行效果

<uniformgrid rows="2">
    <local:dragstackpanel orientation="horizontal">
        <button>test1</button>
        <button>test2</button>
    </local:dragstackpanel>
    <local:dragstackpanel orientation="vertical">
        <button>test3</button>
        <button>test4</button>
    </local:dragstackpanel>
</uniformgrid>

4.重写previewmouseleftbuttondown方法

该方法在按下鼠标左键时触发，我们需要在该方法中获取第一次按下鼠标的坐标，并且通过命中测试找到我们要拖拽的控件，最后还要在装饰层中添加一个元素，该元素的背景用原控件的外观来填充（visualbrush），这样就可以覆盖原来的控件，以便在拖拽控件时能跨越控件的边界。以下为参考代码：

public class dragstackpanel : panel
{
    private frameworkelement draggingelement;
    private point mouserelativeposition;
    private int draggingelementzindex;
    protected override void onpreviewmouseleftbuttondown(mousebuttoneventargs e)
    {
        // 获取鼠标相对于panel的坐标
        var mouseposition = e.getposition(this);
        // 通过命中测试获取当前鼠标位置下的元素
        var hittestresult = this.inputhittest(mouseposition) as frameworkelement;
        // 通过命中测试结果找到当前拖拽的控件子项
        draggingelement = findchild(hittestresult);
        if (draggingelement != null && this.internalchildren.contains(draggingelement))
        {
            // 记录鼠标相对位置，以供后续使用
            mouserelativeposition = e.getposition(draggingelement);

            // 暂存zindex
            draggingelementzindex = panel.getzindex(draggingelement);
            // 将zindex置顶
            panel.setzindex(draggingelement, this.internalchildren.count);
            // 添加遮罩，防止拖拽时覆盖
            addoverlay(draggingelement);

            e.handled = true;
        }

        base.onpreviewmouseleftbuttondown(e);
    }
}

5.重写previewmousemove方法

该方法在鼠标移动时触发，我们需要在鼠标被按下移动时，根据当前的坐标与第一次按下的坐标实时计算出被拖拽元素的偏移量，这样该元素就能跟随鼠标移动，实现拖拽效果。以下为参考代码：

public class dragstackpanel : panel
{
    private frameworkelement draggingelement;
    private point mouserelativeposition;
    private int draggingelementzindex;
    protected override void onpreviewmousemove(mouseeventargs e)
    {
        var mouseposition = e.getposition(this);
        if (e.leftbutton == mousebuttonstate.pressed && draggingelement != null)
        {
            // 当前拖拽控件置为不可鼠标命中，以供命中下一层的换位控件
            draggingelement.ishittestvisible = false;
            // 判断当前拖拽的控件是否为顶层控件
            if (panel.getzindex(draggingelement) == this.internalchildren.count)
            {
                // 计算出当前拖拽控件相对于this的位置（控件左上角）
                var targetposition = new point(mouseposition.x - mouserelativeposition.x - draggingelement.margin.left, mouseposition.y - mouserelativeposition.y - draggingelement.margin.top);
                // 获取当前拖拽控件在this中的原始位置
                var draggingelementoriginalposition = getdraggingelementoriginalposition(draggingelement);
                // 计算拖拽控件移动时的偏移量
                var offset = new point(targetposition.x - draggingelementoriginalposition.x, targetposition.y - draggingelementoriginalposition.y);
                // 应用位移
                draggingelement.rendertransform = new translatetransform(offset.x, offset.y);
            }
            
             e.handled = true;
        }
        base.onpreviewmousemove(e);
    }
}

6.重写previewmouseleftbuttonup方法。

该方法在鼠标左健抬起时触发，我们需要在该方法中将一些参数重置。

public class dragstackpanel : panel
{
    private frameworkelement draggingelement;
    private point mouserelativeposition;
    private int draggingelementzindex;
    protected override void onpreviewmouseleftbuttonup(mousebuttoneventargs e)
    {
        mouserelativeposition = default;
        removeoverlay(draggingelement);
        panel.setzindex(draggingelement, draggingelementzindex);
        draggingelement.ishittestvisible = true;
        draggingelement.rendertransform = null;
        draggingelement = null;
        e.handled = true;
        base.onpreviewmouseleftbuttonup(e);
    }
}

以下为运行效果：

7.处理控件的拖拽换位

拖拽换位的思路就是将当前正在拖拽的元素放置到新的index中，并把该index后面的所有元素整体后移一位。该功能在previewmousemove方法中实现。

public class dragstackpanel : panel
{
    private frameworkelement draggingelement;
    private frameworkelement hitelement;
    private point mouserelativeposition;
    private int draggingelementzindex;
    protected override void onpreviewmousemove(mousebuttoneventargs e)
    {
        ...
        // 命中当前拖拽控件的下一层控件
        var hittestresult = this.inputhittest(mouseposition) as frameworkelement;
        // 查找被命中的下一层换位控件
        hitelement = findchild(hittestresult);

        // 判断是否有效
        if (hitelement != null && this.internalchildren.contains(hitelement))
        {
            // 应用换位
            movechild(draggingelement, hitelement);
        }
    }

    private void movechild(frameworkelement element1, frameworkelement element2)
    {
        var index1 = this.internalchildren.indexof(element1);
        var index2 = this.internalchildren.indexof(element2);
        if (index1 >= 0 && index2 >= 0)
        {
            this.internalchildren.removeat(index1);
            this.internalchildren.insert(index2, element1);
        }
    }
}

在arrangeoverride方法中处理重新排列时当前拖拽元素的坐标。

public class dragstackpanel : panel
{
    private frameworkelement draggingelement;
    private frameworkelement hitelement;
    private point mouserelativeposition;
    private int draggingelementzindex;
    protected override size arrangeoverride(size finalsize)
    {
        double x = 0, y = 0;
        foreach (frameworkelement child in internalchildren)
        {
            ...

            // 获取当前正在拖拽元素的位置坐标
            var dragelementposition = getdraggingelementmovingposition(child);
            if (dragelementposition != default)
            {
                // 处理拖拽元素坐标
                var offset = new point(dragelementposition.x - position.x, dragelementposition.y - position.y);
                child.rendertransform = new translatetransform(offset.x, offset.y);
                setdraggingelementmovingposition(child, dragelementposition);
            }

            ...
        }

        return finalsize;
    }
}

运行效果

8.处理跨panel拖拽

到目前为止已经实现了本panel内的控件随意拖拽换位，处理从a控件拖到b控件也类似，这里需要用到一个静态变量来保存正在拖拽的控件，当b控件检测到鼠标进入时，只需要在a控件移除正在拖拽的控件，在b控件添加正在拖拽的控件就可以实现了。以下为核心代码：

public class dragstackpanel : panel
{
    // 通过拖拽传递到下一个panel的控件
    private static frameworkelement draggingtransferelement;
    private void control_mouseenter(object sender, mouseeventargs e)
    {
        panel.children.remove(draggingtransferelement);
        panel.draggingelement = null;

        panel.setzindex(draggingtransferelement, this.internalchildren.count + 1);
        this.children.add(draggingtransferelement);
        this.addoverlay(draggingtransferelement);
    }
}

以下为运行效果：

9.在listbox、listview、datagrid等itemscontrol中使用拖拽功能

所有继承自itemscontrol的控件，都有一个itemspanel属性，该属性可以指定一个panel类型的控件来对itemscontrol进行排列。理论上只要将itemscontrol.itemspanel设置为我们自己开发的panel控件就可以实现排列及拖拽功能，但是这里直接使用的话并不会有效果。原因就是我们并没有对数据绑定的情况下做处理。它的处理逻辑也与上面的类似，首先找到itemscontrol控件，通过对itemssource进行操作就可以实现排列功能，由于代码大同小异这里就不再赘述。以下为listbox控件拖拽的案例效果。

<listbox itemssource="{binding items}">
    <listbox.itemspanel>
        <itemspaneltemplate>
            <dragstackpanel allowcrossborderdrag="true" candragandsort="true" isitemshost="true"/>
        </itemspaneltemplate>
    </listbox.itemspanel>
    <listbox.itemtemplate>
        <datatemplate>
            <textblock text="{binding property1}" />
        </datatemplate>
    </listbox.itemtemplate>
</listbox>

10.添加动画效果

至此基本功能已经开发完成了，下面我们为它添加上动画效果，让它更具有观赏性。动画的核心思想就是记录每个元素旧位置的坐标，当元素移动到新位置时启动一个动画，从旧坐标过渡到新坐标，由于代码太过基础，这里就不展示了，直接上效果。

<dragstackpanel allowcrossborderdrag="true" candragandsort="true" isitemshost="true">
    <dragstackpanel.childmovebehavior>
        <childmovebehavior duration="0:0:0.5">
            <childmovebehavior.easex>
                <quinticease easingmode="easeout" />
            </childmovebehavior.easex>
            <childmovebehavior.easey>
                <quinticease easingmode="easeout" />
            </childmovebehavior.easey>
        </childmovebehavior>
    </dragstackpanel.childmovebehavior>
</dragstackpanel>