OpenFileDialog in Silverlight

This article, describes how to use the OpenFileDialog in Silverlight

Introduction to File System in Silverlight

Silverlight 2.0 allows limited File System access to Silverlight applications. It can use the operating system's native file dialog box to browse to any file (to which the user has access). The file is sanitized of path information, to prevent the application from getting access to information such as user name, and can only be opened in read-only mode.

For local storage of data, Silverlight provides isolated local storage (isostorage), outside the browser cache, in a folder hidden inside the private user-profile folder. It is set to 1 MB per URL by default, but this can be changed by the user. Data stored by a Silverlight application in the isostorage is identified by the URL from which it loads, and can be accessed by that application only. All instances of Silverlight share the same isostorage, so all instances of the same Silverlight application can share the saved data, even if they are running on different browsers.

Accessing Client File System from a Silverlight 2.0 Application

We create a Button, ListBox, TextBlock and Image control in the XAML page. When the user clicks on the Button, the OpenFileDialog window pop-ups. The user will be able to select multiple images from the DialogBox, which will be displayed in a list on the XAML page. On clicking the name any image in the list, the image will be displayed in an Image control on the page.

~ Silverlight uses vector graphics, not raster graphics. It supports only JPEG and PNG images. It does not currently support GIF and BMP images. If you try to use a GIF or BMP image in Silverlight, an application exception will be thrown.
~ To display an image, you need to set the Source property of the Image control. The Source property can be set to one of two things: the relative path to an image located in the Silverlight project or to an instance of the BitmapImage class set in the code behind.
~ Image control in a Silverlight application displays an image located in the Silverlight project. When the project is built, the image is packaged in to the Silverlight XAP file (basically a ZIP archive with the Silverlight specific .xap extension that represents a deployable Silverlight application), so deploying the images separately from the Silverlight application is not needed.

XAML code

<UserControl x:Class="ImageSample.Page"
Width="Auto" Height="Auto">

<StackPanel x:Name="LayoutRoot" Orientation="Horizontal">
<Button x:Name="btnclick" Content="Click Me" Height="50"
Width="100" Click="btnOpen_Click" />
<ListBox x:Name="lstImages" Height="150" Width="180"
<TextBlock x:Name="tblkdisplay" Height="400" />
<Image x:Name="img" MaxHeight="250" MaxWidth="250" />

XAML.CS code

private void btnOpen_Click(object sender, RoutedEventArgs e)
OpenFileDialog ofd = new OpenFileDialog();
ofd.Filter = "JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png";
ofd.Multiselect = true;
lstImages.ItemsSource = ofd.Files;
lstImages.DisplayMemberPath = "Name";

private void lstImages_SelectionChanged(object sender,
SelectionChangedEventArgs e)
tblkdisplay.Text = "Selected Image Displayed";
FileInfo file = lstImages.SelectedItem as FileInfo;
BitmapImage image = new BitmapImage();
img.Source = image;


The output is as shown below. In the first screenshot, on clicking the Button, the Open File Dialog Box appears. In the second screenshot, the selected image is displayed:

Output 1

Output 2



Author: Jayendra Kumar22 Feb 2010 Member Level: Gold   Points : 0

thanks to share such a good knowledge.

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: