Displaying Images in Tabs

• Dec 28, 2020
• 2 minutes to read

This topic describes how to display images within tabs. The mechanism for implementing this feature for both the TcxTabControl and TcxPageControl are considered.

Each tab displayed by a tab control can display an image and text caption. If you want to display images within tabs you must specify the source of these images. You should assign a TImageList component, containing the desired images, to the Images property for this purpose. After doing so, images are displayed in tabs in the order they were stored within the assigned image list.

The following sample code assigns images to tabs in their default order. Note, that an image list component must exist for this purpose.

cxPageControl1.Images := ImageList1;

Tab controls allow you to assign any image from an assigned image list to any of its tabs. The manner in which it is implemented is different for the TcxTabControl and TcxPageControl controls. However, the common element is that you should assign the index of the desired image to the ImageIndex property of the object representing the desired tab.

The following sample code assigns images to tabs of the TcxTabControl control. The ImageIndex property of TcxTab objects representing tabs is used for this purpose.

var i: Integer;
// ...
for i := 0 to cxTabControl1.Tabs.Count - 1 do
  cxTabControl1.Tabs.Tabs[i].ImageIndex := i;

The same can be implemented for the TcxPageControl control. The ImageIndex property of TcxTabSheet objects representing pages is used for this purpose.

var i: Integer;
// ...
for i := 0 to cxPageControl1.PageCount - 1 do
  cxPageControl1.Pages[i].ImageIndex := i;

The last method of assigning images to tabs is by writing an OnGetImageIndex event handler. This approach is the same for both controls. The event fires for every tab each time the control is repainted. It gives you the ability to assign an image to the current tab. Note that writing an OnGetImageIndex event handler has the highest priority of all described methods. Consider the following sample code:

procedure TForm1.cxPageControl1GetImageIndex(Sender: TObject; TabIndex: Integer; var ImageIndex: Integer);
begin
  ImageIndex := TabIndex;
end;

The three examples above don’t change the default image layout.

Note

You can change the width of borders surrounding tab images. Use the ImageBorder property for this purpose.