wpfでのドラッグアンドドロップについて

Question

前提・実現したいこと

WPFで図形をCanvasにドラッグアンドドロップしたいです．
ただし，対象の図形自体をドラッグするのではなくて，コピーしたものを作成してドラッグしたいです．

ソースコード

<UsersControl.Resources>
    <sys:Double x:Key="Radius">20</sys:Double>
    <Style x:Key="TargetPointStyle" TargetType="{x:Type Path}" BasedOn="{StaticResource BasePointStyle}">
        <Setter Property="Fill" Value="Red" />
        <Setter Property="Stroke" Value="Red" />
    </Style>

    <Style x:Key="BaseTextStyle" TargetType="{x:Type TextBlock}">
        <Setter Property="Opacity" Value="0.8" />
        <Setter Property="FontSize" Value="16" />
    </Style>

    <Style x:Key="TargetTextStyle" TargetType="{x:Type TextBlock}" BasedOn="{StaticResource BaseTextStyle}">
        <Setter Property="Foreground" Value="Red" />
    </Style>
</UsersControl.Resources>

<!-- 省略 -->

<TextBlock Text="Target Point"
           Style="{StaticResource TargetTextStyle}"
           Canvas.Left="10"
           Canvas.Top="10"/>
<!-- これをコピーしてドラッグしたい -->
<Path Style="{StaticResource TargetPointStyle}">
    <Path.Data>
        <EllipseGeometry Center="130 20"
                         RadiusX="{StaticResource Radius}"
                         RadiusY="{StaticResource Radius}"/>
    </Path.Data>
</Path>


<!-- ここにドロップしたい -->
<Canvas Grid.Row="1" Height="512" Width="512">
    <Image Source="sample.jpg" Stretch="UniformToFill"/>
</Canvas>

調べたこと

自分で調べる限り，

• コードビハインド
• 添付ビヘイビア
• ライブラリ(Gong-wpf-dragdrop)

の3種類が見つかりましたが，ItemsControlの派生クラス(リストボックスなど)の中でItemを並び替えたりという例が多い印象でした．
自分のやりたいこととは，Canvasの外側に設置してあるEllipseなどのShapeを，ドラッグアンドドロップでCanvasの上に持ってくることなので，少し調査結果とは違うのかなと思いました．
また，調べた内容では，Item自体をドラッグアンドドロップして動かすので，移動させたあとは，元の位置にはItemはないという状態が基本でした．
しかし，自分の場合は，コピーしたものをドラッグアンドドロップをしたいので，最終的にはCanvasの外側とCanvasの上にShapeが存在している状態にしたいです．

どのように実現すればいいのか，わからないのでご教示お願いします．

Comments

[hihijiji]

やりたいことを具体的に書いてください。

[arw.tyx-out_mz]

追記したので確認していただけると助かります．

Answer 1

WPFで図形をCanvasにドラッグアンドドロップしたいです．
ただし，対象の図形自体をドラッグするのではなくて，コピーしたものを作成してドラッグしたいです．

こちらは公式のサンプルです。
チュートリアル: ユーザー コントロールでのドラッグ アンド ドロップの有効化 - WPF .NET Framework | Microsoft Learn

なかなか盛りだくさんですが、最後に図形の移動をしています。
それをCanvasに変更し、図形のコピーのみの最低限のコードしました。

<Window
  x:Class="Q196305.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:Q196305"
  Width="800"
  Height="450">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <StackPanel Background="Beige">
      <local:Circle Margin="8" CanCopy="True" />
    </StackPanel>

    <Canvas
      Grid.Column="1"
      AllowDrop="True"
      Background="Bisque"
      ClipToBounds="True"
      DragOver="Canvas_DragOver"
      Drop="Canvas_Drop" />
  </Grid>
</Window>

using System.Windows;
using System.Windows.Controls;

namespace Q196305;

public partial class MainWindow : Window
{
    public MainWindow() => InitializeComponent();

    private void Canvas_DragOver(object sender, DragEventArgs e)
    {
        if (e.Data.GetDataPresent("Object"))
            e.Effects = DragDropEffects.Copy;
        else
            e.Effects = DragDropEffects.None;

        e.Handled = true;
    }

    private void Canvas_Drop(object sender, DragEventArgs e)
    {
        if (e.Handled) return;

        if (sender is Canvas canvas)
        {
            if (e.Data.GetData("Object") is Circle)
            {
                var circle = new Circle();
                var p = e.GetPosition(canvas);
                Canvas.SetLeft(circle, p.X - circle.Width / 2);
                Canvas.SetTop(circle, p.Y - circle.Height / 2);

                canvas.Children.Add(circle);
            }
        }
    }
}

<UserControl
  x:Class="Q196305.Circle"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="100"
  Height="100">
  <Ellipse Fill="Blue" />
</UserControl>

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace Q196305;

public partial class Circle : UserControl
{
    public bool CanCopy { get; set; }

    public Circle() => InitializeComponent();

    protected override void OnMouseMove(MouseEventArgs e)
    {
        base.OnMouseMove(e);

        if (!CanCopy || e.LeftButton != MouseButtonState.Pressed) return;

        var data = new DataObject("Object", this);
        DragDrop.DoDragDrop(this, data, DragDropEffects.Copy);
    }
}

Answer 2

ドラッグ＆ドロップっていうのは異なるアプリケーション間でマウス操作によるデータ連携手段として
Windowsをはじめとしたグラフィカルユーザーインターフェイスが用意している仕組みです。
ドラッグ＆ドロップを実装するってことは、その仕組みを利用するってことです。
コピーも移動もWindowsのドラッグ＆ドロップはサポートしてます。
Gong-wpf-dragdropなどメジャーなライブラリならまずコピーもサポートしてますので、
ちょこっと変えるだけでOKです。