In this article we are going to see how to store a static content in a Isolated Storage and access the storage to load the content in a WebBrowser control programmatically. In our earlier article we have seen how to access the static content which is available locally as a file content which is part of the solution folder. The advantage over this storing the file as a static content in an Isolated Storage is it can be accessible only by the application and can be accessed with the file name directly. Let us see the steps on how to achieve this task in our Windows Phone application development. Open Visual Studio 2012 IDE and create a new Windows Phone project with a valid project name as shown in the screen below.     [more]

Clicking on OK will create the project and the solution with the list of default files and folders that are required to run the application. It will take some time to create these files based on your system configuration, so once everything is ready we can see the Visual Studio IDE with the project as shown in the screen below.

Now let us add some control, basically a button to trigger loading the static content and a web browser control to show the static content as shown in the code below.

XAML Code:

<!–TitlePanel contains the name of the application and page title–>
       <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
           <TextBlock x:Name="ApplicationTitle" Text="F5debug How to Series" Style="{StaticResource PhoneTextNormalStyle}"/>
           <TextBlock x:Name="PageTitle" Text="WebBrowser" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
       </StackPanel>

       <!–ContentPanel – place additional content here–>
       <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
           <phone:WebBrowser x:Name="WB1" HorizontalAlignment="Left" Margin="24,124,0,0" VerticalAlignment="Top" Width="406" Height="402"/>

       </Grid>
       <Button Content="Load Static Page" HorizontalAlignment="Left" Margin="69,22,0,0" Grid.Row="1" VerticalAlignment="Top" Width="347" Click="Button_Click"/>

Till now it was the same steps which we followed in our earlier article, but here we need to store the Static Content in the Isolated Storage and read the file from the storage to show it in the WebBrowser. First we need to write the below code which basically stores the files in the Isolated Storage, it takes the MyApp.html file and store the file directly to the Isolated Storage. Use the below two methods in any of the projects which basically requires storing files, data or any thing on to the Isolated Storage.

C# Code:

private void SaveFilesToIsoStore()
        {
            string[] files = { "MyApp.html" };

            IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication();

            if (false == isoStore.FileExists(files[0]))
            {
                foreach (string f in files)
                {
                    StreamResourceInfo sr = Application.GetResourceStream(new Uri(f, UriKind.Relative));
                    using (BinaryReader br = new BinaryReader(sr.Stream))
                    {
                        byte[] data = br.ReadBytes((int)sr.Stream.Length);
                        SaveToIsoStore(f, data);
                    }
                }
            }
        }

        private void SaveToIsoStore(string fileName, byte[] data)
        {
            string strBaseDir = string.Empty;
            string delimStr = "/";
            char[] delimiter = delimStr.ToCharArray();
            string[] dirsPath = fileName.Split(delimiter);

            //Get the IsoStore.
            IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication();

            //Re-create the directory structure.
            for (int i = 0; i < dirsPath.Length – 1; i++)
            {
                strBaseDir = System.IO.Path.Combine(strBaseDir, dirsPath[i]);
                isoStore.CreateDirectory(strBaseDir);
            }

            //Remove the existing file.
            if (isoStore.FileExists(fileName))
            {
                isoStore.DeleteFile(fileName);
            }

            //Write the file.
            using (BinaryWriter bw = new BinaryWriter(isoStore.CreateFile(fileName)))
            {
                bw.Write(data);
                bw.Close();
            }
        }

Now in the button click event, first call the SaveFilestoIsoStore method which basically stores the file which we want to access in our webbrowser. Then call the webbrowsers navigate method to get the static content shown in the webbrowser as shown in the code below.

C# Code:

private void Button_Click(object sender, RoutedEventArgs e)
      {
          SaveFilesToIsoStore();
          WB1.Navigate(new Uri("MyApp.html", UriKind.Relative));
      }

Now we are done with the code, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the Windows Phone emulator with the application and the expected outputs as shown in the screen below.