Customize Presentation through UI Layers

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

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 put your logic in is:

public override void UpdateUIViewPortOverride(UILayerUpdateContext context)

Public Overrides Sub UpdateUIViewPortOverride(ByVal context As UILayerUpdateContext)

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;
    }
}

Public Overrides ReadOnly Property Name() As String
    Get
        Return Me.customLayerName
    End Get
End Property

After having implemented the logic of your custom UI layer, you can plug it in the editor by creating a CustomUILayerBuilder.

public class CustomLayersBuilder : UILayersBuilder

Public Class CustomLayersBuilder
    Inherits UILayersBuilder

You can assign the new builder to specific instance of RadRichTextEditor like this:

this.radRichTextEditor1.RichTextBoxElement.UILayersBuilder = new CustomLayersBuilder();

Me.radRichTextEditor1.RichTextBoxElement.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 CustomDecorationUILayerBase());
}

Protected Overrides Sub BuildUILayersOverride(ByVal uiLayerContainer As IUILayerContainer)
    uiLayerContainer.UILayers.AddAfter(DefaultUILayers.HighlightDecoration, New CustomDecorationUILayerBase())
End Sub