WPF树控件实现节点拖动功能

最新推荐文章于 2024-05-20 15:25:36 发布

深圳视觉软件JJ

最新推荐文章于 2024-05-20 15:25:36 发布

阅读量1.3k

点赞数 2

分类专栏： C#

本文链接：https://blog.csdn.net/u014090257/article/details/110262795

版权

C# 专栏收录该内容

152 篇文章 9 订阅

订阅专栏

引：https://blog.csdn.net/run_guo/article/details/100170423

需求：

作为一名程序员，相信大家都已经接触过大名鼎鼎的原型设计工具Axure，没用过的一定要去了解一下，本文要使用WPF实现树控件节点拖动功能。

实现：

原理：树节点由图片和文本构成，当拖动节点移动到目标节点的图片上时认为是拖动到目标节点的同级目录；当拖动节点到目标节点的文本上时认为是拖动到目标节点的子目录。使用EventSetter和事件实现标识是拖动到目标节点同级目录，还是拖动到目标节点子目录功能；DataTrigger实现拖动到图片上和文本上的节点显示效果。

前台代码：

<Window x:Class="DragTree.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:DragTree"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<HierarchicalDataTemplate x:Key="TreeViewDropItemTemplate" ItemsSource="{Binding Childern}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Image x:Name="img" Grid.Column="0" Margin="2,0" Source="{Binding BI}">
<Image.Style>
<Style>
<EventSetter Event="Image.MouseEnter" Handler="Image_MouseEnter"/>
<EventSetter Event="Image.MouseLeave" Handler="Image_MouseLeave"/>
</Style>
</Image.Style>
</Image>
<TextBlock x:Name="tb" Grid.Column="1" Text="{Binding Name}">
<TextBlock.Style>
<Style>
<EventSetter Event="TextBlock.MouseEnter" Handler="TextBlock_MouseEnter"/>
<EventSetter Event="TextBlock.MouseLeave" Handler="TextBlock_MouseLeave"/>
</Style>
</TextBlock.Style>
</TextBlock>
<Grid x:Name="r1" Grid.Row="1" Grid.ColumnSpan="2" Height="4" Visibility="Collapsed">
<Ellipse Fill="Blue" StrokeThickness="0" Width="4" Height="4" HorizontalAlignment="Left"/>
<Rectangle Fill="Blue" StrokeThickness="0" Height="1" VerticalAlignment="Center"/>
</Grid>
<Grid x:Name="r2" Grid.Row="1" Grid.Column="1" Height="4" Visibility="Collapsed">
<Ellipse Fill="Blue" StrokeThickness="0" Width="4" Height="4" HorizontalAlignment="Left"/>
<Rectangle Fill="Blue" StrokeThickness="0" Height="1" VerticalAlignment="Center"/>
</Grid>
</Grid>
<HierarchicalDataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsAdd}" Value="true" >
<Setter TargetName="r1" Property="Visibility" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsAddIn}" Value="true" >
<Setter TargetName="r2" Property="Visibility" Value="Visible"/>
</DataTrigger>
</HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>
</Window.Resources>
<Grid Margin="50">
<TreeView x:Name="treeView" ItemTemplate="{DynamicResource TreeViewDropItemTemplate}" PreviewMouseDown="tvRequire_PreviewMouseDown"
MouseMove="tvRequire_MouseMove" MouseUp="tvRequire_MouseUp"
MouseLeave="tvRequire_MouseLeave"/>
</Grid>
</Window>

