Silverlight 3 Tutorial - Isolated Storage

Krzysztof Mossakowski

Tutorials

Demonstrated issues:

Using isolated storage:
- Listing content of the isolated storage
- Creating directories and files
- Copying files from and to the file system
- Increasing the quota
OpenFileDialog and SaveFileDialog
Application exceptions

Prerequisities:

Visual Studio 2008 SP1
Silverlight 3 Tools for Visual Studio 2008 SP1

Steps:

Create a new Silverlight application, name it 'IsolatedStorage'. Do not create a hosting ASP.NET application, the isolated storage works also for Silverlight applications run from file:// addresses.

We will try to create an application which will allow to store files in the isolated storage in directories defined by the user. The first step is to define the UI:

Create a grid with two rows. In the first row create 3 grid cells and 2 grid splitters:

<UserControl

    x:Class="IsolatedStorage.MainPage"

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

    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

    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" d:DesignWidth="640" d:DesignHeight="480"

    <UserControl.Resources>

        <Style x:Name="GridSplitterStyle" TargetType="controls:GridSplitter">

            <Setter Property="HorizontalAlignment" Value="Center"/>

            <Setter Property="VerticalAlignment" Value="Stretch"/>

            <Setter Property="Width" Value="3"/>

            <Setter Property="Background" Value="Black"/>

        </Style>

        <Style x:Name="ButtonStyle" TargetType="Button">

            <Setter Property="Margin" Value="2"/>

        </Style>

    </UserControl.Resources>

    <Border

        Background="AntiqueWhite"

        BorderBrush="Black"

        BorderThickness="1"

        CornerRadius="5"

        Margin="5"

        Padding="5"

        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition Height="*"/>

                <RowDefinition Height="Auto"/>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="*"/>

                <ColumnDefinition Width="Auto"/>

                <ColumnDefinition Width="*"/>

                <ColumnDefinition Width="Auto"/>

                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>

            <controls:GridSplitter

                Grid.Column="1"

                Style="{StaticResource GridSplitterStyle}"

/>

            <controls:GridSplitter

                Grid.Column="3"

                Style="{StaticResource GridSplitterStyle}"

/>

        </Grid>

    </Border>

</UserControl>

To use the GridSplitter control, the namespace System.Windows.Controls from the assembly with the same name must be included.

Compile and test if it works:

In the second row of the grid, place buttons and a TextBox to allow the user to provide a name of a directory to create:

<StackPanel

    Grid.Row="1"

    Grid.ColumnSpan="5"

    Orientation="Horizontal"

    <TextBox

        x:Name="DirectoryNameTextBox"

        Width="100"

        Margin="2,2,0,2"

/>

    <Button

        x:Name="CreateDirectoryButton"

        Style="{StaticResource ButtonStyle}"

        Content="Create directory"

        Click="CreateDirectoryButton_Click"

/>

    <Button

        x:Name="AddFileButton"

        Style="{StaticResource ButtonStyle}"

        Content="Add file"

        Click="AddFileButton_Click"

/>

    <Button

        x:Name="GetFileButton"

        Style="{StaticResource ButtonStyle}"

        Content="Get file"

        IsEnabled="False"

        Click="GetFileButton_Click"

/>

    <Button

        x:Name="DeleteFileButton"

        Style="{StaticResource ButtonStyle}"

        Content="Delete file"

        IsEnabled="False"

        Click="DeleteFileButton_Click"

/>

</StackPanel>

Create a tree representing the directory structure stored in the isolated storage:

Add a TreeView control to the left cell of the grid's first row. Place one TreeViewItem in the TreeView control, it will represent the root in the isolated storage:

<controls:TreeView

    x:Name="DirectoriesTreeView"

    <controls:TreeViewItem

        x:Name="RootDirectoriesTreeViewItem"

        Header="[root]"

        Tag=""

        IsSelected="True"

/>

</controls:TreeView>

In reponse for the click on the 'Create directory' button, add a new item to the TreeView control and add a new directory into the isolated storage:

private TreeViewItem CreateTreeViewItem(string name, string path, TreeViewItem parentItem)

    var item = new TreeViewItem {Header = name, Tag = path};

    parentItem.Items.Add(item);

    parentItem.IsExpanded = true;

    return item;

private void CreateDirectoryButton_Click(object sender, RoutedEventArgs e)

    TreeViewItem selectedItem = (TreeViewItem)DirectoriesTreeView.SelectedItem;

    if (selectedItem == null)

        MessageBox.Show("The parent directory must be selected");

    else

        string parentPath = (string) selectedItem.Tag;

        using (var store = IsolatedStorageFile.GetUserStoreForApplication())

            string path = Path.Combine(parentPath, DirectoryNameTextBox.Text);

            store.CreateDirectory(path);

            CreateTreeViewItem(DirectoryNameTextBox.Text, path, selectedItem);

The key class for using isolated storage is the IsolatedStorageFile class. Its GetUserStoreForApplication method returns an instance of this class which represents the application's isolated storage saved for the current user.
To make simpler adding new directories, store directories' paths in the Tag property of TreeViewItem objects.

