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:
    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.
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