Edit this page

ImageInline

The ImageInline class allows images to be displayed inside the document. The ImageInline can only be used in the context of a Paragraph class. As it is an inline element, it gets placed after the previous inline element until the end of the line. If there is no space left, the element will be wrapped on the next line.

This topic will explain you how to use the ImageInline element.

Add in XAML

Here is an example of an ImageInline element used in XAML at design time.

XAML

<telerik:RadRichTextBox x:Name="radRichTextBox" Height="500">
    <telerik:RadDocument>
        <telerik:Section>
            <telerik:Paragraph>
                <telerik:ImageInline UriSource="/Silverlight.Help.RadRichTextBoxSamples;component/Demos/Images/RadRichTextBox.png" Width="236" Height="50" />
             </telerik:Paragraph>
        </telerik:Section>
    </telerik:RadDocument>
</telerik:RadRichTextBox>

Add in Code Behind

Here is an example of how to add an ImageInline element in the code behind.

C#

Section section = new Section();
Paragraph paragraph = new Paragraph();
Stream stream = Application.GetResourceStream(new Uri(@"/Silverlight.Help.RadRichTextBoxSamples;component/Demos/Images/RadRichTextBox.png", UriKind.RelativeOrAbsolute)).Stream;
Size size = new Size(236, 50);
ImageInline image = new ImageInline(stream, size, "png");
paragraph.Inlines.Add(image);
section.Children.Add(paragraph);
this.radRichTextBox.Document.Sections.Add(section);

VB.NET

Dim section As New Section()
Dim paragraph As New Paragraph()
Dim stream As Stream = Application.GetResourceStream(New Uri("/Silverlight.Help.RadRichTextBoxSamples;component/Demos/Images/RadRichTextBox.png", UriKind.RelativeOrAbsolute)).Stream
Dim size As New Size(236, 50)
Dim image As New ImageInline(stream, size, "png")
paragraph.Inlines.Add(image)
section.Children.Add(paragraph)
Me.radRichTextBox.Document.Sections.Add(section)

Add via UI

Here is an example of how to allow the user to select an image and add it to the document. For that purpose a RadButton and an OpenFileDialog are used. When the file stream from the OpenFileDialog gets obtained, it's passed to the InsertImage() API method of the RadRichTextBox. This method takes as an argument the extension of the image, which can be again obtained from the FileInfo object. After calling the InsertImage() method, the image will appear in the document with its default width and height.

XAML

<StackPanel>
    <telerik:RadButton Content="Add Image" x:Name="ImageButton" Click="ImageButton_Click" />
    <telerik:RadRichTextBox x:Name="radRichTextBox" Height="500" LayoutMode="Paged" />
</StackPanel>

C#

private void ImageButton_Click(object sender, RoutedEventArgs e)
{
    OpenFileDialog openDialog = new OpenFileDialog();
    openDialog.Filter = "Images|*.jpg;*.png";
    openDialog.Multiselect = false;
    bool? dialogResult = openDialog.ShowDialog();
    if (dialogResult == true)
    {
        Stream stream = openDialog.File.OpenRead();
        string extension = openDialog.File.Extension;
        this.radRichTextBox.InsertImage(stream, extension);
    }
}

VB.NET

Private Sub ImageButton_Click(sender As Object, e As RoutedEventArgs)
 Dim openDialog As New OpenFileDialog()
 openDialog.Filter = "Images|*.jpg;*.png"
 openDialog.Multiselect = False
 Dim dialogResult As System.Nullable(Of Boolean) = openDialog.ShowDialog()
 If dialogResult = True Then
  Dim stream As Stream = openDialog.File.OpenRead()
  Dim extension As String = openDialog.File.Extension
  Me.radRichTextBox.InsertImage(stream, extension)
 End If
End Sub

See Also