Dynamically creating a DIV control in Silverlight

By now everyone would have gotten a clear idea that HtmlPage, HtmlDocument along with HtmlElement is the way to display a div item in silverlight pages. Now here are few samples to create some controls dynamically from a silverlight page using Html Dom bridge.
For those who wonder what is the difference between a Html Silverlight Dom bridge and HTML Overlay, Html overlay needs the windowless parameter to be set and gives the rendering job to the browser, but Html Silverlight Dom model won't.
There is an excellent FAQ article by erikreitan on the Html and Java script in silverlight http://blogs.msdn.com/erikreitan/archive/2008/12/02/silverlight-html-bridge-faq.aspx. Take a look at this article when you get some time.

HtmlDocument doc = HtmlPage.Document;
HtmlElement dynamicDiv = doc.CreateElement("div");
dynamicDiv.SetAttribute("id", System.Guid.NewGuid().ToString());
dynamicDiv.SetStyleAttribute("height", "20px");
dynamicDiv.SetStyleAttribute("width", "800px");
dynamicDiv.SetProperty("innerhtml", "A small sample of dynamically added div from silverlight");
doc.Body.AppendChild(dynamicDiv);

Remember to include the 'System.Windows.Browser' namespace for this code to compile.

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.