The xamRichTextEditor was release just over 5 months ago, and it has quickly becoming one of Infragistics’ most popular controls. For those of you that don’t know about the xamRichTextEditor, it’s a highly customizable rich text editing control that provides functionality modeled after the features and behavior of Microsoft Word. So imagine taking Microsoft Word, removing all the crap you don’t care about or need, and then making a control out of it. Well, that’s exactly what we did.
Now that the xamRichTextEditor has been release, the number of feature requests are just pouring in. Honestly, a lot of the features you are asking for can be built by you, the customer. I get it; you want these feature built into the control so you don’t have to write them yourself. The reality is, if you need a feature sooner rather than waiting 6 months for the next release, which there is no guarantee that the feature will even get implemented, then you are better off writing it yourself. One such feature is a contextual mini toolbar similar to Microsoft Word’s toolbar.
This is actually one of the more popular features I have been hearing about. I know that there is no way I can get this in the next 14.2 release, so I decided I will help you guys get started writing your own Office inspired contextual rich text format toolbar for the xamRichTextEditor. This will be a very simple example, but will contain all the code required to make it work, and you will easily be able to add more options to your toolbar.
Since we are all WPF developers here, we know that the best way to show a control on top of another control is to utilize the Adorner layer. Now, the AdornerLayer is most possibly the most under utilized feature in WPF. That’s too bad, because it is extremely powerful and flexible. In order to show a custom control in the AdornerLayer we need to create a custom Adorner to act as our control host. For this, I will use a very simple, yet functional, UIElementAdorner<T> class.
Now that we have our Adorner that will host our Office inspired contextual rich text format mini toolbar control, we need to find a way to control when it shows, where it shows, and when it hides. To achieve this, we need to create some type of manager that we can attach to any xamRichTextEditor instance. This is why we will create a class called the RichTextFormatBarManager. This class will be responsible for showing, hiding, and positioning the mini toolbar in the xamRichTextEditor. This manager will have to have some knowledge of the mini toolbar we will be using. It will need to be able to tell the mini toolbar which xamRichTextEditor instance to manipulate, and it will need to tell the mini toolbar when to update the button state for newly selected text. To achive this, and remain decoupled from other implementations, we will need to use an interface named IRichTextFormatBar.
Now that we have defined our IRichTextFormatBar, we have what we need to create the RichTextFormatBarManager.
Now that we have a manager, we need to create a mini toolbar that will contain all the functions such as Bold, Italic, Underline, and other font options. You could create an actual custom control, but for our purposes, I will use a simple UserControl. I’ll name it RichTextFormatBar.xaml. Let’s start with the View. We won’t do anything complicated. Just add a few combo boxes and buttons. Of course to make applying the styles to the selected text of the xamRichTextEditor easy, we will use simple commands. For the font family, and font size, we will have to handle some events and manually set the values. No big deal though. It’s super easy to do.
Now, we need to make sure we are populating the font names and sizes, as well as updating the state of the buttons whenever the IRichTextFormatBar.UpdateVisualState method is called.
Now that we have all that finished, we need to find a way to attach this cool new mini toolbar to any xamRichTextEditor instance. Luckily, we are experienced WPF developers and now the best mechanism to attach objects to a control is to use either a Behavior, or an AttachedProperty. Well, for this example, we will use an Attached property to attach our RichTextFormatBarManager object to a xamRichTExtEditor instance. You might have already noticed this property defined in the RichTextFormatBarManager class. The AttachedProperty is called FormatBar. So how do we use all this code we wrote? Simple! Create a View, don’t forget to add a namespace for our toolbar stuff, and then attached a new toolbar instance to a xamRichTExtEditor using the FormatBar AttachedProperty. Like this:
Now run the application, and start typing some text. Highlight some text and BAM; the rich text mini toolbar appears. Now you can start applying various rich text formatting options to the selected text.
That’s all there is to it. Download the source code, and start playing around with it to make it fit your application needs. Be sure to let me know if this was useful to you, and I always love to hear about how my samples are used in the real world. As always, feel free contact me on my blog, connect with me on Twitter (@brianlagunas), or leave a comment below for any questions or comments you may have.