• 背水一战 Windows 10 (73)


    [源码下载]


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

  • 相关阅读:
    phontomjs debug with webkit inspector
    《Node Web开发》((美)David Herron)【摘要 书评 试读】 京东图书
    PhantomJS in nonheadless mode Google Groups
    Backbone.js
    Underscore.js
    Free HTTP Sniffer: a free HTTP packet sniffer to find the URLs.
    phantomjs node.js parse child process output line by line (spawn) Stack Overflow
    Getting Started · jashkenas/rubyprocessing Wiki
    使用 JSONP 实现跨域通信,第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup
    JavaScript中的正则表达式
  • 原文地址:https://www.cnblogs.com/webabcd/p/7850725.html
Copyright © 2020-2023  润新知