Test adding new directories:

The TreeView control must be filled at the startup of the application:

public MainPage()

    InitializeComponent();

    PrepareTreeForIsolatedStorage();

private void PrepareTreeForIsolatedStorage()

    using (var store = IsolatedStorageFile.GetUserStoreForApplication())

        PrepareTreeForDirectory(store, RootDirectoriesTreeViewItem, "");

private void PrepareTreeForDirectory(IsolatedStorageFile store, TreeViewItem item, string path)

    string[] dirs = store.GetDirectoryNames(Path.Combine(path, "*"));

    foreach (string dir in dirs)

        string dirPath = Path.Combine(path, dir);

        TreeViewItem dirItem = CreateTreeViewItem(dir, dirPath, item);

        PrepareTreeForDirectory(store, dirItem, dirPath);

Create a list of files stored in the selected directory:

Add a ListBox control to the center cell of the grid:

<ListBox

    x:Name="FilesListBox"

    Grid.Column="2"

    SelectionChanged="FilesListBox_SelectionChanged"

/>

Write C# code for adding files to the selected directory of the isolated storage. The files will be chosen by the user using the standard dialog box for opening files (represented in Silverlight by the OpenFileDialog control):

private void DirectoriesTreeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)

    if (DirectoriesTreeView != null && DirectoriesTreeView.SelectedItem != null)

        string path = (string)((TreeViewItem)DirectoriesTreeView.SelectedItem).Tag;

        ListFiles(path);

private void ListFiles(string path)

    using (var store = IsolatedStorageFile.GetUserStoreForApplication())

        string[] files = store.GetFileNames(Path.Combine(path, "*.*"));

        FilesListBox.ItemsSource = files;

private void AddFileButton_Click(object sender, RoutedEventArgs e)

    if (DirectoriesTreeView.SelectedItem == null)

        MessageBox.Show("The target directory must be selected");

    else

        string dirPath = (string)((TreeViewItem)DirectoriesTreeView.SelectedItem).Tag;

        var openFileDialog = new OpenFileDialog();

        if (openFileDialog.ShowDialog() == true)

            FileInfo fileInfo = openFileDialog.File;

            using (var store = IsolatedStorageFile.GetUserStoreForApplication())

                Stream loadStream = fileInfo.OpenRead();

                string filePath = Path.Combine(dirPath, fileInfo.Name);

                IsolatedStorageFileStream saveStream = store.CreateFile(filePath);

                CopyStream(loadStream, saveStream);

                saveStream.Close();

                loadStream.Close();

            ListFiles(dirPath);

private void CopyStream(Stream loadStream, Stream saveStream)

    const int bufferSize = 1024 * 1024;

    byte[] buffer = new byte[bufferSize];

    int count = 0;

    while ((count = loadStream.Read(buffer, 0, bufferSize)) > 0)

        saveStream.Write(buffer, 0, count);

Test the application for small files (with size smaller then 1MB):
When you click using the right mouse button on the application and choose the 'Silverlight' option, in the 'Microsoft Silverlight Configuration' window you can check the current sizes and quotas of all Silverlight application using the isolated storage running in the system for the user:
The quota really works, when you try to add a big file, an exception is thrown:

The quota for the isolated storage can be increased, but the user must agree:

The idea seems to be very simple - before trying to create a new file, check the available free space in the isolated storage and ask for more space if necessary:

var openFileDialog = new OpenFileDialog();

if (openFileDialog.ShowDialog() == false)

    FileInfo fileInfo = openFileDialog.File;

    using (var store = IsolatedStorageFile.GetUserStoreForApplication())

        if (fileInfo.Length > store.AvailableFreeSpace)

            if (!store.IncreaseQuotaTo(store.Quota + fileInfo.Length - store.AvailableFreeSpace))

                MessageBox.Show("Increasing quota rejected");

                return;

        Stream loadStream = fileInfo.OpenRead();

        string filePath = Path.Combine(dirPath, fileInfo.Name);

        IsolatedStorageFileStream saveStream = store.CreateFile(filePath);

        CopyStream(loadStream, saveStream);

        saveStream.Close();

        loadStream.Close();

    ListFiles(dirPath);

