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 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.
border:1px solid black;
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)
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
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:
private void ReportHyperlinkButton_Click(object sender, RoutedEventArgs e)
ShowBrowser(_BaseUrl + "/Report.aspx");
public void ShowBrowser(string url)
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.
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;
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.