drag & drop image WPF

Question

Tell me what the error is. I want to use drag & drop to insert a picture, but after dragging, I get an Image object with the Source property set to null

XAML

  <Grid.ColumnDefinitions> <ColumnDefinition Width="300"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> </Grid.ColumnDefinitions> <ScrollViewer Grid.RowSpan="2"> <StackPanel CanVerticallyScroll="True"> <Image Source="Resources/part1.jpg" Width="280" Height="121" Margin="0,10,0,10" MouseDown="Image_MouseDown" Stretch="UniformToFill"/> <Image Source="Resources/part2.jpg" Width="280" Height="121" Margin="0,10,0,10" MouseDown="Image_MouseDown" Stretch="UniformToFill"/> <Image Source="Resources/part3.jpg" Width="280" Height="121" Margin="0,10,0,10" MouseDown="Image_MouseDown" Stretch="UniformToFill"/> <Image Source="Resources/part4.jpg" Width="280" Height="121" Margin="0,10,0,10" MouseDown="Image_MouseDown" Stretch="UniformToFill"/> <Image Source="Resources/part5.jpg" Width="280" Height="121" Margin="0,10,0,10" MouseDown="Image_MouseDown" Stretch="UniformToFill"/> <Image Source="Resources/part6.jpg" Width="280" Height="121" Margin="0,10,0,10" MouseDown="Image_MouseDown" Stretch="UniformToFill"/> </StackPanel> </ScrollViewer> <Canvas Grid.Column="1" Margin="0,0,0,0" > <Image Source="Resources/part1.jpg" Width="280" Height="120" Drop="Image_Drop" DragEnter="Image_DragEnter" AllowDrop="True" Stretch="UniformToFill" Canvas.Left="156" Canvas.Top="51"/> <Image Source="Resources/part2.jpg" Width="280" Height="120" Drop="Image_Drop" AllowDrop="True" Stretch="UniformToFill" Canvas.Left="436" Canvas.Top="51"/> <Image Source="Resources/part3.jpg" Width="280" Height="120" Drop="Image_Drop" AllowDrop="True" Stretch="UniformToFill" Canvas.Left="156" Canvas.Top="170"/> <Image Source="Resources/part4.jpg" Width="280" Height="120" Drop="Image_Drop" AllowDrop="True" Stretch="UniformToFill" Canvas.Left="436" Canvas.Top="170"/> <Image Source="Resources/part5.jpg" Width="280" Height="120" Drop="Image_Drop" AllowDrop="True" Stretch="UniformToFill" Canvas.Left="156" Canvas.Top="288"/> <Image Source="Resources/part6.jpg" Width="280" Height="120" Drop="Image_Drop" AllowDrop="True" Stretch="UniformToFill" Canvas.Left="436" Canvas.Top="288"/> </Canvas> </Grid>

C #

 public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void Image_Drop(object sender, DragEventArgs e) { ((Image) sender).Source = e.Source as ImageSource; } private void Image_MouseDown(object sender, MouseButtonEventArgs e) { // sender – объект, на котором произошло данное событие. Image lbl = sender as Image; // Создаем источник. // Копируем содержимое метки Drop. // 1 параметр: Элемент управления, который будет источником. // 2 параметр: Данные, которые будут перемещаться. // 3 параметр: Эффект при переносе. DragDrop.DoDragDrop(lbl, lbl.Source, DragDropEffects.Copy); } private void Image_DragEnter(object sender, DragEventArgs e) { e.Effects = DragDropEffects.Copy; } }

link to git https://github.com/Sechik/Puzzle

Accepted Answer · 2017-04-05T17:59:55

You have different Source (you are trying to assign them):

 {pack://application:,,,/Puzzle;component/Resources/part3.jpg} {System.Windows.Controls.Image}

This is how it is copied, but the picture is the same in sender and e

 private void Image_Drop(object sender, DragEventArgs e) { //((Image) sender).Source = e.Source as ImageSource; Image image = e.Source as Image; ((Image)sender).Source = image.Source; }

Here is a ready-made solution (here the picture is passed through an additional variable):

 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace Puzzle { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public static Image global_sender; public MainWindow() { InitializeComponent(); } private void Image_Drop(object sender, DragEventArgs e) { //((Image) sender).Source = e.Source as ImageSource; //Image image = e.Source as Image; //((Image)sender).Source = image.Source; ((Image)sender).Source = global_sender.Source; } private void Image_MouseDown(object sender, MouseButtonEventArgs e) { // sender – объект, на котором произошло данное событие. Image lbl = sender as Image; global_sender = lbl; // Создаем источник. // Копируем содержимое метки Drop. // 1 параметр: Элемент управления, который будет источником. // 2 параметр: Данные, которые будут перемещаться. // 3 параметр: Эффект при переносе. DragDrop.DoDragDrop(lbl, lbl.Source, DragDropEffects.Copy); } private void Image_DragEnter(object sender, DragEventArgs e) { e.Effects = DragDropEffects.Copy; } } }

Here are just a couple of questions: 1) What does Source mean different?
In the F5 debugging mode, put a breakpoint on these lines, hover the cursor and open the pop-up menu - there will be their contents.

drag & drop image WPF

1 answer 1

More articles: