How to embed HTML inside a Visual WebGui Silverlight application
In this “How to” we are going to see how we embed an HTML page inside a Visual WebGui Silverlight Application.
You should be familiar by now with What is Visual WebGui and What is Visual WebGui over Silverlight. It is recommended that you read “How to create a Visual WebGui Silverlight application” and other articles in our “Get Started with Silverlight” section.
The current Silverlight beta 2 version does not provide any methodology of combining HTML/DHTML elements and pages within Silverlight. There is always the option of floating an HTML above Silverlight or showing what’s “behind” Silverlight by specifying 0 opacity areas, however, dealing with multiple layers combining HTML/DHTML and Silverlight is a very difficult challenge .
Visual WebGui provides an internal capability of calculating the overlapping areas providing the best way currently possible with Silverlight 2 beta 2 of handling multiple HTML/DHTML and Silverlight layered application (using mixed surfaces, dialogs and popups) seamlessly.
To solve the problem we created a control called “HtmlBox”. To use this control we’ll first create a new VWG Silverlight application.
Open Form1, add an “HtmlBox” control and dock the control to fill the form.
Now, we’ll add some HTML code to our application to display on our form. Let’s add a new Html page to the project with this Html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<h2>Check list to this how to</h2>
<table style="width:100%;">
<tr>
<td>Check list</td>
<td> </td>
</tr>
<tr>
<td>Silverlight application</td>
<td>Yes</td>
</tr>
<tr>
<td>HtmlBox control</td>
<td>Yes</td>
</tr>
<tr>
<td>Dislpaly Html in silverlight</td>
<td>Yes</td>
</tr>
<tr>
<td>Set a url to the HtmlBox control</td>
<td>No</td>
</tr>
<tr>
<td>Display a html page from another site in a VWG Silverlight application</td>
<td>No</td>
</tr>
</table>
</body>
</html>
In the properties window set the “Copy to Output Directory” property to “Copy if newer” so it will be copied to the application bin folder.
Next on the “Onload” event of the form, read the html file to a StreamReader.
And afterward set the content of the file to the Html property in the “HtmlBox” control.
StreamReader stream = new StreamReader(Context.Server.MapPath("\\") + "\\HTMLPage1.htm");
htmlBox1.Html = stream.ReadToEnd();
stream.Close();
Now run the application this is the result you will see.
Next we display the HTML from another site and not the HMTL itself. For this I’ve created a web site on my computer.
Take the link to this page and set the URL property in the “HtmlBox” control to it
htmlBox1.Url = http://localhost:2889/HTMLPage1.htm;
Let’s run the application again.
This is the “HtmlBox” displaying an Html page using URL.
As you can see every issue in our check list for this “How to” is done.
To summarize:.
We’ve seen how to use Visual WebGui “HtmlBox” to display Html inside a Visual WebGui application
using two techniques:
1. Html code.
2. URL to an Html page.
-- Eyal Albert @ Eyal.Albert (at) Gizmox.com
You can read the original how to here