How to display static web content using the WebBrowser control for Windows Phone 8

  • Article

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

You can use a WebBrowser control to display formatted, static content inside an application. For example, a developer may want to include help text inside an application package that a user can access at any time. Or, you can use a WebBrowser control to display static web content that an application has saved into isolated storage using the SaveToString()()() method.

The following code sample describes how you can add a static piece of content from your application into isolated storage, and how to view it from isolated storage using the WebBrowser control. For more information about isolated storage, see Data for Windows Phone 8.

This topic contains the following sections.

Adding Static Content to Your Project

To add static content to your project

  1. Create an HTML file called readme.htm, with the following HTML code inside:

    <html>
   <head><title>Sample Readme File</title></head>
   <body>
      <p>Sample Readme Content</p>
   </body>
</html>

  2. Open a new or existing solution in Visual Studio.

  3. Right-click the name of your project in the Solution Explorer, click Add, and then click Existing Item.

  4. Navigate to the location of the readme.htm file, select it, and click Add.

  5. Click the name of the file in the Solution Explorer. Confirm that the Build Action section in the Properties window says Content.

Adding Namespaces

Add the following resources in the code-behind page to include the following namespaces. For example, if you are using the main page with the default naming convention, you would update MainPage.xaml.cs.

using System.IO.IsolatedStorage;
using System.IO;
using System.Windows.Resources;

Adding a WebBrowser Control

You can add a WebBrowser control either using the tools or manually.

Adding a WebBrowser Control using the Tools

To add a WebBrowser control using the tools

  1. Open a new or existing solution in Visual Studio.

  2. Click the Toolbox while viewing the project's XAML file, and drag the WebBrowser control into the device image.

Adding a WebBrowser Control Manually

You can add a WebBrowser control manually by creating the WebBrowser control in XAML.

To create a WebBrowser control in XAML

  1. Open the XAML file for the page in which you will add the WebBrowser control. In Solution Explorer, right-click the .xaml file for the page (by default, the main page for a new application is called "MainPage.xaml") and select Open.

  2. Add a WebBrowser control inside of ContentGrid. For example:

    <Grid x:Name="ContentGrid" Grid.Row="1">
    <phone:WebBrowser HorizontalAlignment="Left" Margin="20,50,0,0" Name="webBrowser1" VerticalAlignment="Top" Height="500" Width="430" />
</Grid>

Adding Code to Add Files to Isolated Storage

Modify the code-behind page to include the following two functions, which assist in adding static files to isolated storage. For example, if you are using the main page with the default naming convention, you would update MainPage.xaml.cs.

    private void SaveFilesToIsoStore()
    {
        //These files must match what is included in the application package,
        //or BinaryStream.Dispose below will throw an exception.
        string[] files = {
            "readme.htm"
        };

        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();
        }
    }

Adding the Remaining Code

Modify the code-behind page to update and include the following two functions, which add the static files to isolated storage, and display the content in the embedded WebBrowser control. You will need to overwrite the existing MainPage function.

public MainPage()
{    InitializeComponent();

    SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

    webBrowser1.Loaded += WebBrowser_OnLoaded;
}

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