Tuesday, January 25, 2011

Integrating HTML into Silverlight Applications

Looking for a way to display HTML content within a Silverlight application? If you haven’t tried doing that before it can be challenging at first until you know a few tricks of the trade.  Being able to display HTML is especially handy when you’re required to display RSS feeds (with embedded HTML), SQL Server Reporting Services reports, PDF files (not actually HTML – but the techniques discussed will work), or other HTML content.  In this post I'll discuss three options for displaying HTML content in Silverlight applications and describe how my company is using these techniques in client applications.

Displaying HTML Overlays

If you need to display HTML over a Silverlight application (such as an RSS feed containing HTML data in it) you’ll need to set the Silverlight control’s windowless parameter to true. This can be done using the object tag as shown next: 



<object data="data:application/x-silverlight-2," height="400" type="application/x-silverlight-2" width="500";>    
    <param name="source" value="ClientBin/HTMLAndSilverlight.xap" />
   <param name="onError" value="onSilverlightError" />
    <param name="background" value="white" />
    <param name="minRuntimeVersion" value="4.0.50401.0" />
    <param name="autoUpgrade" value="true" />
    <param name="windowless" value="true" />
    http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">         
   <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style: none;" />     </object>

By setting the control to “windowless” you can overlay HTML objects by using absolute positioning and other CSS techniques. Keep in mind that on Windows machines the windowless setting can result in a performance hit when complex animations or HD video are running since the plug-in content is displayed directly by the browser window. It goes without saying that you should only set windowless to true when you really need the functionality it offers. For example, if I want to display my blog’s RSS content on top of a Silverlight application I could set windowless to true and create a user control that grabbed the content and output it using a DataList control: 


<style type="text/css">
    a {text-decoration:none;font-weight:bold;font-size:14pt;}
style>
<div style="margin-top:10px; margin-left:10px;margin-right:5px;">
    <asp:DataList ID="RSSDataList" runat="server" DataSourceID="RSSDataSource">
        <ItemTemplate>
            <a href='<%# XPath("link") %>'><%# XPath("title") %>a>
            <br />
            <%# XPath("description") %>
            <br />
        ItemTemplate>
    asp:DataList>
    <asp:XmlDataSource ID="RSSDataSource" DataFile="http://weblogs.asp.net/dwahlin/rss.aspx" 
        XPath="rss/channel/item" CacheDuration="60" runat="server" />
div>



The user control can then be placed in the page hosting the Silverlight control as shown below. This example adds a Close button, additional content to display in the overlay window and the HTML generated from the user control.


<div id="RSSDiv">
    <div style="background-color:#484848;border:1px solid black;height:35px;width:100%;">
        <img alt="Close Button" align="right" src="Images/Close.png" onclick="HideOverlay();" style="cursor:pointer;" />
    div>
    <div style="overflow:auto;width:800px;height:565px;">
        <div style="float:left;width:100px;height:103px;margin-left:10px;margin-top:5px;">
            <img src="http://weblogs.asp.net/blogs/dwahlin/dan2008.jpg" style="border:1px solid Gray" />
        div>
        <div style="float:left;width:300px;height:103px;margin-top:5px;">


Read more: Dan Wahlin's WebLog
Tags: