The Save File Dialog is a commonly used modal dialog in desktop and web applications.  Previous versions of Silverlight used the internal storage as the primary yet limited area for storing data.  Silverlight 3 now supports a Save File Dialog to save data to their hard drive.

In this tutorial, we will show you how to use the Save File Dialog for your applications.

Using the Save File Dialog

1. Create a new Silverlight Application.
2. Add the following code snippet to MainPage.xaml.  This will design a basic form that accepts a Title and Message from the user.

   <Grid Background="#33000000">

       <Grid.RowDefinitions>

           <RowDefinition Height="Auto"  />

           <RowDefinition Height="*" />

           <RowDefinition Height="30" />

       </Grid.RowDefinitions>

       <Grid.ColumnDefinitions>

           <ColumnDefinition Width="Auto" />

           <ColumnDefinition Width="*" />

       </Grid.ColumnDefinitions>

       <TextBlock Text="Title: " Margin="5" />

       <TextBox x:Name="title" Grid.Column="2" Margin="5" />

       <TextBlock Grid.Row="1" Text="Message: " Margin="5" />

       <TextBox x:Name="message" Grid.Row="1" AcceptsReturn="True" TextWrapping="Wrap" Grid.Column="2" Margin="5" />

       <Button Grid.Row="2" Grid.ColumnSpan="2" Content="Save" HorizontalAlignment="Center" Width="75" Margin="5" Click="Button_Click" />

   </Grid>

3. Add the System.IO and System.Text namespaces in MainPage.xaml.cs.  We will be using the StreamWriter class to save the contents to the file.
4. Add the click event in MainPage.xaml.cs.  The event parses the strings from the textboxes and displays the SaveFileDialog to accept the user's input. 

   private void Button_Click(object sender, RoutedEventArgs e)

   {

       string contents = String.Format("Title: {0}\n\r\n\rMessage: {1}", title.Text, message.Text);

       SaveFileDialog sfd = new SaveFileDialog();

       bool? result = sfd.ShowDialog();

       if (result == true)

       {

           using (StreamWriter stream = new StreamWriter(sfd.OpenFile()))

           {

               stream.Write(contents);

               stream.Close();

           }

       }

   }

5. Compile and run the program.

   

6. Enter the Title and Message and click Save.
7. The Save File dialog opens and prompts to save the file on your computer. Note that the Save as type dropdown list is currently empty.

   

8. Save the file as sample.txt.
9. Close the program and open the saved text file.

   

Customizing the Save File Dialog

The default functionality of the Save File Dialog displays all the files in the folder.  The SaveFileDialog class uses the Filter property to filter the files based on the filter string.  The format of the Filter property is a vertical bar-separated list that contain the file types and descriptions. 

The following code snippet defines the Filter property to display all files.  The syntax is <LABEL>|<filter>|<LABEL>|<filter>|�, where <LABEL> is the description that appears in the dropdown list and <filter> is the file filter.

sfd.Filter = "All Files (*.*)|*.*";

If you plan on adding multiple filters, you will need to determine which one will be the default filter.  The FilterIndex property sets the default index to the dropdown list.  The property is 1-based, where 1 is the index to the first item in the dropdown list.

The following code snippet adds two filters (All Files and Text Files) to the dropdown list, with the Text Files being set as the default. Note that the FilterIndex is set to 2 because Text Files is the second item in the list.

SaveFileDialog sfd = new SaveFileDialog();

sfd.Filter = "All Files (*.*)|*.*|Text Files (*.txt)|*.txt";

sfd.FilterIndex = 2;

Add the Filter and FilterIndex properties to the dialog and run the program to get the following output.  The Save as Type dropdown list now has two filters. 

Conclusion

The Save File Dialog gives Silverlight applications the ability to send contents to the end users' machines.