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

Popular posts from this blog

Programming AD with C#.NET – part 4

Our transition to the  System.DirectoryServices.Protocols  has in the whole gone very smooth, but there have been some issues with one environment that contains subdomains. Most things are working fine, but writing to a subdomain does not work in the same way as it did before. What is generally bad with the  System.DirectoryServices.Protocols is the documentation, which is practically non-existent. But most things can  be figured out anyway since most classes just are wrappers for the wldap32.dll, which in turn is way better documented. I would like to have as little bindings to a specific server as possible but still be able to access the domain. In the  LdapConnection  it is possible to set the identifier to null and use the executing computer as a starting point to find a domain controller. But sometimes I must know that I am using a Global Catalog, and with more and more RODC in the environment I sometimes must know that I am working against a writeable domain controller.

jQuery file upload with Bootstrap progress bar

Performing an asynchronous file upload from the browser is a common problem with almost as many solutions as there are developers. The following solution is the best fit for my needs, and also works well with most popular browsers. Backwards compatibility is not an issue in this case which is great, because I can use the new technologies as they are supposed to be used. Everything is put together in JSFiddle for a working example . I will continue to explain the parts below... First, the input field needs to be styled as a button. The form tag is only present for us to be able to reset the file input field later on. <form>     <span class="fileUpload btn btn-default">         <span class="glyphicon glyphicon-upload"></span> Upload file         <input type="file" id="uploadFile" />     </span> </form> .fileUpload { position: relative; overflow: hidden; } .fileUpload input { position: a

Google+ finally for everyone!

There have been a lot of whining on Google from their Apps-users since the launch of  Google+  for everyone with a regular Google-account. The Apps-users have not been able to use  Google+ , until now! (actually  october 27 ) As usual I am impressed with most of the things Google accomplishes, but now when all of their services have gotten a visual and functional touchup I am getting really impressed. As someone at an early stage pointed out it is really sweet of Google to play naive and let me fill in my profile information when I create my profile (as if Google did not already know), but after a few clicks I am on the go. My albums from Picasa is automatically integrated and even the pictures I have uploaded to this blog is shown in  Google+ . But what happens next? Practically no one of my friends are on  Google+  so what do I use it for? I guess we will see. Hopefully there will be even more integration between the social networks in the future. I am anyhow very satified with