WebBrowser Control Based UI for Windows Applications

vikashparida

Rate me:

4.20/5 (4 votes)

20 Jun 2006CPOL3 min read

67.2K

830

Using a WebBrowser control with interactivity to provide a rich interface in Windows Forms applications

Download demo project - 19.3 KB

Introduction

Using a form with many controls on it tends to make the application quite heavy on the system. During my working experience, I have found that a lot of text boxes or a grid view with many rows slows down the application considerably and affects the responsiveness of the application.

I decided to experiment by using the WebBroswer control available in Visual Studio 2005 to provide a rich GUI. In the demo application, I display an XML file, using an XSL Transform. This XML file could be received by a client from a server, or generated. In order to update the GUI, the developer would just have to call a Refresh method.

Setting Up the WebBrowser Control

Put a WebBrowser control on your form named browser. We need to make this browser transfer control to event handlers when the user clicks something on the page displayed. We need to set a few properties in order to accomplish this. First of all, in the form's constructor we need to set the scripting object of browser as the form.

browser.ObjectForScripting = this;

The form's visibility to COM has to be set to true. This can be done adding the ComVisible attribute to the class. Add [ComVisible(true)] just before the class declaration:

[ComVisible(true)]
    public partial class frmMain : Form
    {

Creating the XSLT

The XML and XSLT files used in the demo are taken from W3Schools XSLT Tutorial.

I have slightly changed the XML file to include id's for each cd element. The modified file looks like this:

XML

<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
    <cd>
        <id />1</id />
        <title>Empire Burlesque</title>
        <artist>Bob Dylan</artist>
        <country>USA</country>
        <company>Columbia</company>
        <price>10.90</price>
        <year>1985</year>
    </cd>
    <cd>
        <id>2</id>
        <title>Hide your heart</title>
...

In the XSLT file, I have replaced...

XML

<td><xsl:value-of select="title"/></td>

... with:

XML

<td>
  <xsl:for-each select="title">
    <span>
      <xsl:attribute name="onclick">
        <xsl:value-of select="concat('window.external.ShowDetails(', ../id,')')"/>
      </xsl:attribute>
      <xsl:apply-templates/>
    </span>
  </xsl:for-each>
</td>

The line of interest here is:

XML

<xsl:value-of select="concat('window.external.ShowDetails(', ../id,')')"/>

This line hooks up the onclick event on the form to the window.external.ShowDetails(int id) function in the form. The XPath ../id passes the id of the clicked element to the ShowDetails function. After getting the id, you can process it as you want. In the demo, the element is displayed in a MessageBox.

Displaying the XML

I have tried two ways to display the Web page in the browser. Both of them involve using the EXtensible Stylesheet Language Transform(XSLT) to display the XML file in the browser.

In the first method, an XSL stylesheet reference is added to the XML document by adding the line...

XML

<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>

... at the top of the XML document below the namespace declaration.

XML

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
<catalog>
    <cd>
        <id>1</id>
        <title>Empire Burlesque</title>
...

Now to display the XML file in the browser, simply pass its URL to the Navigate method of the browser object. If the XML file and XSL file are in the same directory as the executable, the following code should do the trick:

browser.Navigate(Application.StartupPath + "\\cdcatalog.xml");

The second method involves a little more work, but is far more extendable than the first one. We create an HTML file, in which we load the XML file and transform it with the XSL file by using JavaScript. The code to do it is as follows:

HTML

<html>
<body>

<script type="text/javascript">

// Load XML 
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cdcatalog.xml")

// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cdcatalog.xsl")

// Transform
document.write(xml.transformNode(xsl))

</script>

</body>
</html>

By using this approach, the XML data in the file can be just a panel in the entire page. Multiple XML files and static content can be displayed on the page with great ease.

The sample demo uses this method to show the XML data.

Conclusion

The above implementation can be used to provide a very light UI in Windows applications. This is particularly of great advantage when the interaction is quite low, i.e. not many functions or events of control are used. Instead of creating or using UserControls to make applications look sleek, a WebBrowser can be used along with a well designed HTML page and XSL stylesheet to achieve the same.

History

20^th June, 2006: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

vikashparida

India

I am currently working with D. E. Shaw and Co. in Hyderabad. I completed my B.Tech. at Indian Institute of Technology, Kharagpur majoring in Manufacturing Science and Engineering.

I am a really hardcore gamer and play all sorts of computer games. I love to watch and play football.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.