[C#/WINUI3/.NET8] TreeView 클래스 : DragItemsStarting/DragItemsCompleted/DragOver/Drop 이벤트를 사용해 트리뷰 간 노드 DRAG/DROP 처리하기

■ TreeView 클래스의 DragItemsStarting/DragItemsCompleted/DragOver/Drop 이벤트를 사용해 트리뷰 간 노드 DRAG/DROP을 처리하는 방법을 보여준다.

※ 테스트 예제이기 때문에 자식 노드를 갖고 있는 노드를 트리뷰 간 DRAG & DROP하면 자식 노드들은 사라진다.
※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"  />
            <ColumnDefinition Width="10" />
            <ColumnDefinition Width="*"  />
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0"
            BorderThickness="1"
            BorderBrush="DarkGray">
            <TreeView Name="treeView1"
                AllowDrop="True"
                CanDragItems="True"
                CanReorderItems="True" />
        </Border>
        <Border Grid.Column="2"
            BorderThickness="1"
            BorderBrush="DarkGray">
            <TreeView Name="treeView2"
                AllowDrop="True"
                CanDragItems="True"
                CanReorderItems="True" />
        </Border>
    </Grid>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Border Grid.Column="0"

BorderThickness="1"

BorderBrush="DarkGray">

<TreeView Name="treeView1"

AllowDrop="True"

CanDragItems="True"

CanReorderItems="True" />

</Border>

<Border Grid.Column="2"

BorderThickness="1"

BorderBrush="DarkGray">

<TreeView Name="treeView2"

AllowDrop="True"

CanDragItems="True"

CanReorderItems="True" />

</Border>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using System.Collections.Generic;

using Windows.ApplicationModel.DataTransfer;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public sealed partial class MainPage : Page
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Field
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region Field

    /// <summary>
    /// 소스 트리뷰
    /// </summary>
    private TreeView sourceTreeView;

    /// <summary>
    /// 삭제 트리뷰 노드
    /// </summary>
    private TreeViewNode deletedTreeViewNode;

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public MainPage()
    {
        InitializeComponent();

        this.treeView1.DragItemsStarting  += TreeView_DragItemsStarting;
        this.treeView1.DragItemsCompleted += TreeView_DragItemsCompleted;
        this.treeView1.DragOver           += TreeView_DragOver;
        this.treeView1.Drop               += TreeView_Drop;

        this.treeView2.DragItemsStarting  += TreeView_DragItemsStarting;
        this.treeView2.DragItemsCompleted += TreeView_DragItemsCompleted;
        this.treeView2.DragOver           += TreeView_DragOver;
        this.treeView2.Drop               += TreeView_Drop;

        InitializeTreeView();
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private
    //////////////////////////////////////////////////////////////////////////////// Event

    #region 트리뷰 항목 드래그 시작시 처리하기 - TreeView_DragItemsStarting(sender, e)

    /// <summary>
    /// 트리뷰 항목 드래그 시작시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void TreeView_DragItemsStarting(TreeView sender, TreeViewDragItemsStartingEventArgs e)
    {
        if(e.Items.Count == 1)
        {
            e.Data.RequestedOperation = DataPackageOperation.Move;

            this.sourceTreeView = sender;

            foreach(object item in e.Items)
            {
                TreeViewNode treeViewNode = item as TreeViewNode;

                e.Data.SetText(treeViewNode.Content.ToString());
            }
        }
    }

    #endregion
    #region 트리뷰 항목 드래그 완료시 처리하기 - TreeView_DragItemsCompleted(sender, e)

    /// <summary>
    /// 트리뷰 항목 드래그 완료시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void TreeView_DragItemsCompleted(TreeView sender, TreeViewDragItemsCompletedEventArgs e)
    {
        IList<TreeViewNode> childTreeViewNodeList = this.sourceTreeView.RootNodes[0].Children;

        if(this.deletedTreeViewNode != null)
        {
            for(int i = 0; i < childTreeViewNodeList.Count; i++)
            {
                if(childTreeViewNodeList[i].Content.ToString() == this.deletedTreeViewNode.Content.ToString())
                {
                    childTreeViewNodeList.RemoveAt(i);

                    break;
                }
            }
        }

        this.sourceTreeView      = null;
        this.deletedTreeViewNode = null;
    }

    #endregion
    #region 트리뷰 DRAG OVER 처리하기 - TreeView_DragOver(sender, e)

    /// <summary>
    /// 트리뷰 DRAG OVER 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void TreeView_DragOver(object sender, DragEventArgs e)
    {
        if(e.DataView.Contains(StandardDataFormats.Text))
        {
            e.AcceptedOperation = DataPackageOperation.Move;
        }
    }

    #endregion
    #region 트리뷰 DROP 처리하기 - TreeView_Drop(sender, e)

    /// <summary>
    /// 트리뷰 DROP 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void TreeView_Drop(object sender, DragEventArgs e)
    {
        if(e.DataView.Contains(StandardDataFormats.Text))
        {
            string text = await e.DataView.GetTextAsync();

            TreeView targetTreeView = sender as TreeView;

            if(targetTreeView.RootNodes != null)
            {
                TreeViewNode newTreeViewNode = new TreeViewNode() { Content = text };

                targetTreeView.RootNodes[0].Children.Add(newTreeViewNode);

                this.deletedTreeViewNode = newTreeViewNode;
            }
        }
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////// Function

    #region 트리뷰 초기화하기 - InitializeTreeView()

    /// <summary>
    /// 트리뷰 초기화하기
    /// </summary>
    private void InitializeTreeView()
    {
        TreeViewNode parentNode1 = new TreeViewNode() { Content = "노드 1" };

        parentNode1.IsExpanded = true;

        parentNode1.Children.Add(new TreeViewNode() { Content = "노드 1-1" });
        parentNode1.Children.Add(new TreeViewNode() { Content = "노드 1-2" });
        parentNode1.Children.Add(new TreeViewNode() { Content = "노드 1-3" });
        parentNode1.Children.Add(new TreeViewNode() { Content = "노드 1-4" });

        this.treeView1.RootNodes.Add(parentNode1);

        TreeViewNode parentNode2 = new TreeViewNode() { Content = "노드 2" };

        parentNode2.IsExpanded = true;

        parentNode2.Children.Add(new TreeViewNode() { Content = "노드 2-1" });
        parentNode2.Children.Add(new TreeViewNode() { Content = "노드 2-2" });

        this.treeView2.RootNodes.Add(parentNode2);
    }

    #endregion
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

using System;

using System.Collections.Generic;

using Windows.ApplicationModel.DataTransfer;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 소스 트리뷰

/// </summary>

private TreeView sourceTreeView;

/// <summary>

/// 삭제 트리뷰 노드

/// </summary>

private TreeViewNode deletedTreeViewNode;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.treeView1.DragItemsStarting += TreeView_DragItemsStarting;

this.treeView1.DragItemsCompleted += TreeView_DragItemsCompleted;

this.treeView1.DragOver += TreeView_DragOver;

this.treeView1.Drop += TreeView_Drop;

this.treeView2.DragItemsStarting += TreeView_DragItemsStarting;

this.treeView2.DragItemsCompleted += TreeView_DragItemsCompleted;

this.treeView2.DragOver += TreeView_DragOver;

this.treeView2.Drop += TreeView_Drop;

InitializeTreeView();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

//////////////////////////////////////////////////////////////////////////////// Event

#region 트리뷰 항목 드래그 시작시 처리하기 - TreeView_DragItemsStarting(sender, e)

/// <summary>

/// 트리뷰 항목 드래그 시작시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void TreeView_DragItemsStarting(TreeView sender, TreeViewDragItemsStartingEventArgs e)

{

if(e.Items.Count == 1)

{

e.Data.RequestedOperation = DataPackageOperation.Move;

this.sourceTreeView = sender;

foreach(object item in e.Items)

{

TreeViewNode treeViewNode = item as TreeViewNode;

e.Data.SetText(treeViewNode.Content.ToString());

}

#endregion

#region 트리뷰 항목 드래그 완료시 처리하기 - TreeView_DragItemsCompleted(sender, e)

/// <summary>

/// 트리뷰 항목 드래그 완료시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void TreeView_DragItemsCompleted(TreeView sender, TreeViewDragItemsCompletedEventArgs e)

{

IList<TreeViewNode> childTreeViewNodeList = this.sourceTreeView.RootNodes[0].Children;

if(this.deletedTreeViewNode != null)

{

for(int i = 0; i < childTreeViewNodeList.Count; i++)

{

if(childTreeViewNodeList[i].Content.ToString() == this.deletedTreeViewNode.Content.ToString())

{

childTreeViewNodeList.RemoveAt(i);

break;

}

this.sourceTreeView = null;

this.deletedTreeViewNode = null;

}

#endregion

#region 트리뷰 DRAG OVER 처리하기 - TreeView_DragOver(sender, e)

/// <summary>

/// 트리뷰 DRAG OVER 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void TreeView_DragOver(object sender, DragEventArgs e)

{

if(e.DataView.Contains(StandardDataFormats.Text))

{

e.AcceptedOperation = DataPackageOperation.Move;

}

#endregion

#region 트리뷰 DROP 처리하기 - TreeView_Drop(sender, e)

/// <summary>

/// 트리뷰 DROP 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private async void TreeView_Drop(object sender, DragEventArgs e)

{

if(e.DataView.Contains(StandardDataFormats.Text))

{

string text = await e.DataView.GetTextAsync();

TreeView targetTreeView = sender as TreeView;

if(targetTreeView.RootNodes != null)

{

TreeViewNode newTreeViewNode = new TreeViewNode() { Content = text };

targetTreeView.RootNodes[0].Children.Add(newTreeViewNode);

this.deletedTreeViewNode = newTreeViewNode;

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 트리뷰 초기화하기 - InitializeTreeView()

/// <summary>

/// 트리뷰 초기화하기

/// </summary>

private void InitializeTreeView()

{

TreeViewNode parentNode1 = new TreeViewNode() { Content = "노드 1" };

parentNode1.IsExpanded = true;

parentNode1.Children.Add(new TreeViewNode() { Content = "노드 1-1" });

parentNode1.Children.Add(new TreeViewNode() { Content = "노드 1-2" });

parentNode1.Children.Add(new TreeViewNode() { Content = "노드 1-3" });

parentNode1.Children.Add(new TreeViewNode() { Content = "노드 1-4" });

this.treeView1.RootNodes.Add(parentNode1);

TreeViewNode parentNode2 = new TreeViewNode() { Content = "노드 2" };

parentNode2.IsExpanded = true;

parentNode2.Children.Add(new TreeViewNode() { Content = "노드 2-1" });

parentNode2.Children.Add(new TreeViewNode() { Content = "노드 2-2" });

this.treeView2.RootNodes.Add(parentNode2);

}

#endregion

}

TestProject.zip