Click here to Skip to main content
13,148,889 members (53,681 online)
Click here to Skip to main content
Add your own
alternative version

Stats

103.9K views
1.1K downloads
34 bookmarked
Posted 7 Feb 2009

WPF Html supported TextBlock

Rate this:
Please Sign up or sign in to vote.
This Article describes HtmlTextBlock, which is a WPF TextBlock that can parse limited set of html tags and display them.
This is an old version of the currently published article.
mainscreen.jpg

Introduction

This Article describes HtmlTextBlock, which is a WPF TextBlock that can parse 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 button,
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.

background.jpg


I then googled how to use html in wpf but most solutions told me to use WebBrowser, which is a bit overkill for my purpose. 

Then I remembered an abondoned project I wrote few years ago (mostly because I moved to WPF) , which tried to recreate FlowDocument in dotNet2, and load Html to that flow document (my main purpose, the component was named QzMiniHtml2).

Surprisingly, with very few modifications (mostly using import), this dotNet2 project work nicely with WPF, just as you look above.

Because of this, the original project is also 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 a html parsing engine inside, which translate 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 wont be executed here.
  • CurrentState hold 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 contain the property.
When the Inline is returned (Line L)
  • It will be added to your HtmlTextBlock.Inlines collection. 

History

08-02-09 Initial version 

License

This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)

Share

About the Author

Leung Yat Chun (Fainx)
Founder GenESis1 PROGRAMMER
Hong Kong Hong Kong
From the end of the Universe we have Fainx and Quick Zip.
http://goo.gl/GgksC6
Quickzip.org is stolen by and FileExplorer.org is the temporary site.
--
May Thy Lord Your God be blessed always.

DirectoryInfoEx - [1.0.27]
WPF FileExplorer3 - [3.0.19]
WPF HtmlTextBlock - [Codeplex]
WPF ListView MultiSelect - [0.4]
WPF UIEventHub MultiSelect/DragDrop w Touch support - [3.0]
WPF BreadcrumbFolderTextBox - [2.5]
WPF BreadcrumbTree and Breadcrumb
WPF Aero Titlebar - [0.2]

You may also be interested in...

Pro

Comments and Discussions

Discussions on this specific version of this article. Add your comments on how to improve this article here. These comments will not be visible on the final published version of this article.
 
QuestionUnable to download the attached sample Pin
ksvimalraj28-Jul-11 17:28
memberksvimalraj28-Jul-11 17:28 
AnswerRe: Unable to download the attached sample Pin
Leung Yat Chun29-Jul-11 3:52
memberLeung Yat Chun29-Jul-11 3:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.


Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.170924.2 | Last Updated 7 Feb 2009
Article Copyright 2009 by Leung Yat Chun (Fainx)
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid