Skip to main content

How to Add Header and Footer Images to a Report

  • 2 minutes to read

This topic describes how to assign images to a report’s header and footer. It’s assumed that the TcxImageCollection () that contains images for the report is linked to the report link via the report link’s PrinterPage.ImageCollection property.

Assigning images via the built-in UI

In the Page Setup dialog, select the Header / Footer page. Click inside a section in which an image will be displayed (in the example, the header’s left section). This enables buttons located in the Predefined Functions group box. Click the Image button (this button is only displayed if the image collection is connected to the report link). In the displayed dropdown window, double-click the desired image (or select it and then click the window’s OK button). In the example, this is the first image in the collection.

The “[Image=0]” string is automatically entered in the section, where 0 is the image’s index in the image collection.

Alternatively, you can directly enter this sequence in the section manually, without using the Image button.

Any number of images and the textual information can be displayed in each section. If images are assigned, the content is displayed from left to right. However, it will be clipped, if it doesn’t fit inside a section.

Assigning images and text in code

The following example shows how to assign an image to the left section of a report’s header and footer, and the textual information to the right:

// ...
const
  ATitleImage: string = '[Image=0]';
  ATitleText: string = 'ExpressSpreadSheet';
begin
  with <dxComponentPrinter1Link1>.PrinterPage.PageHeader do
  begin
    LeftTitle.Add(ATitleImage);
    RightTitle.Add(ATitleText);
    RightTextAlignY := taCenterY;
  end;
  with <dxComponentPrinter1Link1>.PrinterPage.PageFooter do
  begin
    LeftTitle.Add(ATitleImage);
    RightTitle.Add(ATitleText);
    RightTextAlignY := taCenterY;
  end;
end;

This is the code execution result:

See Also