WPF自定义Panel：让拖拽变得更简单

news2025/2/2 20:12:16

在 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>

文章转载自：趋时软件

原文链接：https://www.cnblogs.com/qushi2020/p/18098514

体验地址：引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1555174.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【QT学习】1.qt初识，创建qt工程，使用按钮，第一个交互按钮

【QT学习】1.qt初识，创建qt工程，使用按钮，第一个交互按钮

1.初识qt--》qt是个框架&#xff0c;不是语言 1.学习路径 一 QT简介 &#xff0c;QTCreator &#xff0c;QT工程 &#xff0c;QT的第一个程序&#xff0c;类&#xff0c;组件 二 信号与槽 三 对话框 四 QT Desiner 控件 布局 样式 五 事件 六 GUI绘图 七 文件 八 …
阅读更多...
Makefile用法及变量

Makefile用法及变量

一、Makefile概述 自动化编译”&#xff1a;一旦写好&#xff0c;只需要一个make命令&#xff0c;整个工程完全自动编译&#xff0c;极大的提高了软件开发的效率。 提升编译效率&#xff1a;再次编译&#xff0c;只编译修改的文件。 通过检查时间来检查文件是否被修改过 二…
阅读更多...
嵌入式3-29

嵌入式3-29

今日作业&#xff1a;用fwrite 和 fseek功能&#xff0c;将一张bmp格式的图片更改成 德国国旗#include <stdio.h> #include <string.h> #include <stdlib.h> #include <math.h> typedef unsigned char bgr[3]; int main(int argc, const char *argv[])…
阅读更多...
从电荷角度理解开关电容中的电荷守恒

从电荷角度理解开关电容中的电荷守恒

目录 一些铺垫电容的电荷量的解释电荷流入流出对节点电压的影响 从电荷角度理解开关电容加法器中的电荷守恒以开关电容积分器为例说明什么样的节点是电荷守恒 一些铺垫 电容的电荷量的解释 对于一个1F的电容&#xff0c;当它的压差为1V时&#xff0c;它所携带的电荷量是QCU1库…
阅读更多...
在香港服务器搭网站速度怎么样？

在香港服务器搭网站速度怎么样？

在香港服务器搭网站速度怎么样&#xff1f;一般要看用户所在地理位置&#xff0c;如果用户距离香港服务器较远&#xff0c;网络延迟会增加&#xff0c;导致加载速度变慢。 面对海外地区用户&#xff0c;香港作为亚洲连接海外的网络中转枢纽&#xff0c;多条国际海底电缆&#…
阅读更多...
浪潮信息AIStation与潞晨科技Colossal-AI 完成兼容性认证！

浪潮信息AIStation与潞晨科技Colossal-AI 完成兼容性认证！

为进一步提升大模型开发效率&#xff0c;近年来&#xff0c;浪潮信息持续加强行业合作&#xff0c;携手业内头部&#xff0c;全面进攻大模型领域。日前&#xff0c;浪潮信息AIStation智能业务创新生产平台与潞晨科技Colossal-AI大模型开发工具完成兼容性互认证。后续&#xff0…
阅读更多...
用grafana+prometheus+cadvisor监控容器指标数据，并查询当前容器的网速网络用量

用grafana+prometheus+cadvisor监控容器指标数据，并查询当前容器的网速网络用量

前言 整理技术&#xff0c;在这篇文章中&#xff0c;将会搭建grafanaprometheuscadvisor监控容器&#xff0c;并使用一个热门数据看板&#xff0c;再监控容器的性能指标 dashboard效果 这个是node-exporter采集到的数据&#xff0c;我没装node-exporter&#xff0c;而且这也…
阅读更多...
鸿蒙OS开发实例：【消息传递】

鸿蒙OS开发实例：【消息传递】

介绍 在HarmonyOS中&#xff0c;参考官方指导&#xff0c;其实你会发现在‘指南’和‘API参考’两个文档中&#xff0c;对消息传递使用的技术不是一对一的关系&#xff0c;那么今天这篇文章带你全面了解HarmonyOS 中的消息传递 概况 参照官方指导&#xff0c;我总结了两部分…
阅读更多...
VSCode在文件生成添加作者，创建时间、最后编辑人和最后编辑时间等信息

VSCode在文件生成添加作者，创建时间、最后编辑人和最后编辑时间等信息

一、安装插件 我使用的是 korofileheader 二、配置文件 左下角点击设置图标—设置—输入"ext:obkoro1.korofileheader"—点击"在setting.json中编辑" 进入后会自动定位到你添加信息的地方 "Author": "tom", "Date": "…
阅读更多...
哈乐沃德变现喻久港：休闲游戏广告变现收入提升心得 | TOPON变现干货

哈乐沃德变现喻久港：休闲游戏广告变现收入提升心得 | TOPON变现干货

