Edit this page

InlinieUIContainer

RadRichTextEditor provides you with the functionality of enclosing custom UI elements in its document. That is achieved with the help of a special type of inline document element called InlineUIContainer, which can wrap any object of type System.Windows.UIElement, e.g. a button, an image.

This topic will explain you how to:

The InlineUIContainer is an inline element, so it should be placed in a Block that can contain inline elements (e.g. the Paragraph).

Add UI Element to an InlineUIContainer

You can add any element that derives from the RadElement class inside the RadElementUIContainer. In code, set the UIElement property of the container to an instance of RadElementUIContainer. Here is a simple example with a button.

note

In order to utilize the InlineUIContainer , you have to set its Height and Width explicitly (or use the constructor that takes a Size as a parameter). Otherwise, it will not shown in the document.

note

The following article contains more information about the element types which can be used inside the document: Elements Overview.


RadButtonElement button = new RadButtonElement();
button.Text = "My Button";

Section section = new Section();
Paragraph paragraph = new Paragraph();
InlineUIContainer container = new InlineUIContainer();
RadElementUIContainer radContainer = new RadElementUIContainer(button);
container.UiElement = radContainer;
container.Height = 25;
container.Width = 70;
paragraph.Inlines.Add(container);
section.Blocks.Add(paragraph);
this.radRichTextEditor1.Document.Sections.Add(section);

Dim button As New RadButtonElement()
button.Text = "My Button"
Dim section As New Section()
Dim paragraph As New Paragraph()
Dim container As New InlineUIContainer()
Dim radContainer As New RadElementUIContainer(button)
container.UiElement = radContainer
container.Height = 25
container.Width = 70
paragraph.Inlines.Add(container)
section.Blocks.Add(paragraph)
Me.radRichTextEditor1.Document.Sections.Add(section)

Import Export InlineUIContainers

Most features that RadRichTextEditor provides are also supported in the format providers that it uses for export and import. Currently import/export UIElement is only supported with HtmlFormatProvider. If your document has any inline UI elements by default they will be exported/imported when the HtmlFormatProvider is used.

  • Exporting with HtmlFormatProvider - the inline UI containers are serialized as XML and are included in the HTML as comments. If the user handles the InlineUIContainerExporting event, they can provide their own implementation for the export of the UI elements by accessing the properties of the InlineUIContainerExportingEventArgs and setting the ones they need. The CommentContent contains the XML serialization and the HtmlContent string property can be set to the desired user-defined HTML equivalent of the UI element. It will appear when the page is rendered outside RadRichTextEditor. The UI element can also be omitted from the document altogether.

Figure 1: The InlineUIContainerExporting event.

richtexteditor-document-elements-inlineuicontainer 001

  • Importing with HtmlFormatProvider – there is a property of the HtmlFormatProvider class called HtmlImportSettings, which provides two events – InlineUIContainerImporting and InlineUIContainerImported. The EventArgs of these events have the same properties, as the ones that the InlineUIContainerExporting event of HtmlExportSettings has. Thus, even if you have not implemented custom export of inline UI containers, you can process the XML comments on import and provide your own logic to create the serialized objects, set their properties and insert them in the Document.
tip

For more information on Import/Export, please refer to this topic.