Windows Phone 7 Development : WebBrowser Control - Saving Web Pages Locally

You can also save the contents of web sites and web pages to a Windows Phone 7 as strings of HTML commands, using isolated storage and the SaveToString method of the WebBrowser control. This approach saves only the HTML on a page (of course, you probably already guessed that from the name of the method!) and ignores its images and CSS files. 

The next walkthrough will show you how to save an HTML web page locally and then load it at a later time.

1. Open the WebBrowserSample project and bring up MainPage.xaml in the design window.

2. Add two buttons to the Windows Phone 7 design surface. Change the Content property of the top button to "save to local storage." Change the Content property of the bottom button to "load saved content."

3. Make sure to change the names of both buttons. You can change the name in the Properties window by clicking next to the "Button" text. Name the top button "btnSave" and name the bottom button "btnLoad".

4. Next, let's write the event handler code for the Save button click. Double-click the top button to bring up MainPage.xaml.cs in the code view. Change the btnSave_Click method to be identical to the following:

   private void btnSave_Click(object sender, RoutedEventArgs e)
   {
           string strWebContent = webBrowser1.SaveToString();
           SaveStringToIsoStore(strWebContent);
   }

   
   

5. Next comes event handler code to load the previously saved web page. Double-click the bottom button and make the btnLoad_Click method look like the code block here.

   private void btnLoad_Click(object sender, RoutedEventArgs e)
   {
       webBrowser1.Navigate(new Uri("web.htm", UriKind.Relative));
   }

   
   

6. We need to add the implementation of the SaveStringToIsoStore method that will perform the actual save of the HTML string to a file in the local storage.

   private void SaveStringToIsoStore(string strWebContent)
           {
               IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication();
   
               //remove the file if exists to allow each run to independently write to
               // the Isolated Storage
               if (isoStore.FileExists("web.htm") == true)
               {
                   isoStore.DeleteFile("web.htm");
               }
   
   					  

   
   
   

   StreamResourceInfo sr = new StreamResourceInfo(new
   MemoryStream(System.Text.Encoding.UTF8.GetBytes(strWebContent)), "html/text");
               using (BinaryReader br = new BinaryReader(sr.Stream))
               {
                   byte[] data = br.ReadBytes((int)sr.Stream.Length);
                   //save file to Isolated Storage
                   using (BinaryWriter bw = new BinaryWriter(isoStore.CreateFile("web.htm")))
                   {
                       bw.Write(data);
                       bw.Close();
                   }
               }
           }
   
   					  

   
   

7. Make sure the button1_Click event looks identical to the one here:

   private void button1_Click(object sender, RoutedEventArgs e)
   {
      webBrowser1.Navigate(new Uri
       ("http://www.bing.com/images/search?q=cars " + textBox1.Text,
       UriKind.Absolute));
   }

   
   

8. You are now ready to test the application. Press F5 to run it, type "Ford Mustang" in the text box, and press the "Show It!" button. Photos of the Ford Mustang should appear in the browser window. Next, press "Save Content to Isolated Storage" button. Then, erase the word "Mustang" from the text box, leaving only "Ford" and pressing "Show It!" Our friendly reminder that we need to provide more information pops up. Finally, press "Load Saved Content" to show the (distorted) thumbnails of the Ford Mustang.

Notice that the content is distorted since only HTML of the web page is saved. Many CSS stylesheets that control positioning of the elements and their look are not persisted as part of the SaveToString method.