Just added Silverlight Page banner to charette.com

Having just moved my personal website to a Windows Server hoster from a Linux hoster, I needed to finish the week with adding some Silverlight to the site:  Because the site runs Graffiti CMS, I wanted to write a new banner that grabbed the navigation links from HTML and showed that in Silverlight if the user had Silverlight installed.  Here’s what I did:

  1. I created a banner project in Expression Blend 2 that had the blog name and tagline and a placeholder for the navigation links:
  2. I enabled HTML Access in the HTML object tag


    param name="EnableHtmlAccess" value="true" />

  3. I added a page load handler where I parsed the list of navigation links. 

            private void OnPageLoaded(object sender, RoutedEventArgs e)
                var navigation = HtmlPage.Document.GetElementById("navigation") as HtmlElement;
                var ol = (from child in navigation.Children.Cast<HtmlElement>()
                         where child.TagName == "ol"
                         select child).First();
                var buttons = from li in ol.Children.Cast<HtmlElement>()
                              where GetSpan(li) != null
                              select new HyperlinkButton
                                Content     = GetText(GetSpan(li)),
                                NavigateUri = new Uri(GetFirstTagNamed(li,"a").GetProperty("href") as string),
                                Style       = App.Current.Resources["NavigationButton"] as Style
                foreach (var button in buttons)
  4. One important thing to note is that to get the text inside the span like this,


        <a href="/journalist">

            <span style="font-weight: bold; font-size: 110%;">Journalist</span>



    you need to use different code for FireFox and IE:

    static string GetText(HtmlElement element)
        string text = element.GetProperty("innerText") as string;
        if (text == null)
            text = element.GetProperty("textContent") as string;
        return text;
  5. The end result is a Silverlight application that can be put directly over the HTML content.  When a user does not have Silverlight installed, this is shown ( I shrunk the install Silverlight badge and moved it to the right)- it’s fully functional HTML.


    and when Silverlight is installed the Silverlight menu is shown:


  6. I will be adding more functionality to the banner as time goes on so please watch this space and this one: http://charette.com.
Comments (5)

  1. Having just moved my personal website to a Windows Server hoster from a Linux hoster, I needed to finish

  2. Steve says:

    This to me is a big problem with Silverlight:

    "you need to use different code for FireFox and IE: "

    I use libraries like jQuery.  MS is now using jQuery with asp.net mvc.

    I would suggest they include it in Silverlight.

    string text = $("MyElement").Text;

    Something like that.

  3. Phil Higgins says:

    I did a similar project to create a Silverlight banner for the top of my company web site.  I used javascript and HTML/CSS to take a little more control of the appearance of the page when Silverlight is not available.

    My navigation is still in the HTML/CSS of the page but I like your method of building the Silverlight link buttons from the links in the hosting html.  I’m considering making a change to it now.

    My blog post about page degradation when Silverlight it not installed at http://www.correllan.com/blog/?p=12

  4. SLJunkie says:

    Who are you hosting with now? Do you recommend them?

  5. In this issue: Pedro Anuarbe Cortes, pierlag, Joseph Ghassan, Jeff Wilcox, Silverlight SDK, Jeff Prosise