背水一戰 Windows 10 (74) - 控制項（控制項基類）: UIElement - 與 CanDrag 相關的事件, 與 AllowDrop 相關的事件

背水一戰 Windows 10 之控制項（控制項基類 - UIElement ）: 與 CanDrag 相關的事件（DragStartingEventArgs, DropCompletedEventArgs）, 與 AllowDrop 相關的事件（DragEventArgs） ...

[源碼下載]

作者：webabcd

介紹
背水一戰 Windows 10 之控制項（控制項基類 - UIElement ）

與 CanDrag 相關的事件（DragStartingEventArgs, DropCompletedEventArgs）
與 AllowDrop 相關的事件（DragEventArgs）

示例
1、演示 UIElement 的與 CanDrag 相關的事件（DragStartingEventArgs, DropCompletedEventArgs）
Controls/BaseControl/UIElementDemo/DragDropDemo3.xaml

<Page
    x:Class="Windows10.Controls.BaseControl.UIElementDemo.DragDropDemo3"
    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="dragGrid1" Background="Orange" Margin="5"
                  CanDrag="True"  
                  DragStarting="dragGrid1_DragStarting">
                <TextBlock Name="sourceTextBlock1" Text="i am sourceTextBlock1" Margin="20" />
            </Grid>

            <Grid Name="dragGrid2" Background="Orange" Margin="5"
                  CanDrag="True"  
                  DragStarting="dragGrid2_DragStarting">
                <TextBlock Name="sourceTextBlock2" Text="i am sourceTextBlock2" Margin="20" />
            </Grid>

            <Grid Name="dragGrid3" Background="Orange" Margin="5"
                  CanDrag="True"  
                  DragStarting="dragGrid3_DragStarting">
                <TextBlock Name="sourceTextBlock3" Text="i am sourceTextBlock3" Margin="20" />
            </Grid>

            <Grid Name="dragGrid4" Background="Orange" Margin="5"
                  CanDrag="True"  
                  DragStarting="dragGrid4_DragStarting">
                <TextBlock Name="sourceTextBlock4" Text="i am sourceTextBlock4" Margin="20" />
            </Grid>

            <Grid Name="dropGrid" Background="Blue" Margin="5"
                  AllowDrop="True"
                  Drop="dropGrid_Drop"
                  DragEnter="dropGrid_DragEnter">
                <TextBlock Name="targetTextBlock" TextWrapping="Wrap" MinHeight="300" Margin="20" />
            </Grid>

        </StackPanel>
    </Grid>
</Page>

Controls/BaseControl/UIElementDemo/DragDropDemo3.xaml.cs

/*
 * UIElement - UIElement（繼承自 DependencyObject, 請參見 /Controls/BaseControl/DependencyObjectDemo/）
 *     
 * 
 * DragStartingEventArgs - DragStarting 的事件參數（CanDrag 的 UIElement 觸發的事件）
 *     Cancel - 是否取消 drag 操作
 *     Data - 獲取一個 DataPackage 類型的對象，用於保存數據（詳見“分享”部分）
 *     DragUI - 獲取一個 DragUI 類型的對象，用於設置 drag 過程中的 ui
 *     GetDeferral() - 獲取類型為 DragOperationDeferral 的非同步操作對象，同時開始非同步操作，之後通過 DragOperationDeferral 的 Complete() 通知完成非同步操作
 *     GetPosition(UIElement relativeTo) - 獲取當前 drag 的點與指定 UIELement 的相對位置（傳 null 則返回相對於 app 原點的位置）
 *     
 * DragUI - 用於設置 drag 過程中的 ui
 *     SetContentFromDataPackage() - 由系統根據 DataPackage 中保存的數據的類型來決定 ui
 *     SetContentFromBitmapImage() - 指定一個 BitmapImage 對象作為 ui，同時可以指定此 ui 相對於 drag 點的位置
 *     SetContentFromSoftwareBitmap() - 指定一個 SoftwareBitmap 對象作為 ui，同時可以指定此 ui 相對於 drag 點的位置
 * 
 * DropCompletedEventArgs - DropCompleted 的事件參數（CanDrag 的 UIElement 觸發的事件）
 *     DropResult - 獲取 drop 的結果，一個 DataPackageOperation 類型的枚舉（None, Copy, Move, Link）
 *     
 *     
 * 本例用於演示 UIElement 的與 CanDrag 相關的事件（DragStartingEventArgs, DropCompletedEventArgs）
 */

using System;
using Windows.ApplicationModel.DataTransfer;
using Windows.Graphics.Imaging;
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 DragDropDemo3 : Page
    {
        public DragDropDemo3()
        {
            this.InitializeComponent();
        }

        private void dragGrid1_DragStarting(UIElement sender, DragStartingEventArgs args)
        {
            args.Data.SetText(sourceTextBlock1.Text);
        }

        private void dragGrid2_DragStarting(UIElement sender, DragStartingEventArgs args)
        {
            args.Data.SetText(sourceTextBlock2.Text);

            // 由系統根據 DataPackage 中保存的數據的類型來決定 drag 過程中的 ui
            args.DragUI.SetContentFromDataPackage();
        }

        private void dragGrid3_DragStarting(UIElement sender, DragStartingEventArgs args)
        {
            args.Data.SetText(sourceTextBlock3.Text);

            // drag 過程中的 ui 為指定的 BitmapImage
            args.DragUI.SetContentFromBitmapImage(new BitmapImage(new Uri("ms-appx:///Assets/hololens.jpg", UriKind.Absolute)));
        }

        private async void dragGrid4_DragStarting(UIElement sender, DragStartingEventArgs args)
        {
            args.Data.SetText(sourceTextBlock4.Text);

            // 獲取非同步操作對象
            DragOperationDeferral deferral = args.GetDeferral();

            // 將 dragGrid4 截圖，並以此創建一個 SoftwareBitmap 對象
            RenderTargetBitmap rtb = new RenderTargetBitmap();
            await rtb.RenderAsync(dragGrid4);
            IBuffer buffer = await rtb.GetPixelsAsync();
            SoftwareBitmap bitmap = SoftwareBitmap.CreateCopyFromBuffer(buffer, BitmapPixelFormat.Bgra8, rtb.PixelWidth, rtb.PixelHeight, BitmapAlphaMode.Premultiplied);

            // drag 過程中的 ui 為指定的 SoftwareBitmap
            args.DragUI.SetContentFromSoftwareBitmap(bitmap);

            // 完成非同步操作
            deferral.Complete();
        }

        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;
        }
    }
}

2、演示 UIElement 的與 AllowDrop 相關的事件（DragEventArgs）
Controls/BaseControl/UIElementDemo/DragDropDemo4.xaml

<Page
    x:Class="Windows10.Controls.BaseControl.UIElementDemo.DragDropDemo4"
    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"
                  CanDrag="True"  
                  DragStarting="dragGrid_DragStarting">
                <TextBlock Name="sourceTextBlock" Text="i am webabcd" Margin="20" />
            </Grid>

            <Grid Name="dropGrid1" Background="Blue" Margin="5"
                  AllowDrop="True"
                  Drop="dropGrid1_Drop"
                  DragEnter="dropGrid1_DragEnter">
                <TextBlock Name="targetTextBlock1" TextWrapping="Wrap" Height="80" Margin="20" />
            </Grid>

            <Grid Name="dropGrid2" Background="Blue" Margin="5"
                  AllowDrop="True"
                  Drop="dropGrid2_Drop"
                  DragEnter="dropGrid2_DragEnter">
                <TextBlock Name="targetTextBlock2" TextWrapping="Wrap" Height="80" Margin="20" />
            </Grid>

            <Grid Name="dropGrid3" Background="Blue" Margin="5"
                  AllowDrop="True"
                  Drop="dropGrid3_Drop"
                  DragEnter="dropGrid3_DragEnter">
                <TextBlock Name="targetTextBlock3" TextWrapping="Wrap" Height="80" Margin="20" />
            </Grid>

            <Grid Name="dropGrid4" Background="Blue" Margin="5"
                  AllowDrop="True"
                  Drop="dropGrid4_Drop"
                  DragEnter="dropGrid4_DragEnter">
                <TextBlock Name="targetTextBlock4" TextWrapping="Wrap" Height="80" Margin="20" />
            </Grid>

        </StackPanel>
    </Grid>
</Page>

Controls/BaseControl/UIElementDemo/DragDropDemo4.xaml.cs

/*
 * UIElement - UIElement（繼承自 DependencyObject, 請參見 /Controls/BaseControl/DependencyObjectDemo/）
 *     
 * 
 * DragEventArgs - Drop, DragEnter, DragOver, DragLeave 的事件參數（AllowDrop 的 UIElement 觸發的事件）
 *     AcceptedOperation - 一個 DataPackageOperation 類型的枚舉，用於指定操作的類型
 *         None - 無操作
 *         Copy - 複製操作
 *         Move - 移動操作
 *         Link - 鏈接操作
 *     DataView - 獲取一個 DataPackageView 類型的對象，用於獲取 DataPackage 中保存的數據（詳見“分享”部分）
 *     DragUIOverride - 獲取一個 DragUIOverride 類型的對象，用於設置 drag 過程中的 ui（在 drop 區域內）。如果此時和 drag 過程中的 DragUI 有衝突的話，則以此 DragUIOverride 為準
 *     Handled - 是否標記為已處理
 *     Modifiers - 獲取一個 DragDropModifiers 類型的枚舉（FlagsAttribute），用於獲取當前的按鍵狀態
 *         None, Shift, Control, Alt, LeftButton, MiddleButton, RightButton
 *     GetDeferral() - 獲取類型為 DragOperationDeferral 的非同步操作對象，同時開始非同步操作，之後通過 DragOperationDeferral 的 Complete() 通知完成非同步操作
 *     GetPosition(UIElement relativeTo) - 獲取當前 drag 的點與指定 UIELement 的相對位置（傳 null 則返回相對於 app 原點的位置）
 *      
 * DragUIOverride - 用於設置 drag 過程中的 ui（在 drop 區域內）。它包括 3 個部分，分別是 Caption, Glyph, Content
 *     Caption - 標題
 *     IsCaptionVisible - 是否顯示標題
 *     IsGlyphVisible - 是否顯示標題的左邊的那個圖標（這個圖標會根據你的 DataPackageOperation 的不同而不同）
 *     IsContentVisible - 是否顯示內容（就是除了 Caption 和 Glyph 之外的內容）
 *     Clear() - 清除 drag 過程中的 ui（但是實際測試發現並不能清除，如果需要的話還是分別設置 IsCaptionVisible, IsGlyphVisible, IsContentVisible 吧）
 *     SetContentFromBitmapImage() - 指定一個 BitmapImage 對象作為 ui，同時可以指定此 ui 相對於 drag 點的位置
 *     SetContentFromSoftwareBitmap() - 指定一個 SoftwareBitmap 對象作為 ui，同時可以指定此 ui 相對於 drag 點的位置
 *     
 *      
 * 本例用於演示 UIElement 的與 AllowDrop 相關的事件（DragEventArgs）
 */

