integrating html and silverlight

in part 1 of my baseball example concept, i discussed how i was able to re-use some SVG vector art in XAML.  in that screencast i used an SVG file and a PDF file.  it set the stage for the remaining part of my samples here.  to recap, my goal is to show: using vector files for XAML (done), integrating that XAML and html functionality (here) and then to show a "game play" view of the vector art, extracting just the field information.

in this part 2 of that goal, i set out to recreate a different user experience for the ticket purchase process of the online site for the baseball team.  right now at the dbacks seating/pricing site, they provide a chart and a color match html table.  there is some "zoom" functionality (really it is just image swapping) to get a closer look at the sections.  to me, i wanted to see a simpler implementation -- don't make me think.  when i choose the infield section, clearly show me where that is -- if i can't decipher the colors very well, then i might not understand where the section is.  this is, of course, a very simple sample, but one that can easily demonstrate how easy it is to work with silverlight and html from a DOM perspective.

you see, once the silverlight plugin is loaded, it is a part of the page DOM.  because of this, other elements can dig into it, manipulate XAML, execute storyboards, etc. -- and vice versa...the silverlight plugin can alter html on the same page.  it actually is quite simple, but i've received some questions on it, so i thought i'd whip this quick sample together.  please subscribe to the podcast feed on the left to get the previous screencast and future ones as well.

i hope it helps.  if it doesn't, let me know or let me know how to refine a better sample.  leave a comment in the blogs.

part 3 will be (maybe) the final part of this sample, demonstrating a "game view" using the same imported vector data, real-time data from SQL server, asp.net ajax integration...it's wicked cool and i can't wait to post it!