Working with the XAML WebView Control

Once you start working with the Windows 8 Store application, soon you will find yourself with the requirement to show HTML pages into your native Windows 8 Store App. And sure thing, that first thing that comes to your mind is, is there any component out there which does this!! And in fact, there is.

Microsoft's Windows 8 team has provided as with the component called WebView.In this blog post we will start examining the basic features of this WebView component and in new few blog posts we will see some of the advanced scenario with this Control.

Creating The Windows 8 Application

So, to start with let's create a new Windows 8 Store Application. Certainly we will be using XAML and C# as our platform because that is where we have the issue o displaying the HTML pages.

Next, open the solution explorer and look for the page MainPage.xaml

Let's go ahead and modify this page to have one WebView Control and a Button that will load the page for us in the WebView control.

Add a WebView Control

We have also attached click event our button and following is the code for the Button's click event.

 

private void Load_Click(object sender, RoutedEventArgs e)
{
  Uri url = new Uri("http://www.bing.com/");
  bingSearchView.Navigate(url);
}

To navigate to the desired page all you need to do is construct the new Uri object passing the URL as string and invoke the Navigate method on the WebView component. Go ahead and run the application. I am using the Simulator for demo purposes. Once the application is launched, click the Load button as you should see the WebView component opening up the Bing page.

Get Notified When Loading Is Complete

Now, once we have the page loaded properly,let's start looking into some advanced scenarios. For example when we are loading external pages, they might take bit longer to finish loading completely and we might want to wait until the page is loaded completely. We can use LoadCompleted event provided by WebView component.

 

private async void bingSearchView_LoadCompleted(object sender, NavigationEventArgs e)
{
   MessageDialog messageDialog = new MessageDialog("The Page Loading Is Completed", e.Uri.ToString());
   await messageDialog.ShowAsync();
}

Run the application again and let's see what happens this time. As soon as the page is finished loading you should see the message box as screen shot below.