经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » C# » 查看文章
WPF/C#:如何实现拖拉元素
来源:cnblogs  作者:mingupupup  时间:2024/6/28 9:33:58  对本文有异议

前言

在Canvas中放置了一些元素,需要能够拖拉这些元素,在WPF Samples中的DragDropObjects项目中告诉了我们如何实现这种效果。

效果如下所示:

拖拉过程中的效果如下所示:

image-20240627093348785

具体实现

xaml页面

我们先来看看xaml:

  1. <Canvas Name="MyCanvas"
  2. PreviewMouseLeftButtonDown="MyCanvas_PreviewMouseLeftButtonDown"
  3. PreviewMouseMove="MyCanvas_PreviewMouseMove"
  4. PreviewMouseLeftButtonUp="MyCanvas_PreviewMouseLeftButtonUp">
  5. <Rectangle Fill="Blue" Height="32" Width="32" Canvas.Top="8" Canvas.Left="8"/>
  6. <TextBox Text="This is a TextBox. Drag and drop me" Canvas.Top="100" Canvas.Left="100"/>
  7. </Canvas>

为了实现这个效果,在Canvas上使用了三个隧道事件(预览事件)PreviewMouseLeftButtonDownPreviewMouseMovePreviewMouseLeftButtonUp

而什么是隧道事件(预览事件)呢?

预览事件,也称为隧道事件,是从应用程序根元素向下遍历元素树到引发事件的元素的路由事件。

PreviewMouseLeftButtonDown当用户按下鼠标左键时触发。

PreviewMouseMove当用户移动鼠标时触发。

PreviewMouseLeftButtonUp当用户释放鼠标左键时触发。

再来看看cs:

  1. private bool _isDown;
  2. private bool _isDragging;
  3. private UIElement _originalElement;
  4. private double _originalLeft;
  5. private double _originalTop;
  6. private SimpleCircleAdorner _overlayElement;
  7. private Point _startPoint;

定义了这几个私有字段。

鼠标左键按下事件处理程序

鼠标左键按下事件处理程序:

  1. private void MyCanvas_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  2. {
  3. if (e.Source == MyCanvas)
  4. {
  5. }
  6. else
  7. {
  8. _isDown = true;
  9. _startPoint = e.GetPosition(MyCanvas);
  10. _originalElement = e.Source as UIElement;
  11. MyCanvas.CaptureMouse();
  12. e.Handled = true;
  13. }
  14. }

最开始引发这个事件的是MyCanvas元素,当事件源是Canvas的时候,不做处理,因为我们只想处理发生在MyCanvas子元素上的鼠标左键按下事件。

鼠标移动事件处理程序

现在来看看鼠标移动事件处理程序:

  1. private void MyCanvas_PreviewMouseMove(object sender, MouseEventArgs e)
  2. {
  3. if (_isDown)
  4. {
  5. if ((_isDragging == false) &&
  6. ((Math.Abs(e.GetPosition(MyCanvas).X - _startPoint.X) >
  7. SystemParameters.MinimumHorizontalDragDistance) ||
  8. (Math.Abs(e.GetPosition(MyCanvas).Y - _startPoint.Y) >
  9. SystemParameters.MinimumVerticalDragDistance)))
  10. {
  11. DragStarted();
  12. }
  13. if (_isDragging)
  14. {
  15. DragMoved();
  16. }
  17. }
  18. }

鼠标左键已经按下了,但还没开始移动事,执行DragStarted方法。

创建装饰器

DragStarted方法如下:

  1. private void DragStarted()
  2. {
  3. _isDragging = true;
  4. _originalLeft = Canvas.GetLeft(_originalElement);
  5. _originalTop = Canvas.GetTop(_originalElement);
  6. _overlayElement = new SimpleCircleAdorner(_originalElement);
  7. var layer = AdornerLayer.GetAdornerLayer(_originalElement);
  8. layer.Add(_overlayElement);
  9. }
  1. _overlayElement = new SimpleCircleAdorner(_originalElement);

创建了一个新的装饰器(Adorner)并将其与一个特定的UI元素关联起来。

而WPF中装饰器是什么呢?

装饰器是一种特殊类型的 FrameworkElement,用于向用户提供视觉提示。 装饰器有很多用途,可用来向元素添加功能句柄,或者提供有关某个控件的状态信息。

