Telerik blogs

Introducing RadRichtextBoxRibbonUI

Some of you may have noticed that along with the official release of RadRichTextBox for Silverlight 4 we introduced a new control to our suite – RadRichTextBoxRibbonUI. Now we want to get your attention and share with you some more details about the new control. Its main purpose is to allow you to get a full featured editing UI for RadRichTextBox out-of-the-box with just one click. The whole process will take few seconds while you drag the control from the toolbox and drop it in the design surface. After that all the XAML will be generated automatically for you and the best thing is that you get a fully functional and fully customizable Silverlight word processor.

toolbox2 designer

… and here is the generated XAML:

xaml2

RichTextBox Commands and Command Binding

If you further examine RadRichTextBoxRibbonUI you will notice that the whole UI is ready to use without a single line of code. All the wiring is done declaratively in XAML. This is possible because the RadRichTextBox now exposes its entire editing API in the form of commands. Besides the straight-forward way to edit the document, the commands also provide useful "current editing style changed" events that can be used to update the UI. For example the ToggleBoldCommand exposes ToggleStateChanged event which will be fired whenever the caret is moved from bold element to a regular one or vice versa.

However, if you are using the RadRichTextBoxRibbonUI you won't have to handle these events by yourself. You can set the command through the RadRichTextBoxRibbonUI.RichTextCommand attached property.The button toggle state will be automatically handled for you by the RibbonUI control. Below you can find out how this is done for the ToggleBoldCommand:

<telerik:RadRibbonToggleButton Size="Small"
 telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ToggleBoldCommand}"
 SmallImage="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/bold.png" />

Many RichTextBoxes - One UI to rule them all

When you drop the RibbonUI control on the design surface it will automatically bind to the first available RadRichTextBox. Furthermore, you can control many rich text boxes with only one RibbonUI by setting the targeted rich text box through the DataContext property.

2richboxes1ribbon

Have fun with this new one-of-a-kind addition to our Silverlight 4 toolbox. Comments are as always most welcome!


About the Author

Alexander Vakrilov

 is Senior Software Developer in Centaur Team

Comments

Comments are disabled in preview mode.