Using HTML in Silverlight

As Silverlight gets more and more matured, people start to ask more and more about the controls which the platform provides. One of my hopes in dealing with Silverlight was the ability to embed HTML content. Alas, there is no control that will allow me to do so. There are 2 ways to resolve this problem: code your own control that will handle some or all HTML capabilities, or create a wrapper around the browser. I chose option 2.

How do we wrap around the browser?
Luckily, Silverlight exposes almost all DOM objects to the Silverlight application. Using this, a Silverlight application can create new or modify any existing HTML elements in the parent HTML document. Example:

HtmlElement elem = HtmlPage.Document.CreateElement("div");
HtmlPage.Document.Body.AppendChild(elem);

With the help of some CSS, this element can be placed anywhere in the browser window. Example:

elem.SetStyleAttribute("position", "fixed");
elem.SetStyleAttribute("width", "auto");
elem.SetStyleAttribute("top", "150px");
elem.SetStyleAttribute("left", "250px");

The final bit is filling this element with actual content. To do this, I've used a JavaScript helper function that I placed in the parent document. Finally, I use the HtmlPage.Window.Invoke API to call the helper function and place the HTML content into my HTML element.

Some additional info on how to do these things can be found at:
Walkthrough: Calling Managed Code from Client Script
Walkthrough: Calling Client Script from Managed Code

Edit:
There is the possibility of inserting HTML content inside this element without the need for calling an external JavaScript function. This is done by using HtmlElement.SetAttribute to set the innerHTML attribute to whatever HTML content it must be.

Silverlight 2

Microsoft has officially released Silverlight 2 Beta 1 to the public. There are a few major changes that come with the release of this version. The list below describe my observations so far:

• XAML. The XAML schema has somewhat changed since the Alpha Refresh of 1.1. As opposed to the Canvas element in 1.1, UI controls are now implemented using a Grid element that encapsulates all children elements within the control. This leads to somewhat of a confusion when dealing with relative positions of children elements. For instance, if in 1.1 an element's position can be specified using Canvas.Left and Canvas.Top, in 2.0 this position is determined via the Margin attribute for that element.


• Access to children elements. It came as a pleasant surprise that the Silverlight team has really put the effort into making XAML elements easily accessible from the .NET code. While in 1.1 one must use FrameworkElement.FindName API to access any given XAML element, in 2.0 all XAML elements are members of the class and can be directly accessed.


• Event handlers. The very first observation regarding event handling is that many of the raised events have changed. Aside from noticing the naming, I have not spent much time with this part of Silverlight to notice any major differences in the behavior of these events.


• Code deployment. Silverlight 2 code is now deployed through the use of an embedded object as opposed to ActiveX instantiation via scripting. This is good in the sence it will make it easier for web developers to play around it and not worry so much about screwing something up in the process. Another interesting part of the deployment process is the inclusion of the System.Windows.Forms.Controls library in the ClientBin folder. In a previous test, a friend and I tried to see if we can load the full System.Xml from the ClientBin, so I wonder if tricks like that can now be played with the CLR.

The last and somewhat important observation is the lack of support for running 1.1 applications into the 2.0 runtime environment. I hope that this move is for the better. :)

Media tracking in Silverlight

During the past few days I spent quite some time looking into the best and possibly most robust way to track audio and video content in Silverlight. The objective is simple: every time a video or an audio clip is loaded, a timeline is to appear and is to give users the ability to play/pause/stop the clip, see its progress, mute it, or simply seek parts in it.

The toughest part of all is creating the progress bar... well, not so much creating it, but making it work. As with most controls created by Microsoft, hooking into the right event is always the way to go. In a similar way, media tracking can be done by setting markers in the media content at certain intervals and then catching the MarkerReached event when those markers are being hit. Unfortunately, modifying the markers through .NET code was not as easy as it seems... apparently Silverlight has issues when markers are being added to a MediaElement. The result of that is a nice crash of the browser.

Luckily, media markers can be embedded through the Expression Encoder. To save time, avoid carpal tunnel syndrome, and spare some nerves, there is an easy way to automate the process of setting the markers into the media file. The steps are:

1. Get the total duration time of the media content.


2. Set your step interval (i.e. the time between 2 consecutive markers).


3. Create an XML file of the format

   <Markers>
    <Marker Time="00:00:01" 
            Value="Marker1" 
            GenerateKeyFrame="True" 
            GenerateThumbnail="False" />
    ...
   </Markers>



4. Import the XML file into the Markers section in Expression Encoder


5. Encode the media content.