FMX.ImageList Sample

From Appmethod Code Examples
Jump to: navigation, search

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:

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:

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:

  • TabControl1 containing several TabItems:
    • TabItem1, called Image, containing the following controls:
    • TabItem2, called Bitmap and Image, containing the following controls:
    • 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