Telerik blogs

In Q3 2010 we introduced some cool UI additions to RadRichTextBox, including SelectionMiniToolBar and ContextMenu.

SelectionMiniToolBar

SelectionMiniToolBar is a floating toolbar that appears next to the current position after making a selection with the mouse in the document. It contains some useful commands for formatting text:

clip_image001

As RadRichTextBox loads the default SelectionMiniToolBar using MEF, it can be completely replaced with a custom one. This can be done as easy as with the other RadRichTextBox dialogs by implementing the ISelectionMiniToolBar interface and marking the class that implements it with the CustomSelectionMiniToolBarAttribute attribute. The technique was also described in greater details in this blog post.

ContextMenu

The ContextMenu is showed on right click over the RadRichTextBox, and contains some context specific commands arranged in groups – there are groups for spellchecking (1), clipboard (2), table editing (3) and text editing commands (4) as shown here:

clip_image002[5]

Besides replacing the default ContextMenu (by implementing IContextMenu and marking it with CustomContextMenuAttribute), here are some more customization approaches.

The first one involves subscribing to the Showing event of the default ContextMenu. Showing is not part of the IContextMenu interface, so in order to subscribe to it we need a cast to the ContextMenu class (the default implementation of IContextMenu in Telerik.Windows.Documents.RadRichTextBoxUI.dll):

ContextMenu contextMenu = (ContextMenu)this.radRichTextBox.ContextMenu;
contextMenu.Showing +=
this.ContextMenu_Showing;

 

In the event handler we can check the context relevant items and add some RadMenuItems if needed:

private void ContextMenu_Showing(object sender, ContextMenuEventArgs e) 
{ 
    // First check the context - if caret is in table, add our item 
    if (this.radRichTextBox.Document.CaretPosition.IsPositionInsideTable) 
    { 
        RadMenuItem makeCellYellowMenuItem = new RadMenuItem() { Header = "Make Cell Yellow" }; 
	makeCellYellowMenuItem.Click += this.MakeCellYellowMenuItem_Click; 

	ContextMenuGroup customContextMenuGroup = new ContextMenuGroup(); 
	customContextMenuGroup.Add(makeCellYellowMenuItem); 

	e.ContextMenuGroupCollection.Add(customContextMenuGroup); 
    } 
} 

 private void MakeCellYellowMenuItem_Click(object sender, RadRoutedEventArgs e) 
 { 
     Telerik.Windows.Documents.Model.TableCell currentCell = 
        this.radRichTextBox.Document.CaretPosition
            .GetCurrentTableCellBox().AssociatedTableCell; 
     currentCell.Background = Colors.Yellow; 
     this.radRichTextBox.UpdateEditorLayout(); 
 }

The second approach is more suitable when you need to reuse the customization across several RadRichTextBox instances/applications. Here we can either implement the IContextMenuContentBuilder interface or derive from the ContextMenuContentBuilder class and override some of its protected methods which are responsible for the creation of each context menu group:

public class CustomContextMenuBuilder : ContextMenuContentBuilder
{
    public override ContextMenuGroupCollection Construct()
    {
	var groupsCollection = base.Construct();
	if (this.RadRichTextBox.Document.CaretPosition.IsPositionInsideTable) 
	{ 
	    RadMenuItem makeCellYellowMenuItem =  new RadMenuItem() { Header = "Make Cell Yellow" }; 
	    makeCellYellowMenuItem.Click += this.MakeCellYellowMenuItem_Click; 

	    ContextMenuGroup customContextMenuGroup = new ContextMenuGroup(); 
	    customContextMenuGroup.Add(makeCellYellowMenuItem); 

            groupsCollection.Add(customContextMenuGroup); 
	} 
	return groupsCollection;
    }

    private void MakeCellYellowMenuItem_Click(object sender, RadRoutedEventArgs e) 
    { 
	Telerik.Windows.Documents.Model.TableCell currentCell = 
		this.RadRichTextBox.Document.CaretPosition
			.GetCurrentTableCellBox().AssociatedTableCell; 
	currentCell.Background = Colors.Yellow; 
	this.RadRichTextBox.UpdateEditorLayout(); 
    }
}

Now you can simply assign the instance of your class to the ContentBuilder property of the context menu:

ContextMenu contextMenu = (ContextMenu)this.radRichTextBox.ContextMenu;
contextMenu.ContentBuilder =
new CustomContextMenuBuilder (this.radRichTextBox);

 

And of course, for those of you who don’t need additional UI pop-ups, these can be disabled by setting IsSelectionMiniToolBarEnabled and IsContextMenuEnabled properties of the RadRichTextBox to false.


About the Author

Borislav Ivanov

is a software developer in the Telerik XAML team, working mainly on RadRichTextBox, and occasionally supporting team’s build infrastructure. He is passionate about his work, but also loves his vacations, when he can be found backpacking distant locations in Europe, Africa and Asia with his girlfriend.

Comments

Comments are disabled in preview mode.