Customize Presentation through UI Layers

UILayers provide an extensible approach to showing different parts of RadRichTextBox’s Document. For example, there are separate layers showing the comments, the selection, the table borders, etc.

Information about all the different built-in layers you can find in the UI Layers help topic.

The existing layers can be removed and additional ones can be defined to customize the presentation of different parts of the document.

All UILayers implement the IUILayer interface. There is an abstract class, which implements this interface - DecorationUILayerBase, and by inheriting it, you can easily define a new layer for custom representations of your document’s layout. The main method to contain your logic is:

public override void UpdateUIViewPortOverride(UILayerUpdateContext context) 

You can use the context which is passed as a parameter to the method to get all visible layout boxes and perform your decorations and customizations on them. You can also use the Document property that your decoration layer inherits from DecorationUILayerBase and everything that comes with it (like the current CaretPosition).

Last but not least, you should not forget to override the Name property of the layer like this:

public override string Name 
{ 
    get 
    { 
        return this.customLayerName; 
    } 
} 

After having implemented the logic of your custom UI layer, you can plug it in the editor by creating a CustomUILayerBuilder and marking it with the CustomUILayerAttribute like this:

[CustomUILayersBuilder] 
public class CustomLayersBuilder : UILayersBuilder 

In this way, your custom layer will be utilized in all instances of RadRichTextBox in your project. In case you want your layer to be visible only in a few RadRichTextBoxes, you can remove the CustomUILayersBuilder attribute and assign the builder only to the specific instances you want to use it with like this:

this.editor.UILayersBuilder = new CustomLayersBuilder(); 

All that is left is to specify the place of your layer, i.e. which layers should be shown above and which - below your layer. This is done in the BuildUILayersOverride method. For example, a layer can be shown under the selection, after the highlighting layer in the following way:

protected override void BuildUILayersOverride(IUILayerContainer uiLayerContainer) 
{ 
    uiLayerContainer.UILayers.AddAfter(DefaultUILayers.HighlightDecoration, new MyCustomLayer()); 
} 

All these steps have been implemented at https://demos.telerik.com/silverlight/#RichTextBox/CustomizePresentation, and in a developer-focused CustomLayerAndCustomAnnotation example in our SDK Samples Browser.

See Also

In this article