Available for: UI for ASP.NET MVC | UI for ASP.NET AJAX | UI for Blazor | UI for WPF | UI for WinForms | UI for Xamarin | UI for WinUI | UI for ASP.NET Core | UI for .NET MAUI

New to Telerik Document Processing? Download free 30-day trial

FloatingImage

FloatingImage is an inline-level anchor flow document element linked with a floating image object. The supported image extensions are JPG, JPEG, PNG, BMP, TIFF, TIF, GIF, ICON, WMF and EMF.

Inserting a FloatingImage

Example 1 shows how to create a FloatingImage and add it to a Paragraph.

Example 1: Create a floating image and insert it in a paragraph

FloatingImage floatingImage = new FloatingImage(document); 
paragraph.Inlines.Add(floatingImage); 

The parent Paragraph should belong to the same document that is passed to the constructor of the FloatingImage.

You can add an image at a specific index in the Inlines collection of a paragraph using the Insert() method. Here is how to add a FloatingImage at the beginning of a paragraph:

Example 2: Add a floating image to a specific position

// Create an image 
FloatingImage floatingImage = new FloatingImage(document); 
 
// Assign a source to the image 
floatingImage.Image.ImageSource = new Telerik.Windows.Documents.Media.ImageSource(File.ReadAllBytes(pathToImage), imageExtension); 
 
// Insert the image at the desired position in a Paragraph 
paragraph.Inlines.Insert(0, floatingImage); 

You can also use the AddFloatingImage() method of the Inlines collection of a paragraph. The method creates a new FloatingImage, adds it to the paragraph and returns it.

Example 3: Using AddFloatingImage() method

FloatingImage floatingImage = paragraph.Inlines.AddFloatingImage(); 

Inserting FloatingImage element in RadFlowDocument can also be achieved with RadFlowDocumentEditor.

Example 4: Insert a floating image using RadFlowDocumentEditor

RadFlowDocumentEditor editor = new RadFlowDocumentEditor(document); 
 
using (Stream stream = this.GetResourceStream("Telerik_logo.png")) 
{ 
    editor.InsertFloatingImage(stream, "png", new Size(118, 28)); 
} 

Modify a FloatingImage

The FloatingImage element exposes the following properties:

  • Image: Represents the image object that is contained in the FloatingImage. It is a read-only composite object that contains the properties listed below:

    • ImageSource: Specifies the image source that is visualized in the image object.
    • Name: Represents the name of the image.
    • Width: The width of the image.
    • Height: The height of the image.
    • Size: The size of the image. Can also be set to Size.Empty.
    • IsHorizontallyFlipped: Specifies whether the image is horizontally flipped.
    • IsVerticallyFlipped: Specifies whether the image is vertically flipped.
    • RotationAngle: Specifies the rotation angle of the image.
    • LockAspectRatio: Determines whether the aspect ratio between the width and the height of the image will be preserved.
  • AllowOverlap: Specifies whether the image is allowed to overlap the contents of the other image objects. The default value is true.

  • IsLocked: Specifies if the anchor can be modified at runtime.

  • ShapeWrapping: Specifies the image wrapping. It is a composite object and contains the properties listed below:

    • WrappingType: The wrapping type. The default value is Square.
    • TextWrap: The text wrap. The default value is BothSides.
  • LayoutInCell: Indicates if the layout of the image should be calculated relative to the cell that is holding the shape.

  • IsBehindDocument: Indicates if the shape should be displayed behind the document content.

  • ZIndex: Specifies the ZIndex of the floating image.

  • Margin: Represents the margins for the floating image.

  • HorizontalPosition: Specifies the horizontal position of the floating image. It is composite object that contains the properties listed below:

    • ValueType: Specifies whether the positioning should be based on the Offset or the Alignment value. The default value is Offset.
    • RelativeFrom: Specifies the relative horizontal positioning base. The default value is Column.
    • Alignment: Specifies the alignment to be used if the position type is Alignment.
    • Offset: Specifies the offset to be used if the position type is Offset.
  • VerticalPosition: Specifies the vertical position of the floating image. It is composite object that contains the properties listed below:

    • ValueType: Specifies whether the positioning should be based on the Offset or the Alignment value. The default value is Offset.
    • RelativeFrom: Specifies the relative horizontal positioning base. The default value is Column.
    • Alignment: Specifies the alignment to be used if the position type is Alignment.
    • Offset: Specifies the offset to be used if the position type is Offset.

Working with Image Size

This section explains the behavior of the Size property of The Image object in a FloatingImage and how the image sizes are exported to the supported formats.

  • Insert image without specifying its size

    • Model: Size will be Size.Empty.
    • Export to DOCX: Size will be decoded
    • Export to RTF: Size will be decoded
    • Export HTML: Width and height attributes will not be exported
    • Export to PDF: Size will be decoded
  • Insert image and set its size to Size.Empty

    • Model: Size will be Size.Empty
    • Export to DOCX: Size will be (1,1)
    • Export to RTF: Size will be (1,1)
    • Export to HTML: Width and height attributes will not be exported
    • Export to PDF: Size will be (1,1)
  • Inserting image without specifying its size and obtain its size later (through the property getter)

    • Model: Size will be decoded

Exporting to PDF

WordsProcessing enables you to export documents with floating images to PDF. However, the set of supported properties is limited compared to the other document formats. Following is a list of the properties that are not supported by the PdfFormatProvider class:

  • IsHorizontallyFlipped
  • IsVerticallyFlipped
  • RotationAngle
  • AllowOverlap: All images are drawn as they have AllowOverlap set to true.
  • LayoutInCell: The image is always drawn inside the cell.
  • When exporting floating images that are anchored to elements inside tables, they will be inserted on a separate paragraph inside that cell, disregarding their wrapping properties.

See Also

In this article