[UWP] Drag n Drop。在拖动所选对象的同时，将正在拖动的图像释放/拖放到“画布”上。

本文介绍了[UWP] Drag n Drop。在拖动所选对象的同时，将正在拖动的图像释放/拖放到“画布”上。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在"画布"上简单拖放对象似乎无法正常工作。

拖动操作正确启动，但在拖动图像时，拖动图像的"副本"会释放/拖放到画布上。在释放鼠标按钮之前发生这种情况。

当释放鼠标按钮时，拖动的图像会消失。我可以回去拿起预先发布的'副本'并再次开始操作，结果相同。

我的用户需要能够移动/重新定位对象 ;在画布上。

基本XAML页面

< Page 
X：类= QUOT; DragAndDropUWP.MainPage" 
 xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 xmlns：x =" http://schemas.microsoft.com/winfx/2006/xaml" 
 xmlns：local =" using：DragAndDropUWP" 
 xmlns：d =" http://schemas.microsoft.com/expression/blend/2008" 
 xmlns：mc =" http://schemas.openxmlformats.org/markup-compatibility/2006" 
 mc：Ignorable =" d"> 
 
< Canvas x：Name =" Workspace" 
背景="灰色" 
 Width =" 650" 
高度="650" 
 AllowDrop =" True" 
 Drop =" CanvasPanel_Drop" 
 DragOver =" CanvasPanel_DragOver" 
 DragEnter =" CanvasPanel_DragEnter" 
 DragLeave =" CanvasPanel_DragLeave" 
 ManipulationMode =" TranslateX，TranslateY" 
 ManipulationDelta =" Context1_CalculateDelta" 
 ManipulationCompleted =" Context1_ManipulationCompleted"> 
 
< Image x：Name =" SourceImage" 
 Margin =" 0,0,0,0" 
高度="200" 
 Width =" 200" 
 CanDrag =" True" 
来源=" Assets / Thing1.png" 
 DragStarting =" SourceAndTarget_DragStarting"> 
< Image.RenderTransform> 
< CompositeTransform x：Name =" imageTransform" /> 
< /Image.RenderTransform> 
< / Image> 
<！ -  
 PointerPressed =" Image_PointerPressed" 
  - > 
< / Canvas> 
< / Page>

基本C＃代码隐藏

 使用System; 
使用System.Collections.Generic; 
使用System.IO; 
使用System.Linq; 
使用System.Runtime.InteropServices.WindowsRuntime; 
使用Windows.ApplicationModel.DataTransfer; 
使用Windows.Foundation; 
使用Windows.Foundation.Collections; 
使用Windows.Storage; 
使用Windows.UI.Core; 
使用Windows.UI.Xaml; 
使用Windows.UI.Xaml.Controls; 
使用Windows.UI.Xaml.Controls.Primitives; 
使用Windows.UI.Xaml.Data; 
使用Windows.UI.Xaml.Input; 
使用Windows.UI.Xaml.Media; 
使用Windows.UI.Xaml.Media.Imaging; 
使用Windows.UI.Xaml.Navigation; 
 
 
 namespace DragAndDropUWP 
 {
 ///< summary> 
 ///一个空页面，可以单独使用，也可以导航到Frame中。 
 ///< / summary> 
 public sealed partial class MainPage：Page 
 {
 public MainPage（）
 {
 this.InitializeComponent（）; 
} 
 / * 
私人无效CanvasPanel_PointerPressed（对象发件人，PointerRoutedEventArgs E）
 {
} 
 
私人无效Image_PointerPressed（对象发件人， PointerRoutedEventArgs E）
 {
} 
 * / 
私人无效SourceAndTarget_DragStarting（对象发件人，DragStartingEventArgs E）
 {
 &NBSP;&NBSP;&NBSP ;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; e.Data.RequestedOperation = DataPackageOperation.Move; 
            //e.Data.RequestedOperation = DataPackageOperation.Copy; 
} 
 
 private void CanvasPanel_DragEnter（object sender，DragEventArgs e）
 {
 //e.Handled = true; 
} 
 
 private void CanvasPanel_DragLeave（object sender，DragEventArgs e）
 {
 //e.Handled = true; 
} 
 
 private void CanvasPanel_DragOver（object sender，DragEventArgs e）
 {
 //e.AcceptedOperation = DataPackageOperation.Copy; 
 e.AcceptedOperation = DataPackageOperation.Move; 
 e.DragUIOverride.IsCaptionVisible = true; //真正; 
 e.DragUIOverride.IsContentVisible = true; //真正; 
 e.DragUIOverride.IsGlyphVisible = true; //真正; 
 //e.Handled = true; 
} 
 
 private void Context1_ManipulationStarted（object sender，ManipulationStartedRoutedEventArgs e）
 {
 //e.Handled = true; 
} 
 
私人无效Context1_CalculateDelta（对象发件人，ManipulationDeltaRoutedEventArgs E）
 {
 imageTransform.TranslateX + = e.Delta.Translation.X; 
 imageTransform.TranslateY + = e.Delta.Translation.Y; 
 //e.Handled = true; 
} 
 
 private void Context1_ManipulationCompleted（object sender，ManipulationCompletedRoutedEventArgs e）
 {
 //e.Handled = true; 
} 
 
私人异步空隙CanvasPanel_Drop（对象发件人，DragEventArgs E）
 {
如果（e.DataView.Contains（StandardDataFormats.StorageItems））
 {
 var items = await e.DataView.GetStorageItemsAsync（）; 
 if（items.Count> 0）
 {
 //更新处理N ...项目
 var storageFile = items [0] as StorageFile; 
 var bitmapImage = new BitmapImage（）; 
 bitmapImage.SetSource（await storageFile.OpenAsync（FileAccessMode.Read））; 
 
 Image newImage = new Image（）; 
 newImage.Source = bitmapImage; 
 newImage.Visibility = Visibility.Visible; 
 
 //将图像添加到画布
 Workspace.Children.Add（newImage）; 
} 
} 
 //e.Handled = true; 
} 
} 
}

