We will start overview of new features called Drag & Drop – a simple but a very nice feature. We will not tell about moving elements inside SilverLight application. We’ll just discuss transferring an external object (located on user computer) to SilverLight application.

Let’s create a new application in order to demonstrate this feature. We will try move user’s images (in supported format)  to SilverLight application and then we will display them. For this reason SilverLight 4 supports a new property called AllowDrop. The property is implemented in UIElement class, so all of the visual elements have it. According to this, we can move external object to any visual element as well as container. If you set up the AllowDrop property to true, you will initiate four events which can be used for implementing the Drag & Drop functionality: Drop, DragEnter, DragLeave, DragOver.

The main event is Drop. It is generated when the Drag&Drop process is finished. Other three events are generated when the mouse pointer (which is dragging the object) moves but before the dropping actually happened. So these events are sort of subsidiary and can be used for additional visualization of the Drag&Drop process in the interface. For example, certain areas where the object can be dropped can be marked with a different color.

Let’s implement a simple interface that contains a button and a panel like Canvas. An object based on Canvas can be used for our purposes best of all for it allows to stick the displayed image to the mouse pointer coordinates.

<UserControl x:Class="DragAndDrop_Chapter0.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.RowDefinitions>

            <RowDefinition Height="50"></RowDefinition>

            <RowDefinition></RowDefinition>

        </Grid.RowDefinitions>

        <Button x:Name="printButton" Content="Print" Width="100"></Button>

        <Border Grid.Row="1" x:Name="photoBorder"

            BorderBrush="Blue" BorderThickness="4">

            <Canvas x:Name="photoPanel" Grid.Row="1"

                    Background="Gray" AllowDrop="True"

                    Drop="photoPanel_Drop"

                    DragEnter="photoPanel_DragEnter"

                    DragLeave="photoPanel_DragLeave">

            </Canvas>

        </Border>

    </Grid>

</UserControl>

We will use photoPanel for displaying images that had been dragged from the user’s computer. Here we have defined the AllowDrop property and set it to True. We also defined the event handler here.

Below you can find implementation of the Drop, DragEnter, DragLeave event handlers (these events are described above).

private void photoPanel_Drop(object sender, DragEventArgs e)

{

    photoBorder.BorderBrush = new SolidColorBrush(Colors.Blue);

    IDataObject data = e.Data;

    FileInfo[] files = (FileInfo [])data.GetData

        (DataFormats.FileDrop);

    foreach (FileInfo f in files)

    {

        Stream s=f.OpenRead();

        BitmapImage bitmap=new BitmapImage();

        bitmap.SetSource(s);

        Image img = new Image();

        img.Source = bitmap;

        img.Width = 100;

        img.Height = 80;

        Point p = e.GetPosition(photoPanel);

        img.Margin = new Thickness(p.X, p.Y, 0, 0);

        photoPanel.Children.Add(img);

    }

}

private void photoPanel_DragEnter(object sender, DragEventArgs e)

{

    photoBorder.BorderBrush = new SolidColorBrush(Colors.Red);

}

private void photoPanel_DragLeave(object sender, DragEventArgs e)

{

    photoBorder.BorderBrush = new SolidColorBrush(Colors.Blue);

}

Last two events are handled only to select the area that is available for dropping (please don’t forget that when the Drop event is generated the DragLeave event is not generated anymore. So selection in Drop must be taken off, too). The Drop event handler does all the main work. It receives information about the files transferred, opens the stream, loads and displays the image with the help of Pixel API ( one of the new things in Silverlight 3). To make the code easier to read we do not handle the errors that are connected with the file types. But in a real task it is a must (try to drag and drop a text file or an office document in this example).