#706 – Dragging User Interface Elements Between Applications

You can drag user interface elements between WPF applications using drag-and-drop.  To do this, you read the XAML for the portion of the logical tree that you want to drag and specify XAML as your data format.

The example below shows how to drag a StackPanel and everything in it from one application to another.

On the drag side, we use a XamlWriter object to store all of the XAML into a string.

        private void StackPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            string xaml = XamlWriter.Save(e.Source);
            DataObject data = new DataObject(DataFormats.Xaml, xaml);

            DragDrop.DoDragDrop((DependencyObject)e.Source, data, DragDropEffects.Copy);
        }

On the drop side, we use a XamlReader to load the data back into the application.  In this example, we set the StackPanel as the main content for the Window that we’re dragging it to.

        private void Window_Drop(object sender, DragEventArgs e)
        {
            string xaml = (string)e.Data.GetData(DataFormats.Xaml);
            this.Content = XamlReader.Load(new XmlTextReader(new StringReader(xaml)));
        }

706-001
706-002
706-003

#705 – Dragging a Custom Object Using Serialization as Format

When you use drag-and-drop in WPF, you specify a data format for the data to be dragged.  You can “drag” any object that you like, as long as the object is serializable.  Here’s an example, where a Dog object is dragged between instances of a WPF application.

The GUI consists of several labels that show properties of a Dog object.  The Dog can be dragged from the StackPanel or dropped onto the StackPanel.

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center"
                MouseLeftButtonDown="StackPanel_MouseLeftButtonDown"
                AllowDrop="True" Drop="StackPanel_Drop">
        <Label Content="{Binding TheDog.Name}" FontWeight="Bold"/>
        <Label Content="{Binding TheDog.Age}"/>
        <Label Content="{Binding TheDog.BarkSound}"/>
        <Button Content="Create Dog" Click="Button_Click"/>
    </StackPanel>

The code-behind creates a Dog object on the button click.  When dragging starts, the Dog is passed in to the DoDragDrop method.  In the Drop handler, the Dog data is retrieved via the IDataObject interface.

    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;
        }

        private Dog theDog;
        public Dog TheDog
        {
            get { return theDog; }
            set
            {
                if (value != theDog)
                {
                    theDog = value;
                    RaisePropertyChanged("TheDog");
                }
            }
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            TheDog = new Dog("Kirby", 15, "Woof");
        }

        private void StackPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            DataObject data = new DataObject(DataFormats.Serializable, theDog);

            DragDrop.DoDragDrop((DependencyObject)e.Source, data, DragDropEffects.Copy);
        }

        private void StackPanel_Drop(object sender, DragEventArgs e)
        {
            TheDog = (Dog)e.Data.GetData(DataFormats.Serializable);
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void RaisePropertyChanged(string prop)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(prop));
        }
    }

This allows us to drag the Dog from one instance of the application to another. You could also drag objects between applications in the same way.

705-001

705-002

For completeness, here’s the code for the Dog class:

    [Serializable]
    public class Dog
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string BarkSound { get; set; }

        public Dog(string name, int age, string barkSound)
        {
            Name = name;
            Age = age;
            BarkSound = barkSound;
        }
    }

#704 – Escape Key Cancels Drag-and-Drop Behavior

You can always use the Escape key to cancel a drag-and-drop operation that is in progress.  The cursor will return to the default value and the Drop event for the target control will not be fired, even if the mouse is currently over a control that is a drop target.

#703 – Indicating Formats that Are Allowed to be Dropped

A control becomes a drop target by setting its AllowDrop property to true and handling its Drop event, where you retrieve the dragged data.  You could also verify in the Drop event whether the data being dropped is a format that the control can handle.  But at that point, the data has already been dropped.

