背水一戰 Windows 10 (73) - 控制項（控制項基類）: UIElement - 拖放的基本應用, 手動開啟 UIElement 的拖放操作

背水一戰 Windows 10 之控制項（控制項基類 - 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
[源碼下載]