一个有趣的神器是相反的鼠标按钮，它通常会带来一个上下文菜单，将拖放对象罚款，接受是不装饰被拖动的对象或尊重'AllowDrop'属性是XAML。

我不认为这是正常的。这不是我要找的功能。

谢谢，

标记

解决方案

A simple drag and drop of objects on the Canvas, does not seem to be working properly.

The drag operation starts out correctly, but while dragging an image, a 'copy' of the image being dragged is release/dropped onto the canvas. This happens before the mouse button is released.

When the mouse button is release the image being dragged disappears. I can go back an pick up the 'copy' that was pre-released and start the operation again with the same results.

My users will need the ability to move/reposition objects on the Canvas.

Basic XAML page

<Page
    x:Class="DragAndDropUWP.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DragAndDropUWP"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Canvas x:Name="Workspace"
            Background="Gray"
            Width="650"
            Height="650"
            AllowDrop="True"
            Drop="CanvasPanel_Drop"
            DragOver="CanvasPanel_DragOver"
            DragEnter="CanvasPanel_DragEnter"
            DragLeave="CanvasPanel_DragLeave"
            ManipulationMode="TranslateX, TranslateY"
            ManipulationDelta="Context1_CalculateDelta"
            ManipulationCompleted="Context1_ManipulationCompleted">

        <Image x:Name="SourceImage"
                    Margin="0,0,0,0"
                    Height="200"
                    Width="200"
                    CanDrag="True"
                    Source="Assets/Thing1.png"
                    DragStarting="SourceAndTarget_DragStarting">
            <Image.RenderTransform>
                <CompositeTransform x:Name="imageTransform"/>
            </Image.RenderTransform>
        </Image>
        <!--
            PointerPressed="Image_PointerPressed"
        -->
    </Canvas>
</Page>

Basic C# code behind

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel.DataTransfer;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.Storage;
using Windows.UI.Core;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
using Windows.UI.Xaml.Navigation;


namespace DragAndDropUWP
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
/*
        private void CanvasPanel_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
        }

        private void Image_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
        }
*/
       private void SourceAndTarget_DragStarting(object sender, DragStartingEventArgs e)
       {
            e.Data.RequestedOperation = DataPackageOperation.Move;
            //e.Data.RequestedOperation = DataPackageOperation.Copy;
        }

        private void CanvasPanel_DragEnter(object sender, DragEventArgs e)
        {
            //e.Handled = true;
        }

        private void CanvasPanel_DragLeave(object sender, DragEventArgs e)
        {
            //e.Handled = true;
        }

        private void CanvasPanel_DragOver(object sender, DragEventArgs e)
        {
            //e.AcceptedOperation = DataPackageOperation.Copy;
            e.AcceptedOperation = DataPackageOperation.Move;
            e.DragUIOverride.IsCaptionVisible = true; //true;
            e.DragUIOverride.IsContentVisible = true; //true;
            e.DragUIOverride.IsGlyphVisible = true; //true;
            //e.Handled = true;
        }

        private void Context1_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
        {
            //e.Handled = true;
        }

        private void Context1_CalculateDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            imageTransform.TranslateX += e.Delta.Translation.X;
            imageTransform.TranslateY += e.Delta.Translation.Y;
            //e.Handled = true;
        }

        private void Context1_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
        {
            //e.Handled = true;
        }

        private async void CanvasPanel_Drop(object sender, DragEventArgs e)
        {
            if (e.DataView.Contains(StandardDataFormats.StorageItems))
            {
                var items = await e.DataView.GetStorageItemsAsync();
                if (items.Count > 0)
                {
                    // Update to handle N... items
                    var storageFile = items[0] as StorageFile;
                    var bitmapImage = new BitmapImage();
                    bitmapImage.SetSource(await storageFile.OpenAsync(FileAccessMode.Read));

                    Image newImage = new Image();
                    newImage.Source = bitmapImage;
                    newImage.Visibility = Visibility.Visible;

                    // Add image to canvas
                    Workspace.Children.Add(newImage);
                }
            }
            //e.Handled = true;
        }
    }
}

An interesting artifact is that the opposite mouse-button, that normally brings up a context menu, will drag and drop object fine, accept that is does not decorate the object being dragged or respect 'AllowDrop' properties is XAML.

I don't think this is working properly. This it is not the functionality I am looking for.

Thank you,

Mark

解决方案

这篇关于[UWP] Drag n Drop。在拖动所选对象的同时，将正在拖动的图像释放/拖放到“画布”上。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..