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.

Supported Image Extensions

With RadRichTextBox, you can work with images from the following file formats:

• JPG
• JPEG
• PNG
• BMP
• TIFF
• TIF
• GIF
• ICO
• ICON
• WMF
• EMF

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="/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#
• VB.NET

Section section = new Section(); 
Paragraph paragraph = new Paragraph(); 
Stream stream = Application.GetResourceStream(new Uri(@"/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); 

Dim section As New Section() 
Dim paragraph As New Paragraph() 
Dim stream As Stream = Application.GetResourceStream(New Uri("/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

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

• C#
• VB.NET

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.OpenFile(); 
        string extension = Path.GetExtension(openDialog.FileName); 
        this.radRichTextBox.InsertImage(stream, extension); 
    } 
} 

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.OpenFile() 
  Dim extension As String = Path.GetExtension(openDialog.FileName) 
  Me.radRichTextBox.InsertImage(stream, extension) 
 End If 
End Sub