Unfortunately, the IncreaseQuotaTo method always returns false when called once the OpenFileDialog has been shown. Also, calling the IncreaseQuotaTo method before the OpenFileDialog fails the dialog. These limitations make our application impossible to write in an elegant manner :(
- Add another button which will ask the user to increase the quota in case of less than 10MB free space:
```
private void IncreaseIsolatedStorageButton_Click(object sender, RoutedEventArgs e)
```
```
{
```
```
    const int requiredFreeSpace = 10 * 1024 * 1024;
```
```
    using (var store = IsolatedStorageFile.GetUserStoreForApplication())
```
```
    {
```
```
        if (store.AvailableFreeSpace < requiredFreeSpace)
```
```
        {
```
```
            store.IncreaseQuotaTo(store.Quota + requiredFreeSpace - store.AvailableFreeSpace);
```
```
        }
```
```
    }
```
```
}
```
- Now, you have a chance to see the standard dialog box asking the user to increase the quota:

In the last empty cell in our grid we will put an Image where a preview of a selected file will be displayed (of course, in case of selecting an image file).

Add an Image control embedded in a ScrollViewer control:

<ScrollViewer

    Grid.Column="4"

    HorizontalScrollBarVisibility="Auto"

    VerticalScrollBarVisibility="Auto"

    <Image

        x:Name="PreviewImage"

        Stretch="None"

/>

</ScrollViewer>

In response for the SelectionChanged event of the ListBox control containing the list of files, try to load the file as an image and display the image in the new control:

private string GetSelectedFilePath()

    string path = null;

    if (FilesListBox.SelectedItem != null || DirectoriesTreeView.SelectedItem != null)

        path = Path.Combine(

            (string) ((TreeViewItem) (DirectoriesTreeView.SelectedItem)).Tag,

            (string) FilesListBox.SelectedItem);

    return path;

private void FilesListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

    string path = GetSelectedFilePath();

    if (path != null)

        DeleteFileButton.IsEnabled = true;

        GetFileButton.IsEnabled = true;

        using (var store = IsolatedStorageFile.GetUserStoreForApplication())

            var stream = store.OpenFile(path, FileMode.Open);

try

                var bitmapImage = new BitmapImage();

                bitmapImage.SetSource(stream);

                PreviewImage.Source = bitmapImage;

            catch (Exception)

                PreviewImage.Source = null;

            stream.Close();

    else

        DeleteFileButton.IsEnabled = false;

        GetFileButton.IsEnabled = false;

Test if it works:

Deleting a file (and also a directory) from the isolated storage is quite simple:

Write the following code in reponse for the Click event of the 'Delete file' button:

private void DeleteFileButton_Click(object sender, RoutedEventArgs e)

    string path = GetSelectedFilePath();

    if (path != null)

        if (MessageBox.Show(

            string.Format("Confirm deleting the file:\n    {0}", path),

            "Deleting Confirmation",

            MessageBoxButton.OKCancel) == MessageBoxResult.OK)

            using (var store = IsolatedStorageFile.GetUserStoreForApplication())

                store.DeleteFile(path);

            string dirPath = (string) ((TreeViewItem) DirectoriesTreeView.SelectedItem).Tag;

            ListFiles(dirPath);

Compile an test the application:

The last thing to be done in our application is 'getting files', i.e. copying from the isolated storage back to the file system.

Using the code already written, the task is quite simple. The SaveFileDialog control can be used here to allow the user to select the target place for the file:

private void GetFileButton_Click(object sender, RoutedEventArgs e)

    string path = GetSelectedFilePath();

    if (path != null)

        var saveFileDialog = new SaveFileDialog();

        if (saveFileDialog.ShowDialog().Value)

            Stream saveStream = saveFileDialog.OpenFile();

            using (var store = IsolatedStorageFile.GetUserStoreForApplication())

                var loadStream = store.OpenFile(path, FileMode.Open, FileAccess.Read);

                CopyStream(loadStream, saveStream);

                loadStream.Close();

            saveStream.Close();

The SaveFileDialog appears as expected, unfortunately there is no way to set the default name of the file to be saved:

Application exceptions

The 'IsolatedStorage' application lacks of error handling. Obviously, all places in the source code, where an exception can occured, should be wrapped in the try/catch blocks. The idea of using the UnhandledException described below should never replace a good habit to catch exceptions!
In the application class, the UnhandledException event can be used to react to any uncaught exception.

The default implementation of the Application object (generated by Visual Studio template) contains the source code reporting the error to the browser's exception mechanism:

public App()

    this.Startup += this.Application_Startup;

    this.Exit += this.Application_Exit;

    this.UnhandledException += this.Application_UnhandledException;

    InitializeComponent();

private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)

    // If the app is running outside of the debugger then report the exception using

    // the browser's exception mechanism. On IE this will display it a yellow alert

    // icon in the status bar and Firefox will display a script error.

    if (!System.Diagnostics.Debugger.IsAttached)

        // NOTE: This will allow the application to continue running after an exception has been thrown

        // but not handled.

        // For production applications this error handling should be replaced with something that will

        // report the error to the website and stop the application.

        e.Handled = true;

        Deployment.Current.Dispatcher.BeginInvoke(delegate { ReportErrorToDOM(e); });

private void ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e)

try

        string errorMsg = e.ExceptionObject.Message + e.ExceptionObject.StackTrace;

        errorMsg = errorMsg.Replace('"', '\'').Replace("\r\n", @"\n");

        System.Windows.Browser.HtmlPage.Window.Eval(

            "throw new Error(\"Unhandled Error in Silverlight Application " + errorMsg + "\");");

    catch (Exception)

Thanks to the above source code, uncaught Silverlight exceptions can be displayed using the browser's tools, e.g.:
Note the line setting the Handled property of the event args to true. Thanks to this line, the AppDomain of the application continues to work and the onError handler set in the HTML or JavaScript code embedding the Silverlight application in the Web page is not called.

[Source code]