12月10日&#xff0c;由罗斯基联合Topon、钛动科技共同主办的《游戏赛道新机会》主题系列沙龙在武汉举办。活动邀请了国内外多家业内知名公司的负责人到场分享&#xff0c;现场嘉宾分别从自己擅长的领域出发&#xff0c;通过数据分析&#xff0c;案例复盘等多个维度方向进行讲解…
阅读更多...
02---java面试八股文——spring-------10题

02---java面试八股文——spring-------10题

11、spring 支持几种 bean scope&#xff1f; Spring bean 支持 5 种 scope&#xff1a; Singleton&#xff08;单例&#xff09;-&#xff1a;每个 Spring IoC 容器仅有一个单实例。Prototype&#xff08;原型&#xff09;&#xff1a; 每次请求都会产生一个新的实例。Reques…
阅读更多...
Android R 广播注册与发送流程分析

Android R 广播注册与发送流程分析

静态广播注册时序图 动态广播注册时序图 发送广播时序图 前言 广播接收器可以分为动态和静态&#xff0c;静态广播接收器就是在 AndroidManifest.xml 中注册的&#xff0c;而动态的广播接收器是在代码中通过 Context#registerReceiver() 注册的。 这里先从静态广播的流程开始…
阅读更多...
Unity类银河恶魔城学习记录11-7 p109 Aplly item modifiers源代码

Unity类银河恶魔城学习记录11-7 p109 Aplly item modifiers源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili ItemData_Equipment.cs using System.Collections; using System.Collecti…
阅读更多...
python 计算生态概览的概述

python 计算生态概览的概述

文章目录 前言python计算生态库的介绍1. 网络爬虫2. 数据分析3.文本处理4.数据可视化5. 机器学习6. 图形用户界面7. 游戏开发8. 网络应用开发 前言 python计算生态概览的解释 Python计算生态概览是对Python作为一门强大而广泛使用的编程语言所拥有的庞大软件集合的整体描述和…
阅读更多...
【御控物联】 IOT异构数据JSON转化（场景案例一）

【御控物联】 IOT异构数据JSON转化（场景案例一）

文章目录 前言技术资料 前言 随着物联网、大数据、智能制造技术的不断发展&#xff0c;越来越多的企业正在进行工厂的智能化转型升级。转型升级第一步往往是设备的智能化改造&#xff0c;助力设备数据快速上云&#xff0c;实现设备数据共享和场景互联。然而&#xff0c;在生产…
阅读更多...
速通汇编（二）汇编mov、addsub指令

速通汇编（二）汇编mov、addsub指令

一&#xff0c;mov指令 mov指令的全称是move&#xff0c;从字面上去理解&#xff0c;作用是移动&#xff08;比较确切的说是复制&#xff09;数据&#xff0c;mov指令可以有以下几种形式 无论哪种形式&#xff0c;都是把右边的值移动到左边 mov 寄存器&#xff0c;数据&#…
阅读更多...
【群晖】白群晖如何公网访问

【群晖】白群晖如何公网访问

【群晖】白群晖如何公网访问 ——> 点击查看原文 在使用默认配置搭建好的群晖NAS后&#xff0c;我们可以通过内网访问所有的服务。但是&#xff0c;当我们出差或者不在家的时候也想要使用应该怎么办呢&#xff1f; 目前白群提供了两种比较快捷的方式&#xff0c;一种是直接注…
阅读更多...
奥比中光深度相机（二）：PyQt5实现打开深度摄像头功能

奥比中光深度相机（二）：PyQt5实现打开深度摄像头功能

文章目录 奥比中光深度相机&#xff08;二&#xff09;&#xff1a;PyQt5实现打开深度摄像头功能官方给出的调用深度相机源码环境精炼 UI界面设计逻辑代码构建槽函数连接提取视频流在界面中显示深度视频流注意关闭相机 总体代码效果演示运行main.py代码选择相机打开摄像头关闭摄…
阅读更多...
【2】单链表

【2】单链表

【2】单链表 1、单链表2、单链表的设计3、接口设计4、SingleLinkedList5、node(int index) 返回索引位置的节点6、clear()7、添加8、删除9、indexOf(E element) 1、单链表 &#x1f4d5;动态数组有个明显的缺点 &#x1f58a; 可能会造成内存空间的大量浪费 &#x1f4d5; 能否…
阅读更多...
Elementor Pro最新学习版：强大的WordPress页面构建器插件

Elementor Pro最新学习版：强大的WordPress页面构建器插件

产品用途 Elementor Pro的核心功能包括拖放编辑器、前端编辑器、实时预览、允许导入和导出模板、支持35预建模板、多种营销工具和插件支持、多种排版选项、能够放置内联元素、Font Awesome图标支持、允许构建移动响应页面、登陆页面构建器、弹出窗口生成器、对评级系统的架构标…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023