Adorner 是绑定到 UIElement 的自定义 FrameworkElement。 装饰器在 AdornerLayer 中呈现,它是始终位于装饰元素或装饰元素集合之上的呈现表面。 装饰器的呈现独立于装饰器绑定到的 UIElement 的呈现。 装饰器通常使用位于装饰元素左上部的标准 2D 坐标原点,相对于其绑定到的元素进行定位。

装饰器的常见应用包括:

  • UIElement 添加功能句柄,使用户能够以某种方式操作元素(调整大小、旋转、重新定位等)。
  • 提供视觉反馈以指示各种状态,或者响应各种事件。
  • UIElement 上叠加视觉装饰。
  • 以视觉方式遮盖或覆盖 UIElement 的一部分或全部。

Windows Presentation Foundation (WPF) 为装饰视觉元素提供了一个基本框架。

在这个Demo中装饰器就是移动过程中四个角上出现的小圆以及内部不断闪烁的颜色,如下所示:

image-20240627095912873

image-20240627095956121

这是如何实现的呢?

这个Demo中自定义了一个继承自Adorner的SimpleCircleAdorner,代码如下所示:

  1. using System;
  2. using System.Windows;
  3. using System.Windows.Documents;
  4. using System.Windows.Media;
  5. using System.Windows.Media.Animation;
  6. using System.Windows.Shapes;
  7. namespace DragDropObjects
  8. {
  9. public class SimpleCircleAdorner : Adorner
  10. {
  11. private readonly Rectangle _child;
  12. private double _leftOffset;
  13. private double _topOffset;
  14. // Be sure to call the base class constructor.
  15. public SimpleCircleAdorner(UIElement adornedElement)
  16. : base(adornedElement)
  17. {
  18. var brush = new VisualBrush(adornedElement);
  19. _child = new Rectangle
  20. {
  21. Width = adornedElement.RenderSize.Width,
  22. Height = adornedElement.RenderSize.Height
  23. };
  24. var animation = new DoubleAnimation(0.3, 1, new Duration(TimeSpan.FromSeconds(1)))
  25. {
  26. AutoReverse = true,
  27. RepeatBehavior = RepeatBehavior.Forever
  28. };
  29. brush.BeginAnimation(Brush.OpacityProperty, animation);
  30. _child.Fill = brush;
  31. }
  32. protected override int VisualChildrenCount => 1;
  33. public double LeftOffset
  34. {
  35. get { return _leftOffset; }
  36. set
  37. {
  38. _leftOffset = value;
  39. UpdatePosition();
  40. }
  41. }
  42. public double TopOffset
  43. {
  44. get { return _topOffset; }
  45. set
  46. {
  47. _topOffset = value;
  48. UpdatePosition();
  49. }
  50. }
  51. // A common way to implement an adorner's rendering behavior is to override the OnRender
  52. // method, which is called by the layout subsystem as part of a rendering pass.
  53. protected override void OnRender(DrawingContext drawingContext)
  54. {
  55. // Get a rectangle that represents the desired size of the rendered element
  56. // after the rendering pass. This will be used to draw at the corners of the
  57. // adorned element.
  58. var adornedElementRect = new Rect(AdornedElement.DesiredSize);
  59. // Some arbitrary drawing implements.
  60. var renderBrush = new SolidColorBrush(Colors.Green) {Opacity = 0.2};
  61. var renderPen = new Pen(new SolidColorBrush(Colors.Navy), 1.5);
  62. const double renderRadius = 5.0;
  63. // Just draw a circle at each corner.
  64. drawingContext.DrawRectangle(renderBrush, renderPen, adornedElementRect);
  65. drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.TopLeft, renderRadius, renderRadius);
  66. drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.TopRight, renderRadius, renderRadius);
  67. drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.BottomLeft, renderRadius, renderRadius);
  68. drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.BottomRight, renderRadius,
  69. renderRadius);
  70. }
  71. protected override Size MeasureOverride(Size constraint)
  72. {
  73. _child.Measure(constraint);
  74. return _child.DesiredSize;
  75. }
  76. protected override Size ArrangeOverride(Size finalSize)
  77. {
  78. _child.Arrange(new Rect(finalSize));
  79. return finalSize;
  80. }
  81. protected override Visual GetVisualChild(int index) => _child;
  82. private void UpdatePosition()
  83. {
  84. var adornerLayer = Parent as AdornerLayer;
  85. adornerLayer?.Update(AdornedElement);
  86. }
  87. public override GeneralTransform GetDesiredTransform(GeneralTransform transform)
  88. {
  89. var result = new GeneralTransformGroup();
  90. result.Children.Add(base.GetDesiredTransform(transform));
  91. result.Children.Add(new TranslateTransform(_leftOffset, _topOffset));
  92. return result;
  93. }
  94. }
  95. }
  1. var animation = new DoubleAnimation(0.3, 1, new Duration(TimeSpan.FromSeconds(1)))
  2. {
  3. AutoReverse = true,
  4. RepeatBehavior = RepeatBehavior.Forever
  5. };
  6. brush.BeginAnimation(Brush.OpacityProperty, animation);

