Displaying HTML in Silverlight Applications

Rich Internet Application (RIA) technologies provide developers with a flexible development environment that can display data and media in a variety of ways.  New features available in Silverlight 4, such as fluid UI support in listboxes and animation transitions, allow data to be displayed in creative ways to users without relying on creative JavaScript or CSS techniques.

Even with all of these powerful features, many applications still have the need to display HTML content. For example, you may need to display RSS data (it’s quite common for HTML to be embedded in RSS feeds), or may need to show a web page or a SQL Server Reporting Services (SSRS) report directly in your Silverlight application.  You may even want to display a PDF document.  How do you display these types of content without completely disrupting the flow and consistency of the application’s user interface?

In this article, I'll discuss options for displaying HTML content in Silverlight applications and describe how my company is using these techniques in an existing client application that's being built.

HTML Display Options

Several different techniques can be used to display HTML content in an application, including HTML overlays, minimizing Silverlight so that HTML objects can be shown, or using the new WebBrowser control in Silverlight 4 for out-of-browser applications.  I'll focus on these three main options and describe how we handled showing HTML reports generated by SSRS, as well as PDF printing in a Silverlight application.

One of the more common techniques for displaying content in Silverlight applications running in the browser is to use HTML overlays. This allows HTML content to be placed on a Silverlight application by taking advantage of basic HTML and CSS features. For example, a div container can be positioned above an application to display a chunk of HTML content.

The second technique that can be used for displaying HTML content is to use CSS and JavaScript to your advantage and minimize the height or width of a Silverlight application while maximizing the height of a hidden div container. We're using this technique a lot to display SSRS reports while Silverlight is running in the browser.

The final technique that can be used is the easiest to put into practice but is only available in out-of-browser applications. Silverlight 4 provides a WebBrowser control that allows content to be displayed directly by assigning a URI to the control's Source property or by passing HTML to the NavigateTo() method. I'll provide more details on using the WebBrowser control toward the end of the article and describe how it can be used in your 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 in Figure 1.

By setting the control to “windowless,” you can overlay HTML objects by using absolute positioning and other CSS techniques. Keep in mind that the windowless setting can result in a performance hit on Windows machines 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, as Figure 2 shows.

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

We don’t want the RSS HTML content to be shown until requested. Once it’s requested, the absolute position of where it should show above the Silverlight control can be set using standard CSS styles. The following ID selector named #RSSDiv handles hiding the overlay div shown earlier in Figure 3 and determines where it will display on the screen.

 #RSSDiv
\{
    background-color:White;
    position:absolute;
    top:100px;
    left:300px;
    width:800px;
    height:600px;
    border:1px solid black;
    display:none;
\}

Now that the HTML content to display above the Silverlight control is set, how can we show it as a user clicks a HyperlinkButton or other control in the application? Fortunately, Silverlight provides an excellent HTML bridge that allows direct access to content hosted within a page. Figure 4 shows two JavaScript functions that can be called from Siverlight to handle showing or hiding HTML overlay content. The two functions rely on jQuery to make it easy to select HTML objects and manipulate their properties.

Calling the ShowOverlay function is as simple as adding the following code into the Silverlight application within a button’s Click event handler:

private void OverlayHyperlinkButton_Click(object sender, RoutedEventArgs e)
\{
    HtmlPage.Window.Invoke("ShowOverlay");
\}

Figure 5 shows the result of setting the Silverlight control’s windowless parameter to true and showing the HTML overlay content.

Hiding the Silverlight Control to Show HTML Content

Setting the windowless parameter to true may not be a viable option for some Silverlight applications, or you may simply want to go about showing HTML content in a different way. The next technique I’ll discuss takes advantage of simple HTML, CSS, and JavaScript code to handle showing HTML content while a Silverlight application is running in the browser. Keep in mind that with Silverlight’s HTML bridge feature, you can always have HTML content pop up in a new browser window using code similar to the following:

System.Windows.Browser.HtmlPage.Window.Navigate( 
   new Uri("http://silverlight.net"), "_blank");

For this example, I’ll demonstrate how to hide the Silverlight application while maximizing a container div containing the HTML content to show. This allows HTML content to take up the full screen area of the browser without having to set windowless to true, and when done right can make the user feel like they never left the application. Figure 6 shows several div elements that are used to display HTML within the same browser window as the Silverlight application.

