Toggle Button Synchronized With The Editor

[Stephen]

Hi,

I am trying to wire up the RadRichTextBox control to my Silverlight application.  I am using the sample Word application as a basis for this.

Looking at the code you use your own attached dependency property (RichTextCommandProperty) on a control which resides in Telerik.Windows.Controls.RichTextBoxUI.dll.  Since this is not a library that is part of the documentation or standard assemblies I am assuming that it is not intended to be used commercially it is just part of your sample.

If I bind a RadRichTextBox command (e.g. ToggleBoldCommand) using the standard Command property the selected text and any further typed text will toggle correctly, however, the button itself will have no knowledge of the 'toggle' state of the text.  To give an example, what I mean by this is that if I am testing the bold functionality for the following text:

A quick brown fox jumped...

I would like to see the toggle button 'on' when 'quick' and 'fox' are selected and off for the other portions of the text.  Just as you have it in your sample and the way that Microsoft Office Word works.

What is considered the best way for those of us trying to integrate this new control into their applications to do this?

Thanks,

Stephen

[Boby]

Hello Stephen,

In Q2 2010 version of our controls, we introduced new control - RadRichTextBoxRibbonUI - ribbon-based interface for RadRichTextBox. This document for this control is still not published - it will be very soon. The good news is that this control is exactly what you should use, and the basic idea behind is that the ribbon controls (buttons comboboxes, etc) are created automatically and bound to the corresponding commands and their events. You can read more about it in our brand new blog entry here: Create Silverlight Word Processor Using Just Visual Studio 2010 Designer.

In other words you should do the following to start using the new control:

• Drop RichtextBox to the design surface (make sure it has a name)
• Drop RichTextBoxRibbonUI to the design surface

Then Ribbon UI should affect RichTextBox content and should react back on changes of RadRichTextBox state.
Let us know if this helps.

Sincerely yours,
Bobby
the Telerik team

[Stephen]

Hi Bobby,

It's great that you guys have released this control it is certainly a valuable addition to your suite, however, I've already invested alot of time in making my own editor user interface without the RichRibbonUI control; which according to your documentation was the only way to do this.  If I'd known about this control on day one I probably would have used it, however, I would hate to see my investment go to waste, not only for lost time, but also because there are some benefits to having a completely customized editor UI.  I'd also rather avoid the 122kb footprint that this library has.

In the blog you refered to it talks about a ToggleStateChanged on the RadRichTextBox but I cannot see this event in the API.  I can see that there is are Current[Paragraph/Span]StyleChanged events on the API, should I be consuming these?

[Boby]

Hello Stephen,

By means of introduction I am Mihail Valkov (Mike) and I am the product manager in charge of the development of RadRichTextBox and the related components.

We apologize for not letting you know earlier about RadRichTextBoxRibbonUI. The problem is that it is brand new control and it was added to our Silverlight product suite just several weeks ago. The documentation is being updated as we speak. The current documentation refers to the approach used when the control was still in beta, and now it is still valid. Even though the documentation does not mention the RadRichTextBoxRibbonUI we decided to ship this control, since it will be of much help to a lot of our customers.

Of course you can make the best decision whether to use RadRichTextBoxRibbonUI or your custom editor user interface.

As an example of want you want to achieve, I will show you how to create simple toggle button that changes font weight, and updates its states according to selection in RadRichTextBox.

1. Add a toggle button (in this example, RadRibbonToggleButton, but can be simple RadToggleButton also) and RadRichTextBox. Button's Command property is bounded to ToggleBoldCommand of RadRichTextBox:
   

   <telerik:RadRibbonBar>
       <telerik:RadRibbonTab>
           <telerik:RadRibbonGroup Header="Font">
               <telerik:RadRibbonToggleButton x:Name="boldButton" Text="Bold" Command="{Binding ElementName=radRichTextBox1, Path=ToggleBoldCommand}" />
       </telerik:RadRibbonGroup>
       </telerik:RadRibbonTab>
   </telerik:RadRibbonBar>
   <telerik:RadRichTextBox Name="radRichTextBox1"/>

2. In the code-behind, attach to ToggleStateChanged event of ToggleBoldCommand of the RadRichTextBox, for example in the constructor, next after call to InitializeComponents method. Command itself tracks changes of current selection in its associated editor, and raises this event as needed:
   

   radRichTextBox1.ToggleBoldCommand.ToggleStateChanged += toggleBoldCommand_ToggleStateChanged;

3. In the event handler, update the state of the button:

   void toggleBoldCommand_ToggleStateChanged(object sender, StylePropertyChangedEventArgs<bool> e)
   {
       boldButton.IsChecked = e.NewValue;
   }

We are willing to help you even further with your task, and we can send you the code of our RichTextBoxRibbonUI and save you a bit time rediscovering the approach. If you are interested in this, please open a support ticket and let us know.

Greetings,
Mike
the Telerik team

[Stephen]

Hi Mike,

I'm sure most developers would emphasize with documentation not keeping up with the releases particularly for a new control.  I just wanted to make sure that the original story you told about the control was still being supported.  I think its fair to say that most people probably would rather avoid having to wire up all of this stuff which is where the RichTextBoxUI control comes in.

In terms of the code you provided me, it worked like a charm and I can probably just follow the same pattern for the other toggle buttons.

For the moment I think I am fine without the source control, my own text editor is almost complete, plus I'm close to the point of buying the premium edition of your control libraries and I believe that the source code is supposed to come with that as well anyway.

In my time spent developing my own UI for the RadRichTextBox I've hit a couple of fairly critical bugs.  Unfortunately I've been unable to reproduce them in a sample to send to you guys.  Heres what I've found so far:

• There seems to be some sort of issue if you make a call to one of the layout update methods or change the layout mode after importing a document.  The control internally makes a call to GetCaret which then throws a NullReferenceException.  While I didn't save the stack trace, from memory it was very small (about 3 lines with the last line being a call to .get_Caret()) and there was no entry point from my code.
• I got a weird issue with the RadRichTextBox which would cause Visual Studio to blow up when viewing a page in design mode, but would work fine at runtime.  There were no exceptions being generated but Visual Studio would lock up and crash when loading the UI, occasionally the OS would complain about an invalid memory address, also the memory usage would spike heavily.  The fix was to set a Design Width when the control was used inside your RadDockPanel.

Again despite trying I could't reproduce these issues with a simple sample, but hopefully these can give you some suggestions on where to potentially focus your own internal testing.

Thanks,

Stephen

[Mike]

Hi Stephen,

I am adding these two problem to our SP1 to-do list with high priority. However I am currently not able to confirm these issues - we need more time to investigate further. I will make sure though, these scenarios are well tested.

Let me know If I can help with anything else.

Regards,
Mike
the Telerik team