WPF Html supported TextBlock

• Download HtmlTextBlock - 288.21 KB

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.




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 

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 16 of 16 (Total in Forum: 16) (Refresh) FirstPrevNext

image in text block pathurun 22:35 8 Sep '09   Hi Just wodnering if it is possible to display images also in Textblock. Thanks. Sign In·View Thread·PermaLink Re: image in text block Leung Yat Chun 1:56 15 Sep '09   Since it's textblock (and inherited from TextBlock), it cannot embed image, e.g. the following doesnt work HtmlUpdater.UpdateElement : Image img = new Image(); BitmapImage bi = new BitmapImage(new Uri(@"c:\temp\picture.png")); img.Source = bi; retVal = new Figure(new BlockUIContainer(img)); To make it work the component have to be reworked to inherit from another component. QuickZip Sign In·View Thread·PermaLink Does not work if Html Text is assigned to the HtmlTextBlock during Binding azamsharp 11:09 1 Jul '09   Here is my code and it does not format the HTML. <HtmlTextBlock:HtmlTextBlock TextAlignment="Left" Width="200" TextWrapping="Wrap" Margin="5" Html="{Binding Path=Description}" FontSize="12" FontStyle="Normal" /> Mohammad Azam azamsharp@gmail.com www.highoncoding.com Houston, TEXAS Sign In·View Thread·PermaLink Re: Does not work if Html Text is assigned to the HtmlTextBlock during Binding Leung Yat Chun 8:06 2 Jul '09   The following should fix the problem. public class HtmlTextBlock : TextBlock { public static DependencyProperty HtmlProperty = DependencyProperty.Register("Html", typeof(string), typeof(HtmlTextBlock), new UIPropertyMetadata("Html", new PropertyChangedCallback(OnHtmlChanged))); public string Html { get { return (string)GetValue(HtmlProperty); } set { SetValue(HtmlProperty, value); } } public override void OnApplyTemplate() { base.OnApplyTemplate(); Parse(Html); } private void Parse(string html) { Inlines.Clear(); HtmlTagTree tree = new HtmlTagTree(); HtmlParser parser = new HtmlParser(tree); //output parser.Parse(new StringReader(html)); //input HtmlUpdater updater = new HtmlUpdater(this); //output updater.Update(tree); } public static void OnHtmlChanged(DependencyObject s, DependencyPropertyChangedEventArgs e) { HtmlTextBlock sender = (HtmlTextBlock)s; sender.Parse((string)e.NewValue); } public HtmlTextBlock() { } } QuickZip Sign In·View Thread·PermaLink extensions Lee_Nover 16:11 20 Mar '09   Hi. I've extended your component to include a few additional options: [s] - strikethrough [font] - can have parameters: name, size and color. color can be a hex string or a name. I've also modified the attribute parsing mechanism to support both quoted and nonquoted values email me if you would like the new updates. thank you for the component! Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: extensions Leung Yat Chun 21:35 20 Mar '09   Greetings thanks, yes, I have implemented these as well. I am currently having trouble implementing [sub] and [sup] tag, I created a implementation for that but it seems doesn't work, the following is my code : retVal = new Run(aTag["value"]); if (currentState.SubScript) retVal.SetValue(Typography.VariantsProperty, FontVariants.Subscript); if (currentState.SuperScript) retVal.SetValue(Typography.VariantsProperty, FontVariants.Superscript); if (currentState.Bold) retVal = new Bold(retVal); if (currentState.Italic) retVal = new Italic(retVal); if (currentState.Underline) retVal = new Underline(retVal); if (currentState.Foreground.HasValue) retVal.Foreground = new SolidColorBrush(currentState.Foreground.Value); if (currentState.Font != null) try { retVal.FontFamily = new FontFamily(currentState.Font); } catch { } //Font name not found... if (currentState.FontSize.HasValue) retVal.FontSize = currentState.FontSize.Value; break; If you figure out what caused the problem, please drop me a note. I am hopping to implement some WPF binding as well (at least the most basic one, without converter). Regards Joseph Leung QuickZip Sign In·View Thread·PermaLink Re: extensions Lee_Nover 5:14 23 Mar '09   after a quick search/read on the net, it seems sub/superscripts only work with OpenType fonts. what would you like to bind? Sign In·View Thread·PermaLink Re: extensions Leung Yat Chun 11:20 23 Mar '09   I hope to implement something like the following : e.g. <a href="{link}"><binding path="header" /></a> Both link and header should able to return value like WPF. I haven't implement this yet, but I think it will require : - parse the new syntax (sure!) - get the initial value (using reflection i guess) - hook to datacontext's PropertyChanged event, and update the html when fired. Regards Joseph Leung Sign In·View Thread·PermaLink Re: extensions Lee_Nover 4:45 24 Mar '09   so the link would be databound to some source. in that case I'd use the same code as in xaml: <a href="{Binding Path=URL}">{Binding Path=UrlName}</a> a <binding> element, as in your example, would also be useful this way you could catch the Binding part in the parse method and simply load it with b = new Binding(path) then attach it to the tag's "link" property with this.SetBinding(HtmlTag.LinkProperty, new Binding(linkPath)); Sign In·View Thread·PermaLink Re: extensions Leung Yat Chun 10:20 25 Mar '09   Ok, the second part is working now. (e.g. [binding path='Title']), I used reflection to get the variable as it seems easier. I have upload the newest build here http://sites.google.com/a/quickzip.org/code/Home/articles-1/htmltextblock[^] Yes, using {Binding Path=URL} should be better, I will write some parsing code for this. Regards Joseph Leung QuickZip Sign In·View Thread·PermaLink Re: extensions Bob Ranck 10:26 4 Apr '09   Thanks, for addressing the subscript issue. I tried the new example from your newest build and it did not work for me. Could you illustrate an example with subscript please. Thank you, Bob Ranck Sign In·View Thread·PermaLink Re: extensions Leung Yat Chun 21:45 5 Apr '09   sorry, but it doesnt work yet. Regards Joseph Leung Sign In·View Thread·PermaLink Flow document? Member 1780989 22:32 7 Feb '09   Nice article. But why do not use flow documents? Is your solution any better? Sign In·View Thread·PermaLink Re: Flow document? Leung Yat Chun 23:39 7 Feb '09   Greetings I believe if you use FlowDocument (correct me if I am wrong), you can write xaml code like this : "<hyperlink>A Link</hyperlink>" it works, however, you cannot change the content at runtime, unless you write a number of lines in code-behind, e.g : "new Hyperlink(new Run("A Link"));" Thats what my textblock does, and all you need is to bind the html property. Regards Joseph Leung QuickZip Sign In·View Thread·PermaLink Re: Flow document? Member 1780989 23:38 8 Feb '09   You can use XamlReader class to parse xaml string Sign In·View Thread·PermaLink Re: Flow document? Leung Yat Chun 10:04 9 Feb '09   Greetings You are right, I remembered I read this class before but it didn't came up to my mind when I designing the component. (I am still new to WPF anyway ) Anyway, as I ve completed the component, I will continue use it, are there similar class that can parse html string? Thanks. Regards Joseph Leung QuickZip Sign In·View Thread·PermaLink

Last Visit: 9:58 21 Nov '09     Last Update: 9:58 21 Nov '09 1