Displaying HTML Content in Silverlight

One of the challenges I ran across recently in Silverlight 3 was the need to display HTML content within a datagrid cell.

I did a Google search similar to ”silverlight html content” and quickly discovered that there aren’t any good solutions out there right now. Basically, the solutions I found were the following:

1. Creative hacks using the IFRAME tag and clever positioning (this includes the C1HtmlHost control by ComponentOne, which basically uses this technique).
2. Use the HtmlTextBlock control that’s been blogged about (supports only very basic HTML tags; no CSS).
3. Create your own custom control.

None of these solutions worked well for me because the HTML I needed to display was slightly too complicated for the HtmlTextBlock control to handle, and I had problems getting the C1HtmlHost control by ComponentOne to work within a datagrid cell (the browser would lock up, for example, whenever the datagrid was scrolled or data was refreshed).

But, thankfully, ComponentOne has another control called C1RichTextBox that renders HTML nicely without using any IFRAME hacks. I wouldn’t necessarily recommend it if you need to host an external HTML page within your application (because, for example, it doesn’t supported externally linked stylesheets), but it works well for basic scenarios that require more HTML support than what HtmlTextBlock provides. It also works well within a datagrid cell, which was essential for my scenario.

My final XAML code for hosting HTML within a datagrid cell looks like this:

<c1dg:DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <Grid>
            <c1rtb:C1RichTextBox Background="Transparent"
                    BorderThickness="0"
                    IsReadOnly="True"
                    VerticalScrollBarVisibility="Hidden"
                    Html="{Binding HtmlBackingField}" />
            <Rectangle Fill="Transparent" />
        </Grid>
    </DataTemplate>
</c1dg:DataGridTemplateColumn.CellTemplate>

The reason for the ‘Rectangle’ tag is that I needed to create a transparent panel (“glass pane”) in front of the C1RichTextBox control. This is both an easy way to shield the textbox from user interaction (making it truly read-only) and also allows the datagrid to behave normally when the cell is clicked. Without the transparent panel, the textbox intercepts the click event and prevents the datagrid from highlighting the row as it should.

And remember, this approach is geared towards creating an ”HTML viewer,” not a “web browser.” If you need a true “web browser” control (i.e. something that acts like an IFRAME and can fully host and support external web pages where many files, such as CSS files, have to be linked together to render the HTML), you’ll need to keep searching for another solution. This approach is what I’d call a middle-of-the-road solution, but in many cases, it’ll get the job done.

Welcome!

Welcome to my blog! Since I’m a “new face” in the blogging circles, I suppose I’ll start by telling you what I plan to write about.

From a technical perspective, I plan to write mainly about .NET development, SharePoint (MOSS) 2007, and NSIS (the Nullsoft Scriptable Install System) since those are my “specialties” at the moment. I also like to do a lot of research on software engineering practices and principles, though, so expect some posts/discussions about object-oriented analysis/design and other similar topics. However, since a lot of people ask me general computer questions (I think all IT professionals get those), I may have the occasional post about “How do I make my computer run faster?” or something similar.

Also, in a larger context, I’d like to seed some thoughtful discussions about our profession in general, and in particular, what “smart” development means to a lot of you out there and how you think we can accomplish it.

To see what I mean, here’s an idea of what ”smart” development means to me:

• Integrating existing, stable products together when possible (perhaps with a little custom code to augment existing features) rather than considering everything a “custom” job that must be developed from scratch.
• Developing from a user-centric perspective with legitimate business cases (if there’s no business case for something, why are we developing it?).
• Developing according to time-tested, repeatable principles.
• Producing quality work that users trust and that we can be proud of.

Now this list probably isn’t by any means “complete,” but I think it represents a good beginning point for some thoughtful discussion.