Today we are going to take a look at directly manipulating the DOM on a webpage using Silverlight. We have other tutorials about Silverlight interacting with the webpage it is placed on, but in those tutorials we always communicate through some javascript functions on the page. Here, we will not be writing a single line of javascript - everything will be done in the Silverlight code-behind (which in this case will be C#).

The example below might look familiar - visually, it looks identical to the example in our Silverlight And Javascript Interaction tutorial. The code behind it, though, is completely different this time. Whereas last time javascript did all the heavy lifiting - telling the Silverlight app when to change, changing the DOM when Silverlight needed it changed - this time we completely eliminated all that from the picture.

When you click on a button on the left, Silverlight modifies the DOM directly to add the text on the right. When you click a button on the left, the Silverlight app actually receives an onclick from the html element, and responds appropriately.

HTML/CSS Click one of the buttons below to update the Silverlight. A B C

So how do we do it? Well, it is actually pretty simple. First, lets take a look at how we change the text on the html side from a click on the Silverlight side. Assuming you have the onclick events hooked up to the following function in the xaml code, it is as simple as this:


I gave my Silverlight buttons different names ("ABox", "BBox", "CBox"), which is why I cast the object to a UIElement (so that I can access the name property). But it is the next line that is the most important. Here, we actually get the div that we want to put text into. The HTMLPage is a static object that gives you all sorts of information about the page and the browser. It is contained in the System.Windows.Browser namespace, so you will want to add that as a using statement at the top of your code file. Once we have the HtmlPage, we want the get the Document, which, surprise surprise, is extremely similar to the document object that you might access in javascript - right down to the GetElementById function, which we use here to get the element.

Html page elements all derive from the class HtmlElement, which is what GetElementById returns. So once we have a reference to an element, what can we do with it? Well, pretty much anything you would be able to in javascript. Often the syntax is different, because javascript is weakly typed and has soft objects - very different from C# - but the names of everything are extremely similar. Here we want to set the content of this "SilverlightMessage" div, so all we do is call SetProperty on the innerHTML property, and give it the new value.

So what about the other direction - Silverlight apps attaching to DOM events? Well, that works too, and again should be familiar to anyone who has written event code in javascript:


So we again call GetElementByID in order to get our hands on the html elements. Next, to attach an event, we just call the function AttachEvent - which is extremely similar to the Internet Explorer standard for attaching events in javascript. The major difference is that in C# we have to hand the function an EventHandler, while in javascript we can just hand it a function. But that is just a byproduct of the syntax differences between the two languages.

Here, we are attaching a delegate we are creating on the fly, and all that delegate does is call the function HtmlButtonClicked with the right argument. And that function just sets the text of a TextArea block on the Silverlight app.

And that is all you need to do! Below is the entire content of the code behind file:


Look for some performance testing in the future, where we see how using Silverlight to modify the DOM stacks up against plain old javscript! Until then, if you have any questions or comments, feel free to leave them below.