The preferred method for a control to indicate which types of data it can handle is to handle the DragEnter and DragOver events and set the DragEventArgs.Effects property to indicate that the operation is not allowed.  This will result in the mouse cursor indicating that the drop operation is not allowed.  The Drop event will also not fire.

        private void Image_DragEnter(object sender, DragEventArgs e)
        {

            if (e.Data.GetDataPresent(DataFormats.Bitmap))
                e.Effects = DragDropEffects.Copy;
            else
                e.Effects = DragDropEffects.None;

            e.Handled = true;
        }

        private void Image_DragOver(object sender, DragEventArgs e)
        {
            if (e.Data.GetDataPresent(DataFormats.Bitmap))
                e.Effects = DragDropEffects.Copy;
            else
                e.Effects = DragDropEffects.None;

            e.Handled = true;
        }

#702 – Dragging an Image within a WPF Application

You can drag the contents of one Image control onto another Image control fairly easily.  When you drag an image to another application, you have to convert the image to a bitmap.  But within the same application, you can just use the value of the image’s Source property as the data being dragged.

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Image Grid.Column="0" Source="Life01.jpg" Stretch="None" Margin="10"
                MouseLeftButtonDown="Image_MouseLeftButtonDown"/>
        <Image Grid.Column="1" Margin="10" AllowDrop="True" Drop="Image_Drop" Source="DropHere.png" />
    </Grid>

 

        private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Image img = e.Source as Image;
            DataObject data = new DataObject(DataFormats.Text, img.Source);

            DragDrop.DoDragDrop((DependencyObject)e.Source, data, DragDropEffects.Copy);
        }

        private void Image_Drop(object sender, DragEventArgs e)
        {
            Image img = e.Source as Image;
            img.Source = (BitmapSource) e.Data.GetData(DataFormats.Text);
        }


#701 – Dragging an Image Between WPF Applications

You can use drag and drop functionality in WPF to drag an image from one application to another.

In the drag source, you create a DataObject with a bitmap format.  (Click here for ImageToBitmap source code).

        private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Bitmap bitmap = ImageToBitmap(e.Source as System.Windows.Controls.Image);

            DataObject data = new DataObject(DataFormats.Bitmap, bitmap);

            DragDrop.DoDragDrop((DependencyObject)e.Source, data, DragDropEffects.Copy);
        }

In the drop target (the application where you want to drop the image), you just set the Source property of an existing Image control to the data obtained from the GetData method.

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Drop Target" Height="350" Width="325"
        AllowDrop="True" Drop="Window_Drop">
    <Grid>
        <Image Name="imgDropHere"/>
    </Grid>
</Window>
        private void Window_Drop(object sender, DragEventArgs e)
        {
            BitmapSource bmSource = (BitmapSource)e.Data.GetData(DataFormats.Bitmap);
            imgDropHere.Source = bmSource;
        }

#700 – Dragging an Image to Microsoft Word

You can use the drag and drop functionality in WPF to drag an Image control out of the application.  You can drop this image onto a Word document if you convert the image to an enhanced metafile format.

Here’s the code that initiates the drag operation.

        private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Bitmap bitmap = ImageToBitmap(e.Source as System.Windows.Controls.Image);

            DataObject data = new DataObject(DataFormats.EnhancedMetafile, MakeMetafileStream(bitmap));

            DragDrop.DoDragDrop((DependencyObject)e.Source, data, DragDropEffects.Copy);
        }

This makes use of a utility function to convert the Image to a Bitmap:

        private Bitmap ImageToBitmap(System.Windows.Controls.Image image)
        {
            RenderTargetBitmap rtBmp = new RenderTargetBitmap((int)image.ActualWidth, (int)image.ActualHeight,
                96.0, 96.0, PixelFormats.Pbgra32);

            image.Measure(new System.Windows.Size((int)image.ActualWidth, (int)image.ActualHeight));
            image.Arrange(new Rect(new System.Windows.Size((int)image.ActualWidth, (int)image.ActualHeight)));

            rtBmp.Render(image);

            PngBitmapEncoder encoder = new PngBitmapEncoder();
            MemoryStream stream = new MemoryStream();
            encoder.Frames.Add(BitmapFrame.Create(rtBmp));

            // Save to memory stream and create Bitamp from stream
            encoder.Save(stream);

            return new System.Drawing.Bitmap(stream);
        }

