背水一战 Windows 10 (73) - 控件（控件基类）: UIElement - 拖放的基本应用, 手动开启 UIElement 的拖放操作

[源码下载]

背水一战 Windows 10 (73) - 控件（控件基类）: UIElement - 拖放的基本应用, 手动开启 UIElement 的拖放操作

作者：webabcd

介绍
背水一战 Windows 10 之控件（控件基类 - UIElement）

拖放的基本应用
手动开启 UIElement 的拖放操作

示例
1、演示 UIElement 的 drag & drop 的基本应用
Controls/BaseControl/UIElementDemo/DragDropDemo1.xaml

<Page

    x:Class="Windows10.Controls.BaseControl.UIElementDemo.DragDropDemo1"

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

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

    xmlns:local="using:Windows10.Controls.BaseControl.UIElementDemo"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="5">

            <!--

                用于演示如何 drag 一个元素，并传递文本数据

            -->

            <Grid Name="dragGrid1" Background="Orange" Margin="5"

                  CanDrag="True"

                  DragStarting="dragGrid1_DragStarting"

                  DropCompleted="dragGrid1_DropCompleted">

                <TextBlock Name="sourceTextBlock" Text="i am webabcd" Margin="20" />

            </Grid>

            <!--

                用于演示如何 drag 一个元素，并传递图片数据

            -->

            <Grid Name="dragGrid2" Background="Orange" Margin="5"

                  CanDrag="True"

                  DragStarting="dragGrid2_DragStarting"

                  DropCompleted="dragGrid2_DropCompleted">

                <Image Name="sourceImage" Source="/Assets/hololens.jpg" Width="50" Height="50" Margin="20" />

            </Grid>

            <!--

                用于演示如何将一个可 drag 的元素 drop 到此，并获取传递过来的数据

            -->

            <Grid Name="dropGrid" Background="Blue" Margin="5"

                  AllowDrop="True"

                  Drop="dropGrid_Drop"

                  DragEnter="dropGrid_DragEnter"

                  DragOver="dropGrid_DragOver"

                  DragLeave="dropGrid_DragLeave">

                <Image Name="targetImage" Width="400" Height="300" Margin="20" />

                <TextBlock Name="targetTextBlock" TextWrapping="Wrap" MinHeight="300" Margin="20" />

            </Grid>

            <TextBlock Name="lblMsg" Margin="5" />

        </StackPanel>

    </Grid>

</Page>

Controls/BaseControl/UIElementDemo/DragDropDemo1.xaml.cs

/*

 * UIElement - UIElement（继承自 DependencyObject, 请参见 /Controls/BaseControl/DependencyObjectDemo/）

 *     CanDrag - 此 UIElement 是否可以 drag

 *     DragStarting - 可以 drag 的 UIElement 开始 drag 时触发的事件

 *     DropCompleted - 可以 drag 的 UIElement 完成 drop 后触发的事件

 *

 *     AllowDrop - 此 UIElement 是否可以 drop

 *     Drop -  可以 drop 的 UIElement 在 drop 操作发生时触发的事件

 *     DragEnter - drag 操作进入可以 drop 的 UIElement 时触发的事件

 *     DragOver - drag 操作在可以 drop 的 UIElement 上移动时触发的事件

 *     DragLeave - drag 操作离开可以 drop 的 UIElement 时触发的事件

 *

 *

 * 注：关于 ListView 和 GridView 的 Item 的 drag & drop 请参见 /Controls/CollectionControl/ListViewBaseDemo/ListViewBaseDemo2.xaml

 *

 *

 * 本例用于演示 UIElement 的 drag & drop 的基本应用

 */

using System;

using System.Collections.Generic;

using System.Linq;

using Windows.ApplicationModel.DataTransfer;

using Windows.Storage;

using Windows.Storage.Streams;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media.Imaging;

namespace Windows10.Controls.BaseControl.UIElementDemo

{

    public sealed partial class DragDropDemo1 : Page

    {

        public DragDropDemo1()

        {

            this.InitializeComponent();

        }

        // dragGrid1 开始 drag 时触发的事件

        private void dragGrid1_DragStarting(UIElement sender, DragStartingEventArgs args)

