原文:
背水一战 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
[源码下载]