using System;
using Windows.ApplicationModel.DataTransfer;
using Windows.Graphics.Imaging;
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 DragDropDemo4 : Page
    {
        public DragDropDemo4()
        {
            this.InitializeComponent();
        }

        private void dragGrid_DragStarting(UIElement sender, DragStartingEventArgs args)
        {
            args.Data.SetText(sourceTextBlock.Text);
        }

        private void dropGrid1_DragEnter(object sender, DragEventArgs e)
        {
            e.AcceptedOperation = DataPackageOperation.Copy;
            e.DragUIOverride.Caption = "我是文本";

            targetTextBlock1.Text += e.Modifiers;
            targetTextBlock1.Text += Environment.NewLine;
        }

        private void dropGrid2_DragEnter(object sender, DragEventArgs e)
        {
            e.AcceptedOperation = DataPackageOperation.Copy;
            e.DragUIOverride.Caption = "我是文本";

            // DragUIOverride 包含 3 個部分，分別是 Caption, Glyph, Content
            e.DragUIOverride.IsCaptionVisible = false;
            e.DragUIOverride.IsGlyphVisible = false;
            e.DragUIOverride.IsContentVisible = false;

            targetTextBlock2.Text += e.Modifiers;
            targetTextBlock2.Text += Environment.NewLine;
        }

        private void dropGrid3_DragEnter(object sender, DragEventArgs e)
        {
            e.AcceptedOperation = DataPackageOperation.Copy;
            e.DragUIOverride.Caption = "我是文本";

            // drag 到 drop 區域後，drag 過程中的 ui 改為指定的 BitmapImage
            e.DragUIOverride.SetContentFromBitmapImage(new BitmapImage(new Uri("ms-appx:///Assets/hololens.jpg", UriKind.Absolute)));

            targetTextBlock3.Text += e.Modifiers;
            targetTextBlock3.Text += Environment.NewLine;
        }

        private async void dropGrid4_DragEnter(object sender, DragEventArgs e)
        {
            e.AcceptedOperation = DataPackageOperation.Copy;
            e.DragUIOverride.Caption = "我是文本";

            // 獲取非同步操作對象
            DragOperationDeferral deferral = e.GetDeferral();
            RenderTargetBitmap rtb = new RenderTargetBitmap();
            await rtb.RenderAsync(dragGrid);
            IBuffer buffer = await rtb.GetPixelsAsync();
            SoftwareBitmap bitmap = SoftwareBitmap.CreateCopyFromBuffer(buffer, BitmapPixelFormat.Bgra8, rtb.PixelWidth, rtb.PixelHeight, BitmapAlphaMode.Premultiplied);

            // drag 到 drop 區域後，drag 過程中的 ui 改為指定的 SoftwareBitmap
            e.DragUIOverride.SetContentFromSoftwareBitmap(bitmap);

            // 完成非同步操作
            deferral.Complete();

            targetTextBlock4.Text += e.Modifiers;
            targetTextBlock4.Text += Environment.NewLine;
        }

        private async void dropGrid1_Drop(object sender, DragEventArgs e)
        {
            string text = await e.DataView.GetTextAsync();
            targetTextBlock1.Text += text;
            targetTextBlock1.Text += Environment.NewLine;
        }

        private async void dropGrid2_Drop(object sender, DragEventArgs e)
        {
            string text = await e.DataView.GetTextAsync();
            targetTextBlock2.Text += text;
            targetTextBlock2.Text += Environment.NewLine;
        }

        private async void dropGrid3_Drop(object sender, DragEventArgs e)
        {
            string text = await e.DataView.GetTextAsync();
            targetTextBlock3.Text += text;
            targetTextBlock3.Text += Environment.NewLine;
        }

        private async void dropGrid4_Drop(object sender, DragEventArgs e)
        {
            string text = await e.DataView.GetTextAsync();
            targetTextBlock4.Text += text;
            targetTextBlock4.Text += Environment.NewLine;
        }
    }
}

OK
[源碼下載]