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:
    image
  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
                            };
    
                Navigation.Children.Clear();
    
                foreach (var button in buttons)
                {
                    Navigation.Children.Add(button);
                }
            }
  4. One important thing to note is that to get the text inside the span like this,
    <li>
        <a href="/journalist">
            <span style="font-weight: bold; font-size: 110%;">Journalist</span>
        </a>
    </li>

    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.
    image
    and when Silverlight is installed the Silverlight menu is shown:
    image
  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.