这里在元素内部添加了动画。

  1. // Just draw a circle at each corner.
  2. drawingContext.DrawRectangle(renderBrush, renderPen, adornedElementRect);
  3. drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.TopLeft, renderRadius, renderRadius);
  4. drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.TopRight, renderRadius, renderRadius);
  5. drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.BottomLeft, renderRadius, renderRadius);
  6. drawingContext.DrawEllipse(renderBrush, renderPen, adornedElementRect.BottomRight, renderRadius,
  7. renderRadius);

这里在元素的四个角画了小圆形。

  1. var layer = AdornerLayer.GetAdornerLayer(_originalElement);
  2. layer.Add(_overlayElement);

这段代码的作用是将之前创建的装饰器_overlayElement添加到与特定UI元素_originalElement相关联的装饰器层(AdornerLayer)中。一旦装饰器被添加到装饰器层中,它就会在_originalElement被渲染时显示出来。

AdornerLayer是一个特殊的层,用于在UI元素上绘制装饰器。每个UI元素都有一个与之关联的装饰器层,但并不是所有的UI元素都能直接看到这个层。

GetAdornerLayer方法会返回与_originalElement相关联的装饰器层。

装饰器层会负责管理装饰器的渲染和布局,确保装饰器正确地显示在UI元素上。

再来看看DragMoved方法:

  1. private void DragMoved()
  2. {
  3. var currentPosition = Mouse.GetPosition(MyCanvas);
  4. _overlayElement.LeftOffset = currentPosition.X - _startPoint.X;
  5. _overlayElement.TopOffset = currentPosition.Y - _startPoint.Y;
  6. }

计算元素的偏移。

鼠标左键松开事件处理程序

鼠标左键松开事件处理程序:

  1. private void MyCanvas_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
  2. {
  3. if (_isDown)
  4. {
  5. DragFinished();
  6. e.Handled = true;
  7. }
  8. }

DragFinished方法如下:

  1. private void DragFinished(bool cancelled = false)
  2. {
  3. Mouse.Capture(null);
  4. if (_isDragging)
  5. {
  6. AdornerLayer.GetAdornerLayer(_overlayElement.AdornedElement).Remove(_overlayElement);
  7. if (cancelled == false)
  8. {
  9. Canvas.SetTop(_originalElement, _originalTop + _overlayElement.TopOffset);
  10. Canvas.SetLeft(_originalElement, _originalLeft + _overlayElement.LeftOffset);
  11. }
  12. _overlayElement = null;
  13. }
  14. _isDragging = false;
  15. _isDown = false;
  16. }
  1. AdornerLayer.GetAdornerLayer(_overlayElement.AdornedElement).Remove(_overlayElement);

从与_overlayElement所装饰的UI元素相关联的装饰器层中移除_overlayElement,从而使得装饰器不再显示在UI元素上。这样,当UI元素被渲染时,装饰器将不再影响其外观或行为。

代码来源

[WPF-Samples/Drag and Drop/DragDropObjects at main · microsoft/WPF-Samples (github.com)](https://github.com/microsoft/WPF-Samples/tree/main/Drag and Drop/DragDropObjects)

参考

1、预览事件 - WPF .NET | Microsoft Learn

2、装饰器概述 - WPF .NET Framework | Microsoft Learn

3、Adorner 类 (System.Windows.Documents) | Microsoft Learn

原文链接:https://www.cnblogs.com/mingupupu/p/18270547

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号