后台代码：

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media.Imaging;
namespace DragTree
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
#region
private bool IsDrop = false;
private ObservableCollection<TreeItem> list = new ObservableCollection<TreeItem>();
#endregion
public MainWindow()
{
InitializeComponent();
InitTree();
}
#region
/// <summary>
/// 树控件数据初始化
/// </summary>
public void InitTree()
{
var folder = GetBitmapImage("folder.png");
var file = GetBitmapImage("file.png");
// 根节点
var root = new TreeItem()
{
Name = "root",
Childern = list
};
var ti = new TreeItem()
{
BI = folder,
Name = "文件夹1",
Parent = root,
Childern = new ObservableCollection<TreeItem>()
};
var tmp11 = new TreeItem()
{
BI = folder,
Name = "文件夹11",
Parent = ti,
Childern = new ObservableCollection<TreeItem>()
};
var tmp111 = new TreeItem()
{
BI = file,
Name = "文件111",
Parent = tmp11,
Childern = new ObservableCollection<TreeItem>()
};
tmp11.Childern.Add(tmp111);
var tmp112 = new TreeItem()
{
BI = file,
Name = "文件112",
Parent = tmp11,
Childern = new ObservableCollection<TreeItem>()
};
tmp11.Childern.Add(tmp112);
var tmp113 = new TreeItem()
{
BI = file,
Name = "文件113",
Parent = tmp11,
Childern = new ObservableCollection<TreeItem>()
};
tmp11.Childern.Add(tmp113);
ti.Childern.Add(tmp11);
var tmp12 = new TreeItem()
{
BI = folder,
Name = "文件夹12",
Parent = ti,
Childern = new ObservableCollection<TreeItem>()
};
ti.Childern.Add(tmp12);
var tmp13 = new TreeItem()
{
BI = folder,
Name = "文件夹13",
Parent = ti,
Childern = new ObservableCollection<TreeItem>()
};
ti.Childern.Add(tmp13);
list.Add(ti);
this.treeView.ItemsSource = list;
}
private Point _lastMouseDown;
private void tvRequire_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
if (e.ChangedButton == MouseButton.Left)
{
var ele = e.OriginalSource as FrameworkElement;
if (ele != null)
{
_lastMouseDown = e.GetPosition(treeView);
moveTreeItem = (TreeItem)ele.DataContext;
}
}
}
private TreeItem moveTreeItem;
private void tvRequire_MouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
Point currentPosition = e.GetPosition(treeView);
if ((Math.Abs(currentPosition.X - _lastMouseDown.X) > 2.0) || (Math.Abs(currentPosition.Y - _lastMouseDown.Y) > 2.0))
{
if (!IsDrop)
{
if (moveTreeItem != null)
{
IsDrop = true;
this.treeView.Cursor = Cursors.Hand;
}
}
}
}
}
private void tvRequire_MouseUp(object sender, MouseEventArgs e)
{
if (moveTreeItem == null)
{
return;
}
var ele = e.OriginalSource as FrameworkElement;
if (ele != null)
{
var targetTreeItem = (TreeItem)ele.DataContext;
if (targetTreeItem == null)
{
ClearTreeDrop();
return;
}
if (targetTreeItem.Name != moveTreeItem.Name)
{
if (targetTreeItem.IsAddIn)
{
#region 移动到目标子集
var tmp = targetTreeItem.Childern.SingleOrDefault(l => l.Name == moveTreeItem.Name);
if (tmp == null)
{
moveTreeItem.Parent.Childern.Remove(moveTreeItem);
moveTreeItem.Parent = targetTreeItem;
AddIn(targetTreeItem, moveTreeItem);
}
targetTreeItem.IsAddIn = false;
#endregion
}
else if (targetTreeItem.IsAdd)
{
#region 移动到目标同级
moveTreeItem.Parent.Childern.Remove(moveTreeItem);
Add(targetTreeItem.Parent, targetTreeItem, moveTreeItem);
targetTreeItem.IsAdd = false;
#endregion
}
}
}
ClearTreeDrop();
}
private void AddIn(TreeItem argTarget, TreeItem argMove)
{
if (argTarget != null)
{
var sortList = new List<TreeItem>();
sortList.Add(argMove);
foreach (var item in argTarget.Childern)
{
sortList.Add(item);
}
argTarget.Childern.Clear();
foreach (var item in sortList)
{
argTarget.Childern.Add(item);
}
}
}
private void Add(TreeItem argParent, TreeItem argTarget, TreeItem argMove)
{
if (argParent != null)
{
var sortList = new List<TreeItem>();
foreach (var item in argParent.Childern)
{
sortList.Add(item);
if (item.Name == argTarget.Name)
{
argMove.Parent = item.Parent;
sortList.Add(argMove);
}
}
argParent.Childern.Clear();
foreach (var item in sortList)
{
argParent.Childern.Add(item);
}
}
}
private void tvRequire_MouseLeave(object sender, MouseEventArgs e)
{
ClearTreeDrop();
}
private void ClearTreeDrop()
{
moveTreeItem = null;
IsDrop = false;
this.treeView.Cursor = Cursors.Arrow;
}
public BitmapImage GetBitmapImage(string argName, string argCatalog = null)
{
try
{
string path = string.Empty;
if (string.IsNullOrEmpty(argCatalog))
{
path = @"pack://application:,,,/Image/" + argName;
}
else
{
path = @"pack://application:,,,/Image/" + argCatalog + "/" + argName;
}
var bi = new BitmapImage();
bi.BeginInit();
// 创建 BitmapImage 后关闭流，请将 CacheOption 属性设置为 BitmapCacheOption.OnLoad。
// 默认 OnDemand 缓存选项保留对流的访问，直至需要位图并且垃圾回收器执行清理为止。
bi.CacheOption = BitmapCacheOption.OnLoad;
bi.UriSource = new Uri(path);
bi.EndInit();
bi.Freeze();
return bi;
}
catch (Exception ex)
{
return null;
}
}
private void Image_MouseEnter(object sender, MouseEventArgs e)
{
var ele = e.OriginalSource as Image;
if (ele != null)
{
Console.WriteLine("Image_MouseEnter");
var ti = (TreeItem)ele.DataContext;
if (ti != null)
{
if (IsDrop)
{
ti.IsAdd = true;
}
}
}
}
private void Image_MouseLeave(object sender, MouseEventArgs e)
{
var ele = e.OriginalSource as Image;
if (ele != null)
{
Console.WriteLine("Image_MouseLeave");
var ti = ele.DataContext as TreeItem;
if (ti != null)
{
ti.IsAdd = false;
}
}
}
private void TextBlock_MouseEnter(object sender, MouseEventArgs e)
{
var ele = e.OriginalSource as TextBlock;
if (ele != null)
{
Console.WriteLine("TextBlock_MouseEnter");
var ti = (TreeItem)ele.DataContext;
if (ti != null)
{
if (IsDrop)
{
ti.IsAddIn = true;
}
}
}
}
private void TextBlock_MouseLeave(object sender, MouseEventArgs e)
{
var ele = e.OriginalSource as TextBlock;
if (ele != null)
{
Console.WriteLine("TextBlock_MouseLeave");
var ti = (TreeItem)ele.DataContext;
if (ti != null)
{
ti.IsAddIn = false;
}
}
}
#endregion
#region
public class TreeItem : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// 节点显示的图片
/// </summary>
public BitmapImage BI { get; set; }
/// <summary>
/// 节点显示的文本
/// </summary>
public string Name { get; set; }
/// <summary>
/// 节点类型
/// </summary>
public string Type { get; set; }
/// <summary>
/// 父节点
/// </summary>
public TreeItem Parent { get; set; }
/// <summary>
/// 子节点集合
/// </summary>
public ObservableCollection<TreeItem> Childern { get; set; }
private bool m_isAdd = false;
/// <summary>
/// 拖动到目标节点时增加到同级目录标志
/// </summary>
public bool IsAdd
{
get { return m_isAdd; }
set
{
if (m_isAdd != value)
{
m_isAdd = value;
if (m_isAdd)
{
IsAddIn = false;
}
if (PropertyChanged != null)
{
PropertyChanged.Invoke(this, new PropertyChangedEventArgs("IsAdd"));
}
}
}
}
private bool m_isAddin = false;
/// <summary>
/// 拖动到目标节点时增加到子目录标志
/// </summary>
public bool IsAddIn
{
get { return m_isAddin; }
set
{
if (m_isAddin != value)
{
m_isAddin = value;
if (m_isAddin)
{
m_isAdd = false;
}
//触发事件
if (PropertyChanged != null)
{
PropertyChanged.Invoke(this, new PropertyChangedEventArgs("IsAddIn"));
}
}
}
}
}
#endregion
}
}

效果：

深圳视觉软件JJ

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
WPF树控件实现节点拖动功能

引：https://blog.csdn.net/run_guo/article/details/100170423需求：作为一名程序员，相信大家都已经接触过大名鼎鼎的原型设计工具Axure，没用过的一定要去了解一下，本文要使用WPF实现树控件节点拖动功能。实现拖动到目标节点的子目录中实现拖动到目标节点的同级目录中实现：原理：树节点由图片和文本构成，当拖动节点移动到目标节点的图片上时认为是拖动到目标节点的同级目录；当拖动节点到目标节点的文本上时认...
复制链接

扫一扫