Silverlight applications come in different flavours: Fat Silverlight applications, rich media islands, and slim Silverlight applets.
Most Silverlight demos or applications I have seen are using the full page to display the Silverlight application. These applications are similar to traditional
fat rich client applications in functionality, but Silverlight solves the deployment issue. Deployment is even simpler compared to ClickOnce, and you get some cross platform compatibility on top. Some of these applications are in fact so similar to traditional applications that they turn off all navigation in the browser (I think WPF with ClickOnce may be a better solution for some of these).
What I find more interesting is Silverlight applets that integrate into web sites. Sometimes this is called a “rich media island”.
Examples for rich media islands include embedded videos or deep zoom images.
- You can walk through and manipulate the HTML DOM from within Silverlight (see Video),
- handle DOM events from Silverlight (see Video),
You can develop such a Silverlight applet and distribute it to 3rd parties web sites – they can be used in static pages, dynamic sites, and Ajax applications. The web server does not have to run anything specific – it could be a static web space on an Apache server running Linux, and you can still use your Silverlight applet on that site.
I recently developed a Silverlight chess board, which is used for The Week In Chess, one of the biggest web sites about chess news. This application was a rich media island first, in that it just displayed a chess board with no further interaction with the containing HTML page. However, for the recent chess world championship we wanted to extend this and also display the notation of the game, which is the moves in text form, e.g. 1.e4 e5 2.Nf3 and so on.
We discussed displaying the notation inside the Silverlight applet. However it became clear that the moves should be displayed with the same font settings and other CSS styles that the containing page uses. Furthermore, the moves also had to be part of the general layout of the page. Sometimes they would have to displayed to the right of the board, sometimes below the board, and the width of the notation also depended on the page layout.
Deeper integration with the page was required. The solution chosen is that the HTML page designer creates an empty <div> tag on his page as a location for the notation. The Silverlight applet gets the id of this div tag as a parameter. Using DOM manipulation, the Silverlight applet then creates the notation inside this div. The page designer is able to create this div with any styles and notation he desires.
Here is some sample code that illustrates this development:
public partial class Page : UserControl
public void Goto(int ply)
//code to go to given ply omitted
private void ShowNotation()
GameIterator i = new GameIterator(game);
StringBuilder text = new StringBuilder();
string id = HtmlPage.Plugin.Id;
//code to display move numbers omitted
text.Append(i.Ply + 1);
HtmlElement element = HtmlPage.Document.GetElementById(notation);
//other members omitted
private void Application_Startup(object sender, StartupEventArgs e)
Page page = new Page();
this.RootVisual = page;
I am not aware of more examples for this kind of slim Silverlight applets. Please let me know of other examples in the comments.