WPF下实现控件的拖拽功能

  • Post author:
  • Post category:其他




流程图系列文章

第一章 WPF下实现控件的拖拽功能





前言

我们写运动控制上位机程序的时候,经常是要考虑如何实现一个流程,我们要考虑,完成当前步骤后,下一个步骤要实现什么,判断条件,满足后的步骤是什么,不满足条件的步骤又是什么,或者需要一直等待条件满足才开始下一个步骤,也要考虑超时都不满足条件需要走另一个步骤,根据条件也有可能会跳转回原来的步骤,这些逻辑通常都是很繁琐的(使用if-elseif、switch-case),而且写好后再次修改时,容易漏改忘改等造成逻辑不稳定问题;这里,我们介绍一种全新的实现逻辑的方式:通过流程图的原理去实现这些业务性的繁琐的逻辑,实现

逻辑可视化,编程拖拉拽



首先,我们先实现第一步,WPF中的控件,实现流程图样式,可拖拽流程图控件出来到画布上,在画布上可自由拉拽到新的位置,实现逻辑可视化排布。

什么是拖拽?就是拖放,是指将目标从拖动源中拖出,然后放置到目标对象上。

在这里,我们会有技术点详解、代码展示、效果展示、源码链接!




一、目标

需要拖放的对象,这个对象可能是一副图片,或者是TextBox中的文字,也可能是List中的某一项,在这里,我们使用的是Border源(使用VS的Blend.exe可轻松绘制不同形状),分别是不同形状的,类似于流程图,可参考下图形状。

在这里插入图片描述

在WPF中,我们使用一个实现了IDataObject的接口来封装目标,这个接口有以下几个代表方法:

  • GetData,检索指定数据格式的数据对象
  • GetDataPresent,查看是否具有指定格式的数据,或者数据是否可以转换为指定方式
  • GetFormats,返回一个格式列表,此数据对象中的数据以这些格式存储,或可以转换为这些格式
  • SetData,在此数据对象中存储指定的数据

    在这里插入图片描述
    在这里插入图片描述
    WPF提供DataObject类中的IDataObject的基本实现;对于许多常见数据传输方案,常用DataObject类已足够满足要求

    以下代码我们用DataObject包装了ListView中的一行数据:

    DataObject data = new DataObject(typeof(ItemInfo), listview.SelectedItem);



二、拖动源

目标原来所在的容器,例如一个Canvas,一个TextBox,或者一个List,在这里我们使用画布来放置拖动源。



三、目标对象

目标的“新家”,例如一个Canvas,一个TextBox,或者一个List

UIElement类中,有一个AllowDrop属性,用来指示元素是否可用作拖放操作的目标,该属性默认值为flase,因此我们需要将该值设置为true

<object AllowDrop=”bool” …/>

在这里,我们的目标对象使用画布

要注意:画布需要给它设置一个背景颜色,不然无法接收到事件



四、拖放

拖(Drag):一个动作,一般是在目标上按住鼠标左键,然后移动鼠标

使用DragDrop.DoDragDrop发起一个拖动动作

使用方法:

/// <summary>
/// 拖拽控件出来
/// </summary>
/// <param name="dataSource">要拖动的控件</param>
/// <param name="data">要拖动的数据对象</param>
/// <param name="dragDropEffects">拖动操作的选项</param>
public static void DoDragDrop(DependencyObject dataSource, object data, DragDropEffects dragDropEffects)
{
    DragDrop.DoDragDrop(dataSource, data, dragDropEffects);
}

放(Drop):在目标对象上松开鼠标左键

和放置有关的事件:

  • DragEnter,将对象拖至放置目标的边框内发生此事件
  • DragLeave,对对象拖出放置目标的边框时发生此事件
  • DragOver,在放置目标的边框内拖动(移动)对象时发生此事件
  • Drop,将对象放到放置目标上时发生此事件
<!--Canvas是拖拽的放置对象,需要设置:Drop事件,拖拽完成时触发;AllowDrop,允许拖拽;BackGroud,设置一个颜色,不然无法接收到事件-->
<Canvas x:Name="canvas" Grid.Column="1" Drop="Canvas_Drop" AllowDrop="True" Background="Transparent"/>



五、效果演示

在这里插入图片描述



六、源码链接

源码下载:

基于流程图实现无代码编程业务逻辑(1)




总结


逻辑可视化,编程拖拉拽



版权声明:本文为Aflashstar原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。