This also requires a utility function that converts a Bitmap to a stream containing a Metafile, taken from Stack Overflow.

        // From http://stackoverflow.com/questions/5270763/convert-an-image-into-wmf-with-net
        private MemoryStream MakeMetafileStream(Bitmap image)
        {
            Graphics graphics = null;
            Metafile metafile = null;
            var stream = new MemoryStream();
            try
            {
                using (graphics = Graphics.FromImage(image))
                {
                    var hdc = graphics.GetHdc();
                    metafile = new Metafile(stream, hdc);
                    graphics.ReleaseHdc(hdc);
                }
                using (graphics = Graphics.FromImage(metafile))
                { graphics.DrawImage(image, 0, 0); }
            }
            finally
            {
                if (graphics != null)
                { graphics.Dispose(); }
                if (metafile != null)
                { metafile.Dispose(); }
            }
            return stream;
        }

Here’s the code in action:

#697 – Dragging Data Out of Your Application

When you use a user interface element as a drag-and-drop source, you initiate the drag-and-drop operation by calling the DragDrop.DoDragDrop method.  The data that you specify when calling this method can then be dragged onto other elements in your application that act as drop targets.   You can also drag data out to another application that knows how to act as a drag-and-drop target.

In the example below, we left-click and drag on the Image, then dropping data into Microsoft Word.  The actual data dropped is textual.

        private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            string textToDrag = "On November 23, 1936, the first issue of the pictorial magazine Life is published, featuring a cover photo of the Fort Peck Dam by Margaret Bourke-White.";

            DragDrop.DoDragDrop((DependencyObject)e.Source, textToDrag, DragDropEffects.Copy);
        }


#696 – A Drop Target Can Receive Data from Other Applications

When you designate an element in your user interface as a drop target for a drag-and-drop operation, it can receive data that is dragged from other elements in your application, provided that those elements initiate the drag-and-drop operation.  But a drop target element in your application can also serve as a target for a drag source in another application.

You can set the AllowDrop property to true for an element and then add code for the element’s Drop event, where you call IDataObject.GetData to get the dragged data.

In the example below, we’ve made a ListBox the drop target.  We can then drag some text onto it from Microsoft Word.

        private void lbDrop(object sender, DragEventArgs e)
        {
            string draggedText = (string)e.Data.GetData(DataFormats.StringFormat);

            ListBox lbox = e.Source as ListBox;
            lbox.Items.Add(draggedText);
        }

#695 – Implementing Drag-and-Drop Behavior

Below is code that implements some simple drag-and-drop behavior, dragging text from a TextBox to a ListBox.

In the XAML, we specify handlers for the MouseDown event on the TextBox and the Drop event on the ListBox.  We also set the AllowDrop property on the ListBox to true.

        <StackPanel Orientation="Vertical" Grid.Column="0" Margin="10">
            <Label Content="Enter some text and then drag to list"/>
            <TextBox Text="" MouseDown="txtMouseDown"/>
        </StackPanel>
        <ListBox Grid.Column="1" Margin="10" AllowDrop="True" Drop="lbDrop"/>

In the MouseDown event handler for the TextBox, we initiate drag-and-drop using the DragDrop.DoDragDrop method.

        private void txtMouseDown(object sender, MouseButtonEventArgs e)
        {
            TextBox txtElement = e.Source as TextBox;

            DragDrop.DoDragDrop(txtElement, txtElement.SelectedText, DragDropEffects.Copy);
        }

In the Drop event handler for the ListBox, we get the data being dragged and add an item to the ListBox.

        private void lbDrop(object sender, DragEventArgs e)
        {
            string draggedText = (string)e.Data.GetData(DataFormats.StringFormat);

            ListBox lbox = e.Source as ListBox;
            lbox.Items.Add(draggedText);
        }