The JobPlanDiv element acts as a container for two other divs that handle showing a close button and hosting an iframe that will be added dynamically at runtime.  JobPlanDiv isn’t visible when the Silverlight application loads due to the following ID selector added into the page:

#JobPlanDiv
\{
    position:absolute;
    background-color:#484848;
    overflow:hidden;
    left:0;
    top:0;
    height:100%;
    width:100%;
    display:none;
\}

When the HTML content needs to be shown or hidden, the JavaScript functions that Figure 7 shows are used.  ShowJobPlanIFrame() handles showing the JobPlanDiv div and adding an iframe into it dynamically. Once JobPlanDiv is shown, the Silverlight control host has its width set to a value of 0 percent to allow the control to stay alive while making it invisible to the user.  I found that this technique works better across multiple browsers than manipulating the Silverlight control host div’s display or visibility properties.

Now that you’ve seen the code to handle showing and hiding the HTML content area, let’s switch focus to the Silverlight application. As a user clicks on a link such as “View Report,” the ShowJobPlanIFrame() JavaScript function needs to be called. The code shown below handles that task:

 private void ReportHyperlinkButton_Click(object sender, RoutedEventArgs e)
\{
    ShowBrowser(_BaseUrl + "/Report.aspx");
\}
 
public void ShowBrowser(string url)
\{
    HtmlPage.Window.Invoke("ShowJobPlanIFrame", url);
\}

Any URL can be passed into the ShowBrowser() method which handles invoking the JavaScript  function. This includes standard web pages or even PDF files. We’ve used this technique frequently with our SmartPrint control, which converts Silverlight screens into PDF documents and displays them.

Figure 8 shows an example of the content generated by calling ShowJobPlanIFrame(). (Note that the Silverlight application isn’t actually visible at this point.) When the user clicks the close button, the Silverlight application is displayed immediately and the HTML content is hidden.

Using the WebBrowser Control

The solutions shown to this point work well when you have a page hosting the Silverlight control. However, what happens when you take the application out-of-browser? None of these solutions will work, since you don’t have a page to work with and don’t have access to the HTML bridge.

Fortunately, Silverlight 4 provides a WebBrowser control that can be used to perform the same functionality quite easily.  We’re currently using it in client applications to display PDF documents, SSRS reports, or normal HTML content. Using the WebBrowser control simplifies the application quite a bit, since no JavaScript is required if the application only runs out of the browser.

Figure 9 shows how the WebBrowser control can be defined in a Silverlight XAML file.  I typically define it in MainPage.xaml when a Silverlight Navigation template is used to create the project. 

Looking through the XAML, you can see that a close image is defined along with the WebBrowser control. Because the URL that the WebBrowser should navigate to isn’t known at design time, no value is assigned to the control’s Source property.

If the code shown in Figure 9 is left “as is,” you’ll find that any HTML content assigned to the WebBrowser doesn’t display properly.  This is due to no height or width being set on the control.  To handle this issue, the following code is added into the XAML’s code-behind file to dynamically determine the height and width of the page and assign it to the WebBrowser.  This is done by handling the SizeChanged event.

void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
\{
    WebBrowserGrid.Height = JobPlanReportWebBrowser.Height = ActualHeight;
    WebBrowserGrid.Width = JobPlanReportWebBrowser.Width = ActualWidth;
\}

When the user wants to view HTML content, they click a button which executes the code shown in Figure 10.  Looking through the code, you’ll see that it checks to see if the Silverlight application is running out of the browser and then either displays the WebBrowser control or runs the JavaScript function discussed earlier.  Although the WebBrowser control’s Source property could be assigned the URI of the page to navigate to, by assigning HTML content using the NavigateToString() method and adding an iframe, content can be shown from any site including cross-domain sites. This is especially handy when you need to grab a page from a reporting site that’s in a different domain than the Silverlight application.

Display HTML in Any Application

In this article you’ve seen several different techniques that can be used to display HTML content in Silverlight applications. While not all applications need to display HTML, at some point you may want to show users PDF documents, HTML pages, or even SSRS or other types of reports.