In this first real Silverlight article on my new blog (on which you are at the moment...), I'll be explaining how you can let Silverlight interact with the DOM (Document Object Model) of the page on which it resides. I'll be doing the demo's with the latest build of Visual Studio 2008, beta 2 in which I have already installed the Silverlight Extensions for Visual Studio 2008 beta 2, so I can start using the Silverlight templates right away.

I'll be using Silverlight 1.1, which has .net/CLR integration, so I'll be writing some .net code to create the interaction between Silverlight and the DOM of the page.

First, I will show how you can access the DOM elements and how to change their properties. I will create a Canvas in XAML, and by clicking on it, I'll change the value of an input box.

The XAML for this is really simple. I just created a Canvas with a nested TextBlock like the following:

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="SilverlightAndDomInteraction.Page;assembly=ClientBin/SilverlightAndDomInteraction.dll"
Width="640"
Height="480"
Background="White">
<Canvas Width="200" Height="50" Background="Red" MouseLeftButtonDown="OnCanvasClicked">
<TextBlock>Click me baby!</TextBlock>
</Canvas>
</Canvas>

In the code behind, we now have to write an event with the same name as defined for the MouseLeftButtonDown. In this method, we want to gain access to the DOM objects, like the input box. To achieve this, I created an instance of the HtmlDocument class, and using the GetElementById method, I can get a reference to the textbox on my HTML page. It simply scans the page (actually the DOM) until it finds the element with the specified ID.

After that, using the SetAttribute method, I can change the value-attribute to whatever value I want it to change.

void OnCanvasClicked(object sender, MouseEventArgs e)
{
HtmlDocument doc = new HtmlDocument();
HtmlElement tb1 = doc.GetElementByID("tb1");
tb1.SetAttribute("value", "Yes, you clicked correctly");
}

One thing to do, is to add a reference to the System.Windows.Browser namespace, which gives access to the classed I used here.

When you run this sample, you see the text of the HTML textbox change when you click the Canvas.

That was REALLY simple, wasn't it? This shows how easy it is to have Silverlight interact with the DOM of the page it is embedded with.

Next, we'll do the opposite: we'll be changing a value of a Silverlight element via the DOM.

I'm using a second Canvas in the XAML code, where aTextBlock is nested, just like before. Here's the code.

<Canvas Width="200" Height="50" Background="Green" Canvas.Left="250" Canvas.Top="10" x:Name="canvasGreen" MouseLeftButtonDown="OnSecondCanvasClicked">
<TextBlock x:Name="textBlock2">I want a value!</TextBlock>
</Canvas>

Now, I want to display the value that is in the HTML input to appear in the TextBlock inside the second Canvas.

For this, the following lines of code are enough.

void OnSecondCanvasClicked(object sender, MouseEventArgs e)
{
HtmlDocument doc = new HtmlDocument();
HtmlElement tb1 = doc.GetElementByID("tb1");
textBlock2.Text = tb1.GetAttribute("value");
}

Using the GetAttribute method, you can read every attribute of an HTML object on the page.

I hope this gives you some more understanding on how Silverlight can interact with the DOM of the surrounding HTML document.

Stay tuned for more Silverlight articles!