Posted by: Zeeshan Amjad | January 6, 2010

Drag and Drop in WPF


We can do drag and drop very easily in WPF with the help of DragDrop class. This class is directly inherited by Object class. Here is a class diagram of DragDrop class.

DragDrop

Let’s make a simple application to use drag and drop. In this program we are going to make two list box and user can drag item from any list box to any other list box. Here is a complete XAML code of this program.

  1: <Window x:Class="WpfDragDrop.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Drag and Drop" Height="400" Width="400">
  5:     <Window.Resources>
  6:         <Style TargetType="{x:Type ListBoxItem}">
  7:             <EventSetter Event="PreviewMouseLeftButtonDown"
  8:                          Handler="HandlerPreviewMouseLeftButtonDown"/>
  9:             <EventSetter Event="PreviewMouseMove"
 10:                          Handler="HandlerPreviewMouseMove"/>
 11:         </Style>
 12:     </Window.Resources>
 13:     <Grid>
 14:         <Grid.ColumnDefinitions>
 15:             <ColumnDefinition/>
 16:             <ColumnDefinition/>
 17:         </Grid.ColumnDefinitions>
 18:         <ListBox Grid.Column="0" Name="sourceList" AllowDrop="True" Margin="5" 
 19:                  DragEnter="sourceList_DragEnter" Drop="sourceList_Drop"
 20:                  HorizontalContentAlignment="Stretch">
 21:             <ListBox.ItemTemplate>
 22:                 <DataTemplate>
 23:                     <Border Margin="3" BorderBrush="Brown" BorderThickness="1" CornerRadius="5">
 24:                         <TextBlock Margin="2" Text="{Binding}"/>
 25:                     </Border>
 26:                 </DataTemplate>
 27:             </ListBox.ItemTemplate>
 28:         </ListBox>
 29:         <ListBox Grid.Column="1" Name="destList" AllowDrop="True" Margin="5" 
 30:                  DragEnter="destList_DragEnter" Drop="destList_Drop" 
 31:                  HorizontalContentAlignment="Stretch">
 32:             <ListBox.ItemTemplate>
 33:                 <DataTemplate>
 34:                     <Border Margin="3" BorderBrush="Brown" BorderThickness="1" CornerRadius="5">
 35:                         <TextBlock Margin="2" Text="{Binding}"/>
 36:                     </Border>
 37:                 </DataTemplate>
 38:             </ListBox.ItemTemplate>
 39:         </ListBox>
 40:     </Grid>
 41: </Window>
 42: 

Note that we write the Preview message handler in the form of event setter style, because we want to set that style on list box item not on list box. Here is a complete C# code of this program.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: 
 15: namespace WpfDragDrop
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         private ListBoxItem selectedItem;
 23: 
 24:         public Window1()
 25:         {
 26:             InitializeComponent();
 27: 
 28:             List<String> data = new List<string>();
 29: 
 30:             data.Add("Maryland");
 31:             data.Add("Virginia");
 32:             data.Add("West Virginia");
 33:             data.Add("Ohio");
 34:             data.Add("California");
 35:             data.Add("Washington");
 36:             data.Add("Nevada");
 37: 
 38:             foreach (string str in data)
 39:                 sourceList.Items.Add(str);
 40:         }
 41: 
 42:         private void HandlerPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 43:         {
 44:             selectedItem = sender as ListBoxItem;
 45:         }
 46: 
 47:         private void HandlerPreviewMouseMove(object sender, MouseEventArgs e)
 48:         {
 49:             if (e.LeftButton == MouseButtonState.Pressed)
 50:             {
 51:                 DragDrop.DoDragDrop(selectedItem, selectedItem.Content,
 52:                     DragDropEffects.Copy);
 53:             }
 54:         }
 55: 
 56:         private void sourceList_DragEnter(object sender, DragEventArgs e)
 57:         {
 58:             if (e.Data.GetDataPresent(DataFormats.Text))
 59:             {
 60:                 e.Effects = DragDropEffects.Copy;
 61:             }
 62:             else
 63:             {
 64:                 e.Effects = DragDropEffects.None;
 65:             }
 66:         }
 67: 
 68:         private void destList_DragEnter(object sender, DragEventArgs e)
 69:         {
 70:             if (e.Data.GetDataPresent(DataFormats.Text))
 71:             {
 72:                 e.Effects = DragDropEffects.Copy;
 73:             }
 74:             else
 75:             {
 76:                 e.Effects = DragDropEffects.None;
 77:             }
 78:         }
 79: 
 80:         private void sourceList_Drop(object sender, DragEventArgs e)
 81:         {
 82:             sourceList.Items.Add(e.Data.GetData(DataFormats.Text));
 83:         }
 84: 
 85:         private void destList_Drop(object sender, DragEventArgs e)
 86:         {
 87:             destList.Items.Add(e.Data.GetData(DataFormats.Text));
 88:         }
 89:     }
 90: }
 91: 

Here also note that rather than using ItemsSource property of list box we are adding items manually. This is because if we are using ItemssSource property then we can’t items in it when we drop the item in list box. Here is a output of this program.

DragDropOutput

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: