WPF HTML Supported TextBlock

Download source - 240.92 KB

Introduction

This article describes HtmlTextBlock which is a WPF TextBlock that can parse a limited set of HTML tags and display them.

Background

I was working on a custom progress dialog, which contains a Header, Message, Progress and some action buttons.

To make it look better, I want the message to support some text format, and I want it to be changeable at runtime, but it seems impossible using TextBlock.

I then Googled how to use HTML in WPF but most solutions told me to use WebBrowser, which is a bit of an overkill for my purpose.

Then I remembered an abandoned project I wrote a few years ago (mostly because I moved to WPF) , which tried to recreate FlowDocument in .NET 2, and load HTML document (my main purpose, the component was named QzMiniHtml2).

Surprisingly, with very few modifications (mostly using import), this .NET 2 project worked nicely with WPF, just as you can see above.

Because of this, the original project is included as well.

How to Use?

The control is similar to TextBlock except you set the HTML property instead of Text.
Remember to use [ ] bracket instead of < >.

<Window x:Class="HtmlTextBlockTestProj.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:uc="http://www.quickzip.org/UserControls"
    Title="HtmlTextBlockTest" Height="250" Width="450">
    <DockPanel>
        <uc:HtmlTextBlock Html="{Binding Text, ElementName=tb}"
                 DockPanel.Dock="Top" Loaded="HtmlTextBlock_Loaded" />
        <TextBlock Text="[b] [i] [u] [a href=xx] [br] supported."
                 DockPanel.Dock="Bottom" />
        <TextBox TextWrapping="Wrap" AcceptsReturn="True"
                  VerticalScrollBarVisibility="Visible"
                  x:Name="tb"
        Text="The [i][u]quick brown fox[/i][/u] jumps over the [b]lazy dog[/b]" />
    </DockPanel>
</Window>

How It Works?

The component actually included an HTML parsing engine inside, which translates HTML string to WPF's Bold, Italic, Underline, Hyperlink, LineBreak Inline (more can be added in future, you can do it yourself easily, see below.)

The conversion part is simple.

1) private Inline UpdateElement(HtmlTag aTag)
2) {
3)   Inline retVal = null;

4)   switch (aTag.Name)
5)   {
6)     case "text" :
7)       retVal = new Run(aTag["value"]);
8)       if (currentState.Bold) retVal = new Bold(retVal);
9)       if (currentState.Italic) retVal = new Italic(retVal);
0)       if (currentState.Underline) retVal = new Underline(retVal);
A)       break;
B)     case "br" :
C)       retVal = new LineBreak();
D)       break;
E)   }

F)   if (currentState.HyperLink != null && currentState.HyperLink != "")
G)   {
H)     Hyperlink link = new Hyperlink(retVal);
I)     link.NavigateUri = new Uri(currentState.HyperLink);
J)     retVal = link;
K)   }
L)    return retVal;
M) }

First, please note that:

The input (aTag) is a Text or LineBreak(br), if the tag is a text, Tag["value"] is the text it holds.
Bold, Italic, etc. can also be represented by HtmlTag, but they won't be executed here.
CurrentState holds the style affecting the TextTag, etc.

So if the tag is text (line 6):

it will generate a Run (which can contain format or unformat text, and unformat in this case) (line 7)
if it's bold, italic and underline, it will construct them, and using last Inline (Abstract class, Run, Bold, etc. inherited from it), so it contains the property.

When the Inline is returned (Line L):