        {

            lblMsg.Text += "dragGrid1_DragStarting";

            lblMsg.Text += Environment.NewLine;

            // 通过 DataPackage 保存文本数据（关于 DataPackage 的详细说明请参见“分享”部分）

            // 一个 DataPackage 对象可以包含多种类型的数据：ApplicationLink, WebLink, Bitmap, Html, Rtf, StorageItems, Text

            args.Data.SetText(sourceTextBlock.Text);

        }

        // dragGrid1 结束 drop 时触发的事件

        private void dragGrid1_DropCompleted(UIElement sender, DropCompletedEventArgs args)

        {

            lblMsg.Text += "dragGrid1_DropCompleted";

            lblMsg.Text += Environment.NewLine;

        }

        // dragGrid2 开始 drag 时触发的事件

        private void dragGrid2_DragStarting(UIElement sender, DragStartingEventArgs args)

        {

            lblMsg.Text += "dragGrid2_DragStarting";

            lblMsg.Text += Environment.NewLine;

            RandomAccessStreamReference imageStreamRef = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/hololens.jpg", UriKind.Absolute));

            // 通过 DataPackage 保存图片数据

            args.Data.SetBitmap(imageStreamRef);

        }

        // dragGrid2 结束 drop 时触发的事件

        private void dragGrid2_DropCompleted(UIElement sender, DropCompletedEventArgs args)

        {

            lblMsg.Text += "dragGrid2_DropCompleted";

            lblMsg.Text += Environment.NewLine;

        }

        // 拖拽进入 dropGrid 时触发的事件

        private void dropGrid_DragEnter(object sender, DragEventArgs e)

        {

            lblMsg.Text += "dropGrid_DragEnter";

            lblMsg.Text += Environment.NewLine;

            // 指定拖拽操作的类型（None, Copy, Move, Link）

            e.AcceptedOperation = DataPackageOperation.None;

            // 根据 DataPackage 中的数据类型的不同做不同的处理（注：一个 DataPackage 中也可以同时包括各种不同类型的数据）

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

            {

                e.AcceptedOperation = DataPackageOperation.Copy;

                e.DragUIOverride.Caption = "我是文本"; // 跟随 drag 点显示的文本

            }

            else if (e.DataView.Contains(StandardDataFormats.Bitmap))

            {

                e.AcceptedOperation = DataPackageOperation.Copy;

                e.DragUIOverride.Caption = "我是图片";

            }

            else if (e.DataView.Contains(StandardDataFormats.StorageItems)) // 当从 app 外部拖拽一个或多个文件进来时，系统会自动为 DataPackage 赋值

            {

                e.AcceptedOperation = DataPackageOperation.Copy;

                e.DragUIOverride.Caption = "我是文件";

            }

        }

        // 在 dropGrid 内拖拽移动时触发的事件

        private void dropGrid_DragOver(object sender, DragEventArgs e)

        {

            // lblMsg.Text += "dropGrid_DragOver";

            // lblMsg.Text += Environment.NewLine;

        }

        // 拖拽离开 dropGrid 时触发的事件

        private void dropGrid_DragLeave(object sender, DragEventArgs e)

        {

            lblMsg.Text += "dropGrid_DragLeave";

            lblMsg.Text += Environment.NewLine;

        }

        // 在 dropGrid 内 drop 后触发的事件

        private async void dropGrid_Drop(object sender, DragEventArgs e)

        {

            lblMsg.Text += "dropGrid_Drop";

            lblMsg.Text += Environment.NewLine;

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

            {

                // 获取 DataPackage 中的文本数据

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

                targetTextBlock.Text += text;

                targetTextBlock.Text += Environment.NewLine;

            }

            else if (e.DataView.Contains(StandardDataFormats.Bitmap))

            {

                // 获取 DataPackage 中的图片数据

                RandomAccessStreamReference imageStreamRef = await e.DataView.GetBitmapAsync();

                IRandomAccessStream imageStream = await imageStreamRef.OpenReadAsync();

                BitmapImage bitmapImage = new BitmapImage();

                bitmapImage.SetSource(imageStream);

                targetImage.Source = bitmapImage;

            }

            else if (e.DataView.Contains(StandardDataFormats.StorageItems))

            {

                // 获取 DataPackage 中的文件数据（当从 app 外部拖拽一个或多个文件进来时，系统会自动为 DataPackage 赋值）

                IReadOnlyList<IStorageItem> items = await e.DataView.GetStorageItemsAsync();

                foreach (var storageFile in items.OfType<StorageFile>())

                {

                    if (storageFile != null)

                    {

                        targetTextBlock.Text += storageFile.Path;

                        targetTextBlock.Text += Environment.NewLine;

                    }

                }

            }

        }

    }

}

