Saving Files Locally in Silverlight - Page 1
       by kirupa  |  31 January 2010

For the first couple of Silverlight releases, what happened in your browser stayed in your browser. If you wanted to do something that went beyond your browser, you needed to rely on some server-side magic.

Things changed a bit with Silverlight 3. One of the features added in that version is the ability for you to write your data locally to disk. For an example of this, take a look at the following application, fill in the first/last name fields, and hit the Save button:

Get Microsoft Silverlight

[ Awesome "SmallWorld" art by Daniel Cook (Lostgarden.com) ]

When you hit the Save button, you will see a Save As dialog appear:

[ the standard Save As dialog will appear ]

Use this dialog like you would any other Save As dialog. Pick a location and save the file. Once the file has been saved, open it up in a text or XML editor. You whould see something that looks similar to the following:

[ the data that gets saved ]

When you hit the Save button, the information you specified in the First name and Last name text fields was written into an XML file that you saved to disk.

In this tutorial, you will learn how to do all of that.

The Game Plan
There are several steps involved with making all of this work. The first part is the UI where you enter the data and invoke the Save command. The second part is displaying the dialog that allows you to save a file to your disk. The third and final part is creating the XML data and having it be saved. Let's start with the easiest part, the UI.

Creating the UI
I am not going to go into great detail about how the UI is created, but I will briefly introduce the star players - the text fields and button. Create a new Silverlight application in Blend and draw out two textboxes and a button:

[ it doesn't get more plain than this ]

 You can go a little overboard and add some additional visual details like I've done below:

[ something a bit more elaborate ]

Regardless of what your UI looks like, you need to name your two textboxes. Give one of your textboxes the name firstNameText, and give your other textbox the name lastNameText.

When your button is clicked, we want to display the Save As dialog and save whatever data was enteired into your firstNameText and lastNameText fields. To do all of that, you need to set the Click event on your Button to point to an event handler. Click on your button, click on the Events button in the Properties Inspector, find the Click event, and enter the event handler name SaveFile:

[ associate your button's Click event with the SaveFile event handler ]

Once you have entered SaveFile for your button's event handler for the Click event, you will be taken to the code view where the event handler will be created for you:

private void SaveFile(object sender, RoutedEventArgs e)
{
 
}

This is pretty much all you have to do on the UI front for all of this. What we are going to do next is begin adding the code to make the UI functional.

Onwards to the next page!


1 | 2 | 3 | 4




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.