InlineUIContainer

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:

• Add UI Element to an InlineUIContainer

• Import Export InlineUIContainers

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.

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.

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)

Specifics

InlineUIContainer elements are not copyable.

The following scenarios are affected:

• Drag-and-drop operation
• Copy/paste operation
• Update of the layout when the InlineUIContainer is in the header/footer
• Print operation

The reason is that copying InlineUIContainer involves cloning of the internal UIElement, which cannot be handled in a generic way.

To enable copying of InlineUIContainers in your application, you can create a custom object, which can copy the UIElement inside the container. What you need to do is to inherit the InlineUIContainer class and override IsCopyable, CreateNewElementInstance(), CopyPropertiesFromOverride(). The container and its parts are copied in the CopyPropertiesFromOverride() method, so you should ensure that the override copies the UIElement inside the container as well.

Implement CopyableInlineUIContainer for a RadButtonElement as underlying UIElement

       public class CopyableInlineUIContainer : InlineUIContainer
       {
           internal CopyableInlineUIContainer()
           {
           }

           public CopyableInlineUIContainer(Telerik.WinControls.RichTextEditor.UI.UIElement uiElement,
               Telerik.WinControls.RichTextEditor.UI.Size size) : base(uiElement, size)
           {
           }

           public override bool IsCopyable
           {
               get
               {
                   return true;
               }
           }

           protected override DocumentElement CreateNewElementInstance()
           {
               return new CopyableInlineUIContainer();
           }

           protected override void CopyPropertiesFromOverride(DocumentElement fromElement)
           {
               CopyableInlineUIContainer fromUIContainer = (CopyableInlineUIContainer)fromElement;
               this.Width = fromUIContainer.Width;
               this.Height = fromUIContainer.Height;

               RadElementUIContainer originalContainer = (RadElementUIContainer)fromUIContainer.UiElement;
               RadButtonElement originalButton = originalContainer.Element as RadButtonElement;

               RadButtonElement newButton = new RadButtonElement();

               newButton.Text = originalButton.Text;
               Telerik.WinControls.RichTextEditor.UI.RadElementUIContainer newContainer = new RadElementUIContainer(newButton);
               newContainer.Width = originalContainer.Width;
               newContainer.Height = originalContainer.Height;
               this.UiElement = newContainer;
           }
       }

    Public Class CopyableInlineUIContainer
        Inherits InlineUIContainer

        Friend Sub New()
        End Sub

        Public Sub New(ByVal uiElement As Telerik.WinControls.RichTextEditor.UI.UIElement, ByVal size As Telerik.WinControls.RichTextEditor.UI.Size)
            MyBase.New(uiElement, size)
        End Sub

        Public Overrides ReadOnly Property IsCopyable As Boolean
            Get
                Return True
            End Get
        End Property

        Protected Overrides Function CreateNewElementInstance() As DocumentElement
            Return New CopyableInlineUIContainer()
        End Function

        Protected Overrides Sub CopyPropertiesFromOverride(ByVal fromElement As DocumentElement)
            Dim fromUIContainer As CopyableInlineUIContainer = CType(fromElement, CopyableInlineUIContainer)
            Me.Width = fromUIContainer.Width
            Me.Height = fromUIContainer.Height
            Dim originalContainer As RadElementUIContainer = CType(fromUIContainer.UiElement, RadElementUIContainer)
            Dim originalButton As RadButtonElement = TryCast(originalContainer.Element, RadButtonElement)
            Dim newButton As RadButtonElement = New RadButtonElement()
            newButton.Text = originalButton.Text
            Dim newContainer As Telerik.WinControls.RichTextEditor.UI.RadElementUIContainer = New RadElementUIContainer(newButton)
            newContainer.Width = originalContainer.Width
            newContainer.Height = originalContainer.Height
            Me.UiElement = newContainer
        End Sub
    End Class

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.

• XamlFormatProvider: Inline UI containers are serialized as expected when exporting, thus ensuring lossless export in simple cases, e.g. when a button is in the container. When importing, all inline UI containers are deserialized and imported.

• 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.

  

• 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.

• DocxFormatProvider: All InlineUIContainers are ignored when exporting as the Microsoft Word concept of controls is quite different. When importing, there cannot be any inline UI containers in DOCX, as they are not exported in the first place.When importing, there cannot be any inline UI containers in RTF, as they are not exported in the first place.

• RtfFormatProvider: All InlineUIContainers are ignored when exporting as the RTF standard does not have a concept for similar elements.

• PdfFormatProvider: PDF import is currently not supported. The InlineUIContainers are taken a snapshot of and included in the export. If you like, you can prevent that by setting the InlineUIContainersExportMode property of the provider to None.

  

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