Windows Phone 7 Development : Working with Isolated Directory Storage (part 1)

We'll begin by building an application to work with the local storage on a phone. The application, IsolatedStorageStoreImageDemo, whose UI is shown in Figure 1, demonstrates the basic functions available through the isolated storage APIs, including the following:

• Retrieve application-specific isolated storage

• Get isolated storage quota

• Save and retrieve isolated storage files

In this demo, when the "Get Image" button is clicked for the first time, the application checks to see whether there is enough space available in isolated storage. If there is, the image will be downloaded from the web site and then saved to isolated storage via isolated storage file stream. If the button is clicked again, the image will be loaded into an isolated storage file.

Figure 1. IsolatedStorageStoreImageDemo

You'll build the demo in three steps. First, you need to create a new Visual Studio project. Next you'll build the project's user interface and finish up by adding code to respond to commands from the user.

1. Creating the IsolatedStorageStoreImageDemo Project

To set up the IsolatedStorageStoreImageDemo project, follow the steps you've used for previous examples in this book:

1. Open Microsoft Visual Studio 2010 Express for Windows Phone on your workstation.

2. Create a new Windows Phone Application by selecting File => New Project on the Visual Studio command menu. Select the Windows Phone Application template, name the application "IsolatedStorageStoreImageDemo," and click OK, as shown in Figure 2.

   Figure 2. Windows Phone Application template for creating IsolatedStorageStoreImageDemo

   

2. Coding the User Interface

You'll first code the user interface, which we've chosen to implement in XAML. Sometimes it is faster to work with XAML than with managed code, especially when you're working with a simple example, like this one, which requires only a few controls. Go to the Solution Explorer, open MainPage.xaml, and replace the XAML you find there with the code that appears in the following sections.

2.1. Selecting the UI Resources

Begin by adding the following XAML markup to MainPage.xaml to identify where the resource to build the application's main page will be found.

<phone:PhoneApplicationPage

    x:Class="IsolatedStorageStoreImageDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

					  

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

Referencing the namespace as xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" allows you to use common Windows Phone controls such as text boxes, buttons, and list boxes to create the main page. The code snippet also includes a reference to a code-behind class (x:Class="IsolatedStorageStoreImageDemo.MainPage") that will handle the main page controls' events.

2.2. Building the Main Page and Adding Components

Next, to create the main application page and populate it with controls, add the following XAML markup to the preceding block of code, also in MainPage.xaml.

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitleGrid is the name of the application and page title-->
    <Grid x:Name="TitleGrid" Grid.Row="0">
        <TextBlock Text="IsolatedStorageStoreImageDemo"
                   x:Name="textBlockPageTitle"
                   Style="{StaticResource PhoneTextTitle1Style}"
                   FontSize="28" />
    </Grid>

    <!--ContentGrid is empty. Place new content here-->
    <Grid x:Name="ContentGrid" Grid.Row="1">

<Image Height="458" HorizontalAlignment="Left"
               Margin="20,134,0,0" Name="image1" Stretch="Uniform"
               VerticalAlignment="Top" Width="423" />
        <Button Content="Get Image" Height="70"
                HorizontalAlignment="Left" Margin="0,598,0,0"
                Name="btnGetImage" VerticalAlignment="Top"
                Width="443" Click="btnGetImage_Click" />
        <TextBox Height="72" HorizontalAlignment="Left"
                 Margin="12,29,0,0" Name="txtImageUrl"
                 Text="http://res1.newagesolution.net/Portals/0/twitter2_icon.jpg"
                 VerticalAlignment="Top" Width="460" />
        </Grid>
    </Grid>

</phoneNavigation:PhoneApplicationPage>

					  

Once you've loaded the XAML code for the main page, you should see the layout shown in Figure 3. Now it's time to use the Isolated Storage APIs to add behavior to the application, as you'll learn in the next section.

Figure 3. IsolatedStorageStoreImageDemo design view