Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Silverlight 4: How to Drag and Drop External Files?

, 30 Nov 2009
Rate this:
Please Sign up or sign in to vote.
In this post, I will describe another feature of Silverlight 4 “Access to external content”. Here I will show how to drag and drop some external images to my sample application.

In this post, I will describe another feature of Silverlight 4 “Access to external content”. Here I will show how to drag and drop some external images to my sample application. In earlier Silverlight 4, this feature was not available. There was no client file access permission. But in this new release, they introduced this functionality by which you can implement the same.

To implement this feature you need Silverlight 4, which is now available in Beta 1 version. You need Visual Studio 2010 Beta 2 which you can download freely from the Microsoft site.

Now if your dev environment is ready, then we can go further to implement the same. Excited so much to do it? Create a Silverlight project which will create “MainPage.xaml” for you. Inside the MainPage.xaml, add a ScrollViewer containing a WrapPanel. Your ScrollViewer will have a fixed Height & Width whereas your WrapPanel will be free size. This ensures that, if more components are added inside the WrapPanel, it will automatically add a scrollbar to it. So, you can scroll through the child components. In this example, I want to drop some external image files inside this panel. So, I will set the WrapPanel AllowDrop” property to true. This will make the panel droppable.

On the Drop event handler of the wrap panel, you will get the dropped files as data to the DropEventArgs which has an array of FileInfo. DataFormats.FileDrop sets the droppable permission to the panel.

FileInfo[] droppedFiles = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];

Now for each dropped file, you can check whether it is a supported image file. If so, proceed further to add it to the wrap panel. See the sample code:

void imageContainer_Drop(object sender, DragEventArgs e)
{
    FileInfo[] droppedFiles = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];

    foreach (FileInfo droppedFile in droppedFiles)
    {
        if (IsSupportedImageFile(droppedFile.Extension))
        {
            Border imagePlaceHolder = new Border()
            {
                Child = CreateImage(droppedFile),
                Background = transparentColor,
                Margin = new Thickness(10.0),
                Cursor = Cursors.Hand,
            }; 
            
            ToolTipService.SetToolTip(imagePlaceHolder, droppedFile.Name);

            imagePlaceHolder.MouseEnter += imagePlaceHolder_MouseEnter;
            imagePlaceHolder.MouseLeave += imagePlaceHolder_MouseLeave;

            imageContainer.Children.Add(imagePlaceHolder);
        }
    }
}

Here IsSupportedImageFile() method takes the extension of the dropped file as a parameter which will check whether it is a valid image format. I used .jpg & .png for the demonstration which actually uses switch case. The CreateImage() method creates an object of the image from the FileStream of the dropped file.

private Image CreateImage(FileInfo droppedFile)
{
    using (FileStream fileStream = droppedFile.OpenRead())
    {
        BitmapImage bitmapImage = new BitmapImage();
        bitmapImage.SetSource(fileStream);

        return new Image() { Source = bitmapImage, 
			Width = 100, Margin = new Thickness(5.0) };
    }
}

Now after writing this code, your application will be ready to get external file droppable inside it. Run your application and drop some JPG/PNG files from your image directory to your browser, i.e., Silverlight application. You will see that the dropped images are automatically added inside your panel. This is a good example of accessing external files droppable inside your web application. Download the sample solution & implement what you want to do.

So what next? I think from the above example, you will get the idea of what we can achieve from this. Anyway you can implement file upload utility by just dragging & dropping inside the web application just like Skydrive. You can also drop text files to read the file instead of browsing & uploading to the server. And more… Go ahead & enjoy programming with Silverlight 4.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

_ Kunal Chowdhury _
Technical Lead
India India
Kunal Chowdhury is a Microsoft "Client Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik MVP, Nokia Developer Champion, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.
 
He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows 8 (WinRT). He posts his findings, articles in his technical blog and CodeProject.
 
Technical Blog: http://www.kunal-chowdhury.com
Facebook: http://facebook.com/blog.kunal
Twitter : http://twitter.com/kunal2383
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 2 PinmemberKarstenK7-Dec-09 22:33 
AnswerRe: My vote of 2 PinmemberKunalChowdhury11-Feb-10 8:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 30 Nov 2009
Article Copyright 2009 by _ Kunal Chowdhury _
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid