FMX.ImageList Sample

This sample illustrates how to create and use image lists in FireMonkey. You can view the video demonstrating features programmed in this Sample.

Location

You can find the ImageList sample project at:

• Start | Programs | Embarcadero RAD Studio Sydney | Samples and navigate to:
  • Object Pascal\Multi-Device Samples\User Interface\ImageList
  • CPP\Multi-Device Samples\User Interface\ImageList
• Subversion Repository:
  • You can find Delphi and C++ code samples in GitHub Repositories. Search by name into the samples repositories according to your RAD Studio version.

Description

This sample shows how to use FireMonkey image lists. In the Using TImageList Image Lists as Centralized Collections of Images tutorial, this example is used:

• To demonstrate how to use the Image List Editor.
• To describe the code implementing the ActnNextImageExecute event handler of the OnExecute event assigned to the Add New Source button. This button adds, to an image in the Destination collection, a new layer and creates a new multi-resolution bitmap in this layer.
• To describe the code implementing the ActnUpdateTextExecute event handler of the OnExecute event assigned to the Update Text button. This button draws the specified text over the main image in a layer.
• To describe the code demonstrating how to draw images from an image list on the surface of your own controls.

How to Use the Sample

You can view the video demonstrating how to use this Sample.

To run this sample:

1. Navigate to the location given above, and open ImageListDemo.dproj.
2. Press Shift+Ctrl+F9 or choose Run > Run Without Debugging. The Demo of images application is built and runs.
3. Open the Image, Bitmap and Image, Bitmap, and None tabs, try to click different controls in each tab and carefully read the displayed messages, observe changing images and additional information.

Classes

The UnitDataModule unit contains the ImageList1 image list.

The UnitMain unit contains the main window of the sample containing the following components:

• MainMenu1 with the Files, Bitmap and Image, Bitmap, and None, MenuItems, each of them containing several other MenuItems. Some menu items show images from the ImageList1 image list.
• PopupMenu1 containing several MenuItems. Menu items show images from the ImageList1 image list.
• ActionList1 containing several Actions.
• BindingsList1 containing several Actions.
• BindingsList1 containing several methods.
• PrototypeBindSource1.

• TabControl1 containing several TabItems:
  • TabItem1, called Image, containing the following controls:
    • Panel1 containing the following controls:
      • Button1 called Next Image.
      • Button2 showing only the image.
      • CornerButton1 called Next Image.
      • SpeedButton1 called Next Image.
    • Splitter1 providing the possibility of resizing client area.
  • TabItem2, called Bitmap and Image, containing the following controls:
    • Panel2 containing the following controls:
      • CheckBox1 called Dormant.
      • Button3 called Up Cache Size.
      • Button4 called Down Cache Size .
      • Button5 called Clear Cache.
      • Button6 called Update Text.
      • Button7 called Add New Source.
      • Label2 called Label2.
    • Selection1 containing:
      • Rectangle1 containing:
        • Glyph1 control references to the MainDataModule.ImageList1 image list.
    • Splitter2 providing the possibility of resizing client area.
    • ToolBar1 containing the following controls:
      • Label1 called ActnInfo.
      • SpeedButton2 the Left arrow button (having the arrowlefttoolbutton in StyleLookup property).
      • SpeedButton3 the Right arrow button (having the arrowrighttoolbutton in StyleLookup property).
  • TabItem3, called Bitmap, containing the following controls:
    • Panel3 containing the following controls:
      • CheckBox3 called ShowCheckboxes.
      • ComboBox1 containing the following TListBoxItem items: ListBoxItem1, ListBoxItem2, ListBoxItem3, and ListBoxItem4. The ComboBox1.Images property references to the MainDataModule.ImageList1 image list.
      • ListBox1 containing the following TListBoxItem items: ListBoxItem5, ListBoxItem6, ListBoxItem7, and ListBoxItem8. The ListBox1.Images property references to the MainDataModule.ImageList1 image list. Some of the list box items show images - specified by the ImageIndex property - from the MainDataModule.ImageList1 image list.
      • TreeView1 containing the hierarchical structure of several TTreeViewItem items from TreeViewItem1 until TreeViewItem14. The TreeView1.Images property references to the MainDataModule.ImageList1 image list. Some of the tree view items show images - specified by the ImageIndex property - from the MainDataModule.ImageList1 image list.
    • Splitter3 providing the possibility of resizing client area.
  • TabItem4, called None, containing the following controls:
    • ToolBar2 containing the following controls:
      • CheckBox2 called Images.
      • and several Buttons named Clear Items, Add Item, Add Item with Bitmap, Add Bitmap and Image.
    • ListView1 containing several items.
    • ListView2 managed by controls in the ToolBar2.
    • Splitter4 divides the client area into resizable panes.

Implementation

The ImageListDemo.dproj project contains the main UnitMain unit, that includes the UnitDataModule unit:

• The UnitDataModule unit contains the ImageList1: TImageList; image list. Open this module in the Form Designer and double-click the ImageList1 icon. The Image List Editor opens with ImageList1. Look at the images and their numbers in the List of Images tab.
• The UnitMain unit implements the business functionality of the project.

How To Use Image Lists describes how to create such projects that use image lists.

The Demo of images application has the Image, Bitmap and Image, Bitmap, and None tabs. Here we shortly describe the functionality implemented in these tabs.

Image Tab

Now click the first Image tab. This tab contains four types of the Next Image button. Each button shows the image. Click any of these buttons -- check that the image containing the next index in the ImageList1 image list is drawn in each button. Note that in the Object Inspector, each button shows both Images and ImageIndex properties. Try to change the ImageIndex value.

Bitmap and Image Tab

In the Demo of images application, click the Bitmap and Image tab. This tab contains several controls managing images in the images list:

1. The Right and Left arrows increase or decrease the index of the image being shown.
2. The Up Cache Size and Down Cache Size buttons increase or decrease the CacheSize property on 1.
3. The Clear Cache button to clear the internal cache.
4. The Dormant check box sets or clears whether the actual image is stored with this bitmap item (the Dormant property).
5. The Add New Source button creates a new image and adds it to the image list.
6. The Update Text button demonstrates the drawing of a text over the current image.
7. The Right and Left arrow buttons draw the next or previous image from the ImageList1 image list over the None caption of the None tab.

Open this Bitmap and Image tab in the Form Designer, double-click a control so you can see the code implementing the functionality of the control . Investigate this code.

The 'FMX.TImageList Code Sample' section of the 'Using TImageList Image Lists as Centralized Collections of Images' topic describes some details of the code implementing the Add New Source and Update Text buttons and the code demonstrating how to draw images from an image list on the surface of your own controls.

Bitmap Tab

Now click the first Bitmap tab. This tab contains three list controls: ComboBox1, ListBox1, and TreeView1. These list controls show the Images property - in the Object Inspector - in which you can select an image list to use. Notice that each item control in these lists shows the ImageIndex property - in the Object Inspector - in which you can select a number (index) of an image in the image list. Try to change the ImageIndex value.

None Tab

Now click the last None tab. This tab contains the Add Items, Add Items with Bitmap, and Add Bitmap and Image buttons adding into the ListView2: TListView; list view a new item showing the Image1.Bitmap bitmap and/or images from the ImageList1 image list. The Clear Items button clears all items from the ListView2. The Images check box switches showing or hiding images from the ImageList1 image list.

See Also

• Video demonstrating features programmed in this 'FMX.ImageList Sample'
• Using TImageList Image Lists as Centralized Collections of Images
• Image List Editor

• Video demonstrating typical steps required to create a new Image List in your FireMonkey project