Skip to main content

Bindable RichTextBox with HTML conversion in WPF

In WPF, the RichTextBox control is not really like other controls. Due to its flexible nature, there is no built in way of binding a property to the content. In this case, I wanted a simple RichTextBox control with a binding to an HTML formatted string to be able to use the built-in formatting features of the RichTextBox and allow users to create simple HTML formatted content.

First, doing the conversion on-the-fly proved to have major performance issues, so I ended up binding the content to a XAML string. The XAML to HTML conversion can be performed at any time.

I created a UserControl with a bindable Text-property. The view contains a RichTextBox control.

<RichTextBox x:Name="richTextBox" TextChanged="OnRichTextBoxChanged">

The source code for the user control contains the Text property and the methods to handle the binding.

public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
    "Text", typeof(string), typeof(TextEditor),
    new FrameworkPropertyMetadata(string.Empty, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, OnTextPropertyChanged));

private static void OnTextPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    textEditor.richTextBox.Document = GetDocumentFromXaml((string) e.NewValue);
}

private void OnRichTextBoxChanged(object sender, TextChangedEventArgs e)
{
    Text = GetXamlFromDocument(richTextBox.Document);
}

private static string GetXamlFromDocument(FlowDocument document)
{
    return XamlWriter.Save(document);
}

private static FlowDocument GetDocumentFromXaml(string xaml)
{
    if (string.IsNullOrEmpty(xaml))
        return new FlowDocument();

    return (FlowDocument)XamlReader.Parse(xaml);
}

Putting this together as a custom control either derived from RichTextBox or just as a simple UserControl as above both works fine. I choose this method since I have exended the control to be more than just a bindable RichTextBox, so this made more sense. When it comes to comverting the XAML to HTML, Microsoft have put together a sample library which does a great job. I haven't had to do any changes to their original code for my scenarios to work, but there might be scenarios where modification is necessary.

Comments