Just added Silverlight Page banner to charette.com

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

Comments

Anonymous
October 24, 2008
Having just moved my personal website to a Windows Server hoster from a Linux hoster, I needed to finish
Anonymous
October 24, 2008
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.
Anonymous
October 25, 2008
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
Anonymous
October 26, 2008
Who are you hosting with now? Do you recommend them?
Anonymous
October 26, 2008
The comment has been removed

Jaa

Just added Silverlight Page banner to charette.com

Comments

Lisäresursseja