2、演示如何手动开启 UIElement 的拖放操作
Controls/BaseControl/UIElementDemo/DragDropDemo2.xaml

<Page

    x:Class="Windows10.Controls.BaseControl.UIElementDemo.DragDropDemo2"

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

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

    xmlns:local="using:Windows10.Controls.BaseControl.UIElementDemo"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="Transparent">

        <StackPanel Margin="5">

            <Grid Name="dragGrid" Background="Orange" Margin="5"

                  PointerMoved="dragGrid_PointerMoved"

                  DragStarting="dragGrid_DragStarting">

                <TextBlock Name="sourceTextBlock" Text="i am webabcd" Margin="20" />

            </Grid>

            <Grid Name="dropGrid" Background="Blue" Margin="5"

                  AllowDrop="True"

                  Drop="dropGrid_Drop"

                  DragEnter="dropGrid_DragEnter">

                <TextBlock Name="targetTextBlock" TextWrapping="Wrap" Height="120" Margin="20" />

            </Grid>

            <TextBlock Name="lblMsg" Margin="5" />

        </StackPanel>

    </Grid>

</Page>

Controls/BaseControl/UIElementDemo/DragDropDemo2.xaml.cs

/*

 * UIElement - UIElement（继承自 DependencyObject, 请参见 /Controls/BaseControl/DependencyObjectDemo/）

 *     StartDragAsync(PointerPoint pointerPoint) - 将 UIElement 拖拽到指定的 PointerPoint 位置，返回一个 DataPackageOperation 类型的枚举（None, Copy, Move, Link）

 *

 *

 * CanDrag - 由系统决定何时开启拖放操作，一般就是鼠标按下后进行拖拽

 * StartDragAsync() - 由开发者手动决定何时何地开启拖放操作

 *

 *

 * 本例用于演示如何手动开启 UIElement 的拖放操作

 */

using System;

using Windows.ApplicationModel.DataTransfer;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Input;

namespace Windows10.Controls.BaseControl.UIElementDemo

{

    public sealed partial class DragDropDemo2 : Page

    {

        public DragDropDemo2()

        {

            this.InitializeComponent();

        }

        private void dragGrid_DragStarting(UIElement sender, DragStartingEventArgs args)

        {

            args.Data.SetText(sourceTextBlock.Text);

        }

        private void dropGrid_DragEnter(object sender, DragEventArgs e)

        {

            e.AcceptedOperation = DataPackageOperation.Copy;

            e.DragUIOverride.Caption = "我是文本";

        }

        private async void dropGrid_Drop(object sender, DragEventArgs e)

        {

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

            targetTextBlock.Text += text;

            targetTextBlock.Text += Environment.NewLine;

        }

        private async void dragGrid_PointerMoved(object sender, PointerRoutedEventArgs e)

        {

            // 通过 StartDragAsync() 开启拖放操作，拖放操作的其他部分遵循相同的模式

            DataPackageOperation dpo = await dragGrid.StartDragAsync(e.GetCurrentPoint(dragGrid));

            if (dpo != DataPackageOperation.None)

            {

                targetTextBlock.Text += dpo;

                targetTextBlock.Text += Environment.NewLine;

            }

        }

    }

}

OK
[源码下载]

背水一战 Windows 10 (73) - 控件（控件基类）: UIElement - 拖放的基本应用, 手动开启 UIElement 的拖放操作

背水一战 Windows 10 (73) - 控件（控件基类）: UIElement - 拖放的基本应用, 手动开启 UIElement 的拖放操作的相关教程结束。

相关推荐

FineUIMvc v1.4.0 发布了（ASP.NET MVC控件库）！

[WPF 自定义控件]自定义控件库系列文章

WPF中PasswordBox控件的Password属性的数据绑定

WPF中Image控件的Source属性

WPF中Popup控件在Win7以及Win10等中的对齐点方式不一样的解决方案 - 简书

C#中WebBrowser控件的使用

WPF中查找控件的扩展类

WPF中Ribbon控件的使用