Mindscape Blog » Blog Archive » WPF Elements: RichTextToolBar Control

WPF Elements: RichTextToolBar Control

A few days ago we released WPF Elements 3.0 which has been packed with some great new controls. One of these controls is the RichTextToolBar which provides a user interface to the standard WPF RichTextBox.

This currently supports the following text formatting: bold, italic, underline, foreground and background color, font family and font size. Text alignment for individual paragraphs can be changed using toggle buttons for left, center, right and justify alignment. And finally, cut, copy, paste, undo and redo commands are also included. Another thing to point out is that the bold command is not limited to a single font weight. Any font weight provided by WPF can be used by the RichTextToolBar. Using the RichTextToolBar in your applications is achieved with only a couple of lines of xaml:

<ms:RichTextToolBar RichTextBox="{Binding ElementName=RichTextBox}" FontSelectorDisplayMode="Plain" />
<RichTextBox Name="RichTextBox">

Simply put this code into a StackPanel or a Grid and your ready to go. The FontSelectorDisplayMode property that you can see on the RichTextBoolBar is used to specify whether or not the items in the font family combo box should be templated using their respective fonts.

Styling the RichTextToolBar

The RichTextToolBar control does not make any assumptions about what controls are being used for each command. It works purely by using WPF commands and data binding which allows for flexible control styling. Here are some ideas that you may consider if you want to make your own RichTextToolBar style. The foreground and background color pickers need not be the same. They could display different color palettes, or be two completely different controls. You could use any one of our color picker controls, or implement a specialized one for you application. You could use a split button control for the bold command where the drop down part contains a list of alternate font weights. The entire control could even by styled to look like the microsoft office ribbon control.

The RichTextToolBar has various properties to get and set the current state of the selected text in respect to a particular text format. This is useful for setting up two way bindings between properties such as the CurrentFontSize of the RichTextToolBar and the SelectedValue of the font-size combo box. Some properties such as CurrentFontFamily will be set to DependencyProperty.UnsetValue when the selection contains multiple sections of text with different font families. For text formatting that will be controlled by a button, you can use commands instead of bindings. Some of these commands, as seen below, are provided by WPF and so will be familiar to use.

ApplicationCommands.Cut
ApplicationCommands.Copy
ApplicationCommands.Paste
ApplicationCommands.Undo
ApplicationCommands.Redo

Other commands can be found in the RichTextCommands class and can be used for setting the text alignment, font weight, font style and text decorations. These commands are used along with a command parameter which specifies what to be applied to the selected text.

As usual, WPF Elements comes with 5 themes that can be applied to this control which you can see below. These themes use controls that will be familiar to users, and also include tool tips which mention the various keyboard shortcuts.

If you need help with making a custom style for this control, or if there are any features that you would like to see in the RichTextToolBar, then let us know in our forum and we’ll help you out.

You can grab a free trial of WPF Elements by clicking here!