Edit this page

InlineUIContainer

RadRichTextBox 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 or even a media element or media player.

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 UIElement class inside the InlineUIContainer. To do it 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.

[XAML] 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>

[C#] 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);

[VB.NET] Example 1: Add UI Element to an InlineUIContainer

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.

[C#] 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);
}

[VB.NET] Example 2: Add MediaElement on Button Click

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

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

  • 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 a DOCX, as they are not exported in the first place.

  • PdfFormatProvider: PDF import is currently not supported.

See Also