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.
<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.
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.
<telerik:RadButton Content="Add Image" x:Name="ImageButton" Click="ImageButton_Click" />
<telerik:RadRichTextBox x:Name="radRichTextBox" Height="500" LayoutMode="Paged" />
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