Working with Isolated Storage, ListBox and DataTemplates

In my previous blog entry I was talking about how to write files to and read files from Isolated Storage. For this entry I want to dig a little deeper, for example I want to display a list that has been created in Isolated Storage. Each file in the list is going to be displayed in a hyperlink, so that I can click on it and then open up a second XAML page that will actually display the content of that file.

Let’s get started. I’ve created a new project and first of all I am going to add a ListBox that will list all of the files:

Within that ListBox I want to create something that is called Item Templates. So, I am going to create a new section called ItemTemplates. This is going to hold a definition for what every row in the list should look like. In this specific case I am going to create a DataTemplate, because I want to merge data together. Inside of this DataTemplate I am going to put a HyperlinkButton:

When the user clicks the fileLinkButton an event is fired off. I am not going to put a navigateUri for each item from the list into the XAML, instead I am going to capture the click event, then construct one and then pass it to the second page that I am also going to create at runtime. I am handling this event in the code behind.

In addition to the ListBox I am going to create a button. The button’s purpose is to load a series of three sample files into Isolated Storage:

The next thing I am going to do is to add a second page:

Now I am going to the code behind, I am navigating to my button click event handler and add some code:

This is the code to load the first sample file. Considering I need three of them, I better create a little helper method to keep my code as simple as possible:

So far, so good. But just creating those examples is not going to be enough to populate the ListBox. I have to take care of that myself. And I need to do that in two places.

First, whenever a sample file is created I want to make sure that it is bound into the ListBox. But also when the application first loads, I want to display the samples. In Order to do that I simply create a loaded event using the properties window. Then I am going to create a helper method called bindList where I am going to data-bind the names of each file in Isolated Storage. I am going to bind them to the ListBox:

Now that I have created the bindList helper method I want to put that into the loaded event and call it from my PhoneApplicationPage with that loaded event:

The line “bindList();” I now have to also put into the loadSamplesButton click event, immediately after where the files are created.

So, let’s have a quick look at my code. First whenever I click the loadSamplesButton and call the createSample helper method, this will create a new file with the defined fileName and fileContent to Isolated Storage. I am also making sure that the file doesn’t already exist in which case I wouldn’t want to overwrite it. If it doesn’t exist I create it. Then I am using a StreamWriter passing in that file reference, and then finally write to the file whatever was passed in to my helper method.

I create three files and then I call that bindList. What bindList does is simply going to appStorage and getting all the names of files that are in appStorage and stores them in an array of strings. Now that I have retrieved the fileNames I want to data-bind them to the ListBox.

Let’s see if it runs:

Nice, it just works. Now I have to make sure that the HyperlinkButtons work. With right-clicking on that fileNameLinkButton click event I can navigate to the event handler to take care of that action.

What I am going to do there is to construct a Uri on the fly and then pass it to that part of the Windows Phone API that knows how to navigate from one page to another. I am going to make use of a navigation service instead of the simple HyperlinkButton NavigateUri property:

I am just continuing to my SecondPage XAML code to add some controls there:

I have a TextBlock to display the content of each clicked HyperlinkButton and also a HyperlinkButton that is navigating me back to my MainPage. For this to work I have to create a loaded event here, too. Inside that loaded event I want to look for the file name, and then I am going to look on the flash drive of the phone in its Isolated Storage to retrieve the values that are inside of the passed in text file:

Let’s see if it works:



When I click a HyperlinkButton I am navigated to my SecondPage where the content of that just clicked HyperlinkButton is being displayed. Clicking on  the HyperlinkButton on the SecondPage brings me back to my MainPage. Just how it is supposed to work.


To be continued…



  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: