Skip to content

Latest commit

 

History

History
183 lines (134 loc) · 10.2 KB

features-floatingimage.md

File metadata and controls

183 lines (134 loc) · 10.2 KB
title page_title description slug tags published position
Floating Images
FloatingImage
FloatingImage.
radrichtextbox-features-document-elements-floatingimage
Image,floating,FloatingImageBlock
true
6

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]({%slug radrichtextbox-features-document-elements-inlineimage%}) 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.

[XAML] Example 1: FloatingImageBlock definition

{{region radrichtextbox-features-document-elements-floatingimages_0}}

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

{{endregion}}

Add in Code Behind

You can work with FloatingImageBlock objects in code-behind as well.

[C#] Example 2: Define FloatingImageBlock in code-behind

{{region radrichtextbox-features-document-elements-floatingimage_1}}

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;
}

{{endregion}}

[VB.NET] Example 2: Define FloatingImageBlock in code-behind

{{region radrichtextbox-features-document-elements-floatingimage_2}}

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

{{endregion}}

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.

[C#] Example 3: Insert FloatingImageBlock through the model

{{region radrichtextbox-features-document-elements-floatingimage_3}}

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;

{{endregion}}

[VB.NET] Example 3: Insert FloatingImageBlock through the model

{{region radrichtextbox-features-document-elements-floatingimage_4}}

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

{{endregion}}

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.

[C#] Example 4: Insert FloatingImageBlock using IDocumentEditor

{{region radrichtextbox-features-document-elements-floatingimage_4}}

FloatingImageBlock floatingBlock = this.CreateFloatingImageBlock();
this.radRichTextBox.InsertInline(floatingBlock);

{{endregion}}

[VB.NET] Example 4: Insert FloatingImageBlock using IDocumentEditor

{{region radrichtextbox-features-document-elements-floatingimage_5}}

Dim floatingBlock As FloatingImageBlock = Me.CreateFloatingImageBlock()
Me.radRichTextBox.InsertInline(floatingBlock)

{{endregion}}

See Also

  • [ImageInline]({%slug radrichtextbox-features-document-elements-inlineimage%})
  • [Editing Images]({%slug radrichtextbox-features-editing-images%})
  • [Annotations]({%slug radrichtextbox-features-document-elements-annotations%})
  • FloatingBlock API Reference
  • [Elements Hierarchy]({%slug radrichtextbox-features-document-elements-hierarchy%})
  • [RadDocument]({%slug radrichtextbox-features-document-elements-raddocument%})
  • [Section]({%slug radrichtextbox-features-document-elements-section%})
  • [Paragraph]({%slug radrichtextbox-features-document-elements-paragraph%})
  • [Span]({%slug radrichtextbox-features-document-elements-span%})