Floating Images
The floating images in RadRichTextBox are represented as inline images wrapped in floating block containers. This functionality allows images to be displayed inside the document and positioned on its own line or wrapped up by the content around.
This topic will explain you how to use the FloatingImageBlock 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
FloatingImageBlock Class Overview
The FloatingImageBlock class is used to insert floating images in a document. This class wraps an inline image in a floating block allowing the customer to position the image on the exact position they would like to. FloatingImageBlock derives from FloatingBlock whose base class is AnnotationMarkerBase. With that said, the floating blocks are implemented using annotations.
FloatingImageBlock exposes members enabling you to control the image inside the container and its positioning.
ImageInline ImageInline: Represents the image inside the floating block. For more information about this object, refer to the ImageInline topic.
bool AffectsLayout: Gets a value indicating whether the block affects the layout of the document. The layout is not affected in the cases when the WrappingStyle property of the block is set to WrappingStyle.BehindText or WrappingStyle.InFrontOfText.
bool AllowOverlap: Indicates whether the block can overlap with other blocks.
TextWrap TextWrap: Determines how the text should be positioned around the floating block. You can check the possible values in TextWrap API Reference.
WrappingStyle WrappingStyle: Defines how the other elements can be wrapped around the floating block. You can check the possible values in WrappingStyle API Reference.
-
FloatingBlockHorizontalPosition HorizontalPosition: Determines the horizontal position of the block. The position is described using the following properties:
- HorizontalRelativeFrom RelativeFrom: Determines the horizontal object or edge the position should be relative from using the values of the HorizontalRelativeFrom enumeration.
- PositionValueType ValueType: Determines whether the position should be moved with a specific offset or aligned to other elements. You can check the possible values in PositionValueType API Reference.
- RadHorizontalAlignment Alignment: The alignment. You can check the possible values in RadHorizontalAlignment API Reference.
- double Offset: The offset.
-
FloatingBlockVerticalPosition VerticalPosition: Determines the vertical position of the block. The position is described using the following properties:
- VerticalRelativeFrom RelativeFrom: Determines the vertical object or edge the position should be relative from using the values of the VerticalRelativeFrom enumeration.
- PositionValueType ValueType: Determines whether the position should be moved with a specific offset or aligned to other elements. You can check the possible values in PositionValueType API Reference.
- RadVerticalAlignment Alignment: The alignment. You can check the possible values in RadVerticalAlignment API Reference.
- double Offset: The offset.
Add in XAML
Example 1 shows how a FloatingImageBlock element can be defined in XAML at design time.
Example 1: FloatingImageBlock definition
<telerik:RadRichTextBox x:Name="radRichTextBox" Height="500">
<telerik:RadDocument>
<telerik:Section>
<telerik:Paragraph>
<telerik:FloatingImageBlock AllowOverlap="False" AnnotationID="0" Margin="10,0,10,0" TextWrap="BothSides" WrappingStyle="Square">
<telerik:FloatingImageBlock.HorizontalPosition>
<telerik:FloatingBlockHorizontalPosition Alignment="Left" Offset="0" RelativeFrom="Paragraph" ValueType="Offset" />
</telerik:FloatingImageBlock.HorizontalPosition>
<telerik:FloatingImageBlock.VerticalPosition>
<telerik:FloatingBlockVerticalPosition Alignment="Top" Offset="0" RelativeFrom="Paragraph" ValueType="Offset" />
</telerik:FloatingImageBlock.VerticalPosition>
<telerik:ImageInline Extension="png" Height="159" Width="318" UriSource="/Help.RadRichTextBoxSamples;component/Demos/Images/RadRichTextBox.png" />
</telerik:FloatingImageBlock>
</telerik:Paragraph>
</telerik:Section>
</telerik:RadDocument>
</telerik:RadRichTextBox>
Add in Code Behind
You can work with FloatingImageBlock objects in code-behind as well.
Example 2: Define FloatingImageBlock in code-behind
private FloatingImageBlock CreateFloatingImageBlock()
{
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");
FloatingImageBlock floatingBlock = new FloatingImageBlock();
floatingBlock.ImageInline = image;
floatingBlock.HorizontalPosition = new FloatingBlockHorizontalPosition(HorizontalRelativeFrom.Paragraph, 120);
return floatingBlock;
}
Private Function CreateFloatingImageBlock() As FloatingImageBlock
Dim stream As Stream = Application.GetResourceStream(New Uri("/Help.RadRichTextBoxSamples;component/Demos/Images/RadRichTextBox.png", UriKind.RelativeOrAbsolute)).Stream
Dim size As Size = New Size(236, 50)
Dim image As ImageInline = New ImageInline(stream, size, "png")
Dim floatingBlock As FloatingImageBlock = New FloatingImageBlock()
floatingBlock.ImageInline = image
floatingBlock.HorizontalPosition = New FloatingBlockHorizontalPosition(HorizontalRelativeFrom.Paragraph, 120)
Return floatingBlock
End Function
Once you have defined the image, you will need to insert it in the document. Two approaches are available: using directly the model, appropriate when you are just constructing the document, or through the methods of RadDocumentEditor, when the document is already visualized in RadRichTextBox.
Example 3: Insert FloatingImageBlock through the model
Section section = new Section();
Paragraph paragraph = new Paragraph();
paragraph.Inlines.Add(this.CreateFloatingImageBlock());
section.Children.Add(paragraph);
RadDocument document = new RadDocument();
document.Sections.Add(section);
this.radRichTextBox.Document = document;
Dim section As Section = New Section()
Dim paragraph As Paragraph = New Paragraph()
paragraph.Inlines.Add(Me.CreateFloatingImageBlock())
section.Children.Add(paragraph)
Dim document As RadDocument = New RadDocument()
document.Sections.Add(section)
Me.radRichTextBox.Document = document
In case an existing document should be edited, you can add a floating image to it using the InsertInline() method exposed by the RadRichTextBox and RadDocumentEditor classes.
Example 4: Insert FloatingImageBlock using IDocumentEditor
FloatingImageBlock floatingBlock = this.CreateFloatingImageBlock();
this.radRichTextBox.InsertInline(floatingBlock);
Dim floatingBlock As FloatingImageBlock = Me.CreateFloatingImageBlock()
Me.radRichTextBox.InsertInline(floatingBlock)