Synergist

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