In this article we are going to see how to access a website over the network and show the content in a WebBrowser control in Windows Phone application development. In our previous articles we have seen the different options to load static and dynamic contents that are stored locally or in an Isolated storage to a WebBrowser control. WebBrowser control has a method called Navigate which can be used to navigate to a specified website over the network which will show the website content. 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 webbrowser control and a button control to trigger the event to call the website to show the content on the webbrowser control 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 Web Page" HorizontalAlignment="Left" Margin="69,22,0,0" Grid.Row="1" VerticalAlignment="Top" Width="347" Click="Button_Click"/>

Next step is write the below code in the button click event which basically calls the Navigate method of the WebBrowser control with the website uri to which the content need to be shown in the WebBrowser control.

C# Code:

private void Button_Click(object sender, RoutedEventArgs e)
       {
           WB1.Navigate(new Uri("https://f5debug.net", UriKind.Absolute));
       }      

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.