How to use Html Div in silverlight using Silverlight Html bridge

We all understand that Silverlight has not matured into a full blown Line of Business Applications platform and time and again we have to interact with HTML Dom for most of our work. I've tried to consolidate how to access an existing element and add a new div element dynamically. Let's look at how to access the existing elements and do some modifications to it.

This is the DIV you are supposed see some changes when you click buttons. But this is not working yet because of incompatibility with blogger and the xap hosting.

Accessing the existing elements:
Silvelright packages all the Html Dom content under the System.Windows.Browser assembly/namespace. Let's assume we have a div in our Html page where the silverlight control is going to be hosted.
I've tried both setting as well as getting the innerhtml property of the div control we used. The code for the Div in your html or aspx page is added as follows.

<div id="silverlightdiv">
<p>hello world</p>
</div>

Now our Page.xaml.cs will be able to access the "silverlightdiv" using HtmlElement properties. A short snippet for getting and setting the property are as below.
Getting the InnerHtml property:

HtmlElement mysilverlightdiv = HtmlPage.Document.GetElementById("silverlightdiv");
Object obj = mysilverlightdiv.GetProperty("innerhtml");
String str = obj.ToString();
MessageBox.Show(str);

Setting the InnerHtml property:

HtmlElement mysilverlightdiv = HtmlPage.Document.GetElementById("silverlightdiv");
mysilverlightdiv.SetProperty("innerhtml", txtHtmlText.Text);

This technique do not use the overlay (which needs the windowless=true to be set), but uses the HTML Dom bridge provided by silverlight. Also for setting the CSS properties of the div should be done using the SetStyleAttribute funtion of the HtlmElement class. A look at the code snippet for changing an attribute is as follows.
Setting a CSS Property:

HtmlElement mysilverlightdiv = HtmlPage.Document.GetElementById("silverlightdiv");
mysilverlightdiv.SetStyleAttribute("color", "red" );


Download Source

You can download the Visual Studio 2008 control source file/project from HtmlSilverlight.

Html Host control in Silverlight

The revised and latest version of this control can be found at revised silverlight htmlhost.

It is generally a problem in silverlight to use the HTML content. First and foremost problem is the trouble with setting the position of the control based on the silverlight page we are creating. Also it is really clunky to write the code to read and write your div details by accessing the HTML DOM objects.

Ofcourse Silverlight exposes these HTML DOM objects in the System.Windows.Browser namespace by the classes like HTMLDocument, HTMLElement, HTMLPage etc., These classes provide functions like CreateElement, which can create the controls we want. I've used this function to create the IFRAME which I finally position properly on the page using some properties exposed.

This is a clean way of using the HTML IFrame in your code. Feel free to use the source and add more functionality. If you think your new functionality may be useful to someone else, pls let me know by dropping an email to muthu.v (@) g mail dot com.

How the Html Host control was built:

This creates a DIV inside the HTMLPage.Document.Body and adds an IFRAME object to the DIV control. This uses the classes like HtmlDocument, HtmlElement, HtmlPage for creating these and adds them to the HTML Document object. This has been tested to work fine in IE8 and FireFox. If any of you find any issues and fixes, pls let me know I'll fix and upload again. That will be useful to our programming community.

I've not added much of design time support. So after adding the control, you need to call a function InitControl() for this to be rendered. Also positioning of the control can be done by using the properties HtmlControlTop and HtmlControlLeft properties. Width and Height are exposed as "Width" and "Height" only.
How to use the Html Host control:

1. Create a new Silverlight application or add a new Silverlight User Control (page) into your existing application.
   
2. Reference the FreeHtmlHost.dll in the project.
   
3. Add the namespace reference to the silverlight user control on the top like this.
   

   xmlns:cust="clr-namespace:FreeHtmlHost;assembly=FreeHtmlHost"
   

4. Add the control in the location you want like this. Adjust the position of the controls according to your needs.
   
<cust:FreeHtmlHost x:Name="customHost" Width="620" HtmlControlTop="50" HtmlControlLeft="30" Height="500" NavigationUrl="http://www.microsoft.com"/>

   


5. Call the customHost.InitControl(); function in the Page load event of the control or the constructor of your Page.xaml.cs file after the 'InitializeComponent()' function.

The isWindowless property determines whether the HTML is displayed on top of silverlight. If set to true, the HTML controls behind the silverlight plugin are displayed and if false, the silverlight is displayed on top of HTML. This must be set to true while using this HTML host control.

There is another option of background=transparent which makes the background of the plugin to invisible. This option should be avoided as this might hit the performance of the app. We need not worry about this property for using this control. Leave it to its default.

There is another property enableHTMLAccess property which provides a layer of security to specify whether the silverlight code should access HTML DOM or not. This is by default set to true even if you don't use it.

Download Source:

You can download the Visual Studio 2008 control source file at FreeHtmlHost source.

The sample code using this library can be found at Sample Project.