Embedding a Web Browser in a Windows 8 Metro C# Application

As you go through the process of building your Metro app, you will probably run into the need to display HTML content.  If you haven’t had the need yet, you are probably wondering, why would you want to display HTML content instead of just embedding the content within a page of your app.  There are several different reasons why, including easy access to your app’s website, help content, account creation, etc.  Regardless of what HTML content you need to display, the XAML WebView provides easy access.

To get started, you will need to place a WebView control within the desired page, within the Grid tag, as shown below.  This markup will display the WebView and use all of the space available.

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <WebView Name="wv"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    </Grid>

Next you will need to tell the WebView what content you want to display.  You can either make use of the Source property in the markup or set the Source in the C# code as shown below.

 wv.Source = new Uri("http://www.google.com/", UriKind.Absolute);

After setting the source property, the WebView will then display the desired page.  In this case, the home page for Google.com.  

If the content you wish to display is available on the web, then you don’t need to do anything else with the WebView.  However, you may need to auto generate the HTML/JavaScript within your app and you will be happy to hear that the WebView supports displaying this content too.  After going through the process of generating the HTML/JavaScript you wish to display, you can display the content by calling the NavigateToString method as shown below:

wv.NavigateToString(“<html>My Content Here</html>”);

While the content is being displayed within the WebView, it will operate just as it would if it originated from the web.  Since you are generating the content to be displayed, you may need to interact with the JavaScript on the page.  You can execute JavaScript method using the InvokeScript method and receive notifications back by using the ScriptNotify event.

Conculsion

Displaying HTML content, while simple, provides a very powerful tool for interacting with users.  The WebView can also be a very powerful tool to reduce the overall development time of your app.  As suggested above, providing easy access to online help materials, is one way in which you can save quite a bit of time in developing your app.  In addition, if you build apps that multi-platform, the WebView may be one way of allowing users to interact with one another such as app forums, etc.



Related Articles

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • At present, the most commonly deployed parallel file system is Lustre, and its adoption is growing across the HPC industry. According to Intersect 360 Research, "Through its leadership and involvement with OpenSFS, Cray advocates for the development of features that drive efficient performance at scale." Moreover, with help from Cray and OpenSFS, Lustre is gaining greater adoption across broader commercial application categories. As data and I/O requirements grow in commercial markets, technology vendors -- …

  • The 2014 State of DevOps Report — based on a survey of 9,200+ people in IT operations, software development and technology management roles in 110 countries — reveals: Companies with high-performing IT organizations are twice as likely to exceed their profitability, market share and productivity goals. IT performance improves with DevOps maturity, and strongly correlates with well-known DevOps practices. Job satisfaction is the No. 1 predictor of performance against organizational …

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date