Just added Silverlight Page banner to charette.com

Article
10/24/2008

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:

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

<

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

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);
            }
        }

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;
}
```
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:
I will be adding more functionality to the banner as time goes on so please watch this space and this one: https://charette.com.

Just added Silverlight Page banner to charette.com

Additional resources