InlineUIContainer

RadRichTextBox provides you with the functionality of enclosing custom UI elements in its document. This 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 or even a media element or media player.

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

Add UI Element to an InlineUIContainer

You can add any element that derives from the UIElement class inside the InlineUIContainer. To do that, simply wrap the desired element inside the tag of the InlineUIContainer in case you are defining it in XAML. If you are using code, use the UIElement property of the container. 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, they will not be shown in the document.

Example 1: Add UI Element to an InlineUIContainer

<telerik:RadRichTextBox Name="radRichTextBox"> 
    <telerik:RadDocument> 
        <telerik:Section> 
            <telerik:Paragraph> 
                <telerik:InlineUIContainer Height="25" Width="70"> 
                    <Button Name="button" Content="Button" /> 
                </telerik:InlineUIContainer> 
            </telerik:Paragraph> 
        </telerik:Section> 
    </telerik:RadDocument> 
</telerik:RadRichTextBox> 

Example 1: Add UI Element to an InlineUIContainer

Section section = new Section(); 
Paragraph paragraph = new Paragraph(); 
InlineUIContainer container = new InlineUIContainer(); 
container.UiElement = new Button(); 
container.Height = 25; 
container.Width = 70; 
paragraph.Inlines.Add(container); 
section.Blocks.Add(paragraph); 
this.radRichTextBox.Document.Sections.Add(section); 

Dim _section As New Section() 
Dim _paragraph As New Paragraph() 
Dim container As New InlineUIContainer() 
container.UiElement = New Button() 
container.Height = 25 
container.Width = 70 
_paragraph.Inlines.Add(container) 
_section.Blocks.Add(_paragraph) 
Me.radRichTextBox.Document.Sections.Add(_section) 

Example 2 is a more complex example, which demonstrates how to implement a Button that inserts a MediaElement inside the RadRichTextBox's document.

Example 2: Add MediaElement on Button Click

private static Size defaultSize = new Size(900, 400); 
private void InsertMedia(Size size) 
{ 
    OpenFileDialog ofd = new OpenFileDialog(); 
    if (ofd.ShowDialog() == true) 
    { 
        Stream stream = ofd.File.OpenRead(); 
        MediaElement media = new MediaElement(); 
        media.SetSource(stream); 
        media.AutoPlay = true; 
        InlineUIContainer container = new InlineUIContainer() 
        { 
            UiElement = media 
        }; 
        if (size != Size.Empty) 
        { 
            container.Height = size.Height; 
            container.Width = size.Width; 
        } 
        this.radRichTextBox1.InsertInline(container); 
    } 
} 
private void buttonInsertVideo_Click(object sender, RoutedEventArgs e) 
{ 
    InsertMedia(defaultSize); 
} 
private void buttonInsertAudio_Click(object sender, RoutedEventArgs e) 
{ 
    InsertMedia(Size.Empty); 
} 

Private Shared defaultSize As New Size(900, 400) 
Private Sub InsertMedia(ByVal _size As Size) 
 Dim ofd As New OpenFileDialog() 
 If ofd.ShowDialog() = True Then 
  Dim _stream As Stream = ofd.File.OpenRead() 
  Dim media As New MediaElement() 
  media.SetSource(_stream) 
  media.AutoPlay = True 
  Dim container As New InlineUIContainer() With {.UiElement = media} 
  If _size <> Size.Empty Then 
   container.Height = _size.Height 
   container.Width = _size.Width 
  End If 
  Me.radRichTextBox1.InsertInline(container) 
 End If 
End Sub 
Private Sub buttonInsertVideo_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) 
 InsertMedia(defaultSize) 
End Sub 
Private Sub buttonInsertAudio_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) 
 InsertMedia(Size.Empty) 
End Sub 

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.

Example 3: Implement CopyableInlineUIContainer for a Button as underlying UIElement

public class CopyableInlineUIContainer : InlineUIContainer 
{ 
    internal CopyableInlineUIContainer() 
    { 
 
    } 
 
    public CopyableInlineUIContainer(UIElement uiElement, 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; 
 
        Button originalButton = (Button) fromUIContainer.UiElement; 
        this.UiElement = new Button() 
        { 
            Width = originalButton.Width, 
            Height = originalButton.Height, 
            Content = originalButton.Content.ToString() 
        }; 
    } 
} 

Public Class CopyableInlineUIContainer 
    Inherits InlineUIContainer 
 
    Friend Sub New() 
    End Sub 
 
    Public Sub New(ByVal uiElement As UIElement, ByVal size As 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 originalButton As Button = CType(fromUIContainer.UiElement, Button) 
        Me.UiElement = New Button() With { 
            .Width = originalButton.Width, 
            .Height = originalButton.Height, 
            .Content = originalButton.Content.ToString() 
        } 
    End Sub 
End Class 

There is a very generic option for copying UIElement objects, which might help in most of the cases. However, have in mind that depending on the UI elements on which it will be invoked, the implementation might differ.

Example 4: Copy UI Element

public static UIElement Clone(this UIElement elementToClone) 
{ 
    if (elementToClone != null) 
    { 
        string elementXaml = XamlWriter.Save(elementToClone); 
        StringReader stringReader = new StringReader(elementXaml); 
 
        XmlReader xmlReader = XmlTextReader.Create(stringReader, new XmlReaderSettings()); 
        return (UIElement)XamlReader.Load(xmlReader); 
    } 
 
    return null; 
} 

<Extension()> 
Public Shared Function Clone(ByVal elementToClone As UIElement) As UIElement 
    If elementToClone IsNot Nothing Then 
        Dim elementXaml As String = XamlWriter.Save(elementToClone) 
        Dim stringReader As StringReader = New StringReader(elementXaml) 
        Dim xmlReader As XmlReader = XmlTextReader.Create(stringReader, New XmlReaderSettings()) 
        Return CType(XamlReader.Load(xmlReader), UIElement) 
    End If 
 
    Return Nothing 
End Function 

Import/Export InlineUIContainers

Most features that RadRichTextBox provides are also supported in the format providers that it uses for export and import.

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

However, as the UIElement class is a WPF specific concept, some format providers support them in a non-standard way and others do not support them at all.

Exporting InlineUIContainers:

Different approaches have been adopted when it comes to exporting inline UI containers via the format providers:

• XamlFormatProvider: Inline UI containers are serialized as expected, thus ensuring lossless export in simple cases, e.g. when a button is in the container. Custom attached properties may not be exported.

• HtmlFormatProvider: The inline UI containers are serialized as XAML 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 XAML 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 RadRichTextBox. The UI element can also be omitted from the document altogether.

• DocxFormatProvider: All InlineUIContainers are ignored as the Microsoft Word concept of controls is quite different.

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

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

Importing InlineUIContainers

There are some differences between the format providers when it comes to importing InlineUIContainers, too.

• XamlFormatProvider: All inline UI containers are deserialized and imported.

• DocxFormatProvider: There cannot be any inline UI containers in DOCX, as they are not exported in the first place.

• RtfFormatProvider: There cannot be any inline UI containers in RTF, as they are not exported in the first place.

• PdfFormatProvider: PDF import is currently not supported.

See Also

• Paragraph

• Section

• RadDocument