In this article we are going to see how to use the WebBrowser control to display Static web content stored locally. Static web content can be of any piece of information, say if we need show an How to of an application in a content page that is stored locally, we can use the WebBrowser control to show the content which is static to the application. Webbrowser control has the flexibility to take the static or dynamic content and show over the screen. In this article we will see how to use the static content that is available locally with in the project. 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"/>

Now in the button click event let us try to load the static page, before which we will create a web page locally which is static by clicking on Add – New Item and click on text file and rename the file to MyPage.html and create a new html file which has the static content basically few html tags to show some content as shown in the screen below.

Write the below code in the button click event of the page which basically calls the Webbrowsers Navigate method and pass the local URI which basically is the path of the local page which should be loaded on the webbrowser as shown in the code below.

C# Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using F5debugHowto61.Resources;

namespace F5debugHowto61
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

        }

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

Now we are done with our 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.