Silverlight 4 have drag and drop functionality. here i demostrate that functionality.
first create new project named “DragAndDropImage”.
You have to add references “Microsoft.Expression.Interactions”, “system.windows.interactivity” and “system.windows.browser”
Silverlight is too fun, when coding gets this simple. So the image can now be dragged around. Now lets add the drop feature.
For making everything very simple, I will just now add AllowDrop=”True” and then add a drop handler to handle any file that is being dropped.
Now, lets move to the code behind. For demonstration purpose, I will use images from deviantArt gallery.
In DragAndDropImageTest.xaml file
<UserControl x:Class="SilverLightTest.DragAndDropImageTest" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" d:DesignHeight="300" d:DesignWidth="400"> <Grid x:Name="LayoutRoot" AllowDrop="True" Drop="LayoutRoot_Drop" Background="Black"> <StackPanel x:Name="DropCollection" Height="100" Margin="10,30,10,10" VerticalAlignment="Top" HorizontalAlignment="Center" Orientation="Horizontal"> </StackPanel> <Image x:Name="DropImage" Margin="0,100,0,0" Width="400" Cursor="Hand"> <i:Interaction.Behaviors> <ei:MouseDragElementBehavior ConstrainToParentBounds="True"></ei:MouseDragElementBehavior> </i:Interaction.Behaviors> </Image> </Grid> </UserControl>
In DragAndDropImageTest.xaml.cs file
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;
using System.Collections.ObjectModel;
using System.Windows.Media;
using System.Windows.Browser;
using System.IO;
namespace SilverLightTest
{
public partial class DragAndDropImageTest : UserControl
{
public DragAndDropImageTest()
{
InitializeComponent();
}
private void LayoutRoot_Drop(object sender, DragEventArgs e)
{
if (e.Data != null)
{
//reading the drop file
FileInfo file = ((FileInfo[])e.Data.GetData(DataFormats.FileDrop)).FirstOrDefault();
//creating a bitmapImage
BitmapImage img = new BitmapImage();
using (Stream s = file.OpenRead())
{
img.SetSource(s);
}
//setting the image in xaml
DropImage.Source = img;
Image newImage = new Image { Source = img };
newImage.MouseLeftButtonDown += (a, b) =>
{
DropImage.Source = newImage.Source;
};
DropCollection.Children.Add(newImage);
}
}
}
}
Run the application and check with dropping the image file in browser.
Enjoy Coding…..
