拖拽功能是使用频率较高的一种交互, 用传统方法去写很简单, 但是在mvvm规则下, 也没必要弄得很麻烦
我的入门案例就选择了使用mvvm重写tutorialspoint - Interaction里的调色盘案例, view如下
MainWindow.xaml
这里的重点是控件要允许拖拽以及对应的事件
目标控件, 填充色绑定, 允许drop, drop方法
<!-- #region target-->
<RectangleAllowDrop="True"Drop="TargetRect_Drop"Fill="{Binding FillColor}"/>
<!--#endregion-->
来源控件, 因为要拖动, 所以用MouseMove
<!--#region source-->
<RectangleFill="Beige"MouseMove="SourceRect_MouseMove" />
<!--#endregion-->
MainWindow.xaml.cs
在这里, 就是写事件的主要逻辑
1️⃣ 首先, 设置一个全局变量
MainWindowViewModel MainVM;
2️⃣然后写方法
// drop方法
private void TargetRect_Drop(object sender, DragEventArgs e)
{// GetDataPresent: 检查e.Data是否可以转换为string格式来存储if (e.Data.GetDataPresent(DataFormats.StringFormat)){// GetData: 将数据转化为string格式, 注意将DataObject类型强制转为stringstring color = (string)e.Data.GetData(DataFormats.StringFormat);// 赋值MainVM.FillColor = color;//MainVM.FillColorName = (Color)ColorConverter.ConvertFromString(MainVM.FillColor);}
}
然后是MouseMove
// drag方法: 鼠标左键点击并拖动时触发, 因为要拖动,所以需要一个MouseMove事件
private void SourceRect_MouseMove(object sender, MouseEventArgs e)
{// 按下左键if (e.LeftButton == MouseButtonState.Pressed){// 指定senderRectangle source = sender as Rectangle;// 拖动方法DargDrop.DoDragDropDragDrop.DoDragDrop(source, source.Fill.ToString(), DragDropEffects.Copy);}
}
MainViewModel.cs
简简单单声明一下要用的变量
[ObservableProperty]
private string _fillColor = "AliceBlue";
关于DragDrop.DoDragDrop
应该是拖拽行为中比较重要的方法(看了好多都是用这个)
官方文档: https://learn.microsoft.com/en-us/dotnet/api/system.windows.dragdrop.dodragdrop?view=windowsdesktop-8.0
⭐省流: 意思就是这个方法需要指定来源, 传输的数据还有效果, 数据会被自动封装 (目标引用数据的话可以用e.Data.GetData啥的), 返回的就是传入的拖拽效果enum值⭐
用处: 启动一次拖拽行为
// 如果dragSource或data为null, 则报错
public static System.Windows.DragDropEffects DoDragDrop (System.Windows.DependencyObject dragSource, object data, System.Windows.DragDropEffects allowedEffects);
参数:
dragSource ➡️ 指代被拖拽的对象
data ➡️ 包含传输数据的data对象
allowedEffects ➡️ 行为中允许的拖拽效果, 来自DragDropEffects之中的某个值
返回: 拖拽行为中最终效果, 同样来自DragDropEffects
DragDrop.DoDragDrop(source, source.Fill.ToString(), DragDropEffects.Copy)
source代表被拖拽的控件/对象, 传输的是source的Fill属性, 并且会被自动封装进DataObject中
DragDropEffects - Enum
(不想写了了直接放图)
