FMX.ImageList Sample
Contents
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 Athens | 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:
- Navigate to the location given above, and open ImageListDemo.dproj.
- Press Shift+Ctrl+F9 or choose Run > Run Without Debugging. The Demo of images application is built and runs.
- 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.
- Panel1 containing the following controls:
- TabItem2, called Bitmap and Image, containing the following controls:
- Panel2 containing the following controls:
- Selection1 containing:
- Rectangle1 containing:
- Glyph1 control references to the
MainDataModule.ImageList1
image list.
- Glyph1 control references to the
- Rectangle1 containing:
- 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
, andListBoxItem4
. The ComboBox1.Images property references to theMainDataModule.ImageList1
image list. - ListBox1 containing the following TListBoxItem items:
ListBoxItem5
,ListBoxItem6
,ListBoxItem7
, andListBoxItem8
. The ListBox1.Images property references to theMainDataModule.ImageList1
image list. Some of the list box items show images - specified by the ImageIndex property - from theMainDataModule.ImageList1
image list. - TreeView1 containing the hierarchical structure of several TTreeViewItem items from
TreeViewItem1
untilTreeViewItem14
. The TreeView1.Images property references to theMainDataModule.ImageList1
image list. Some of the tree view items show images - specified by the ImageIndex property - from theMainDataModule.ImageList1
image list.
- Splitter3 providing the possibility of resizing client area.
- Panel3 containing the following controls:
- TabItem4, called None, containing the following controls:
- TabItem1, called Image, containing the following controls:
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 theImageList1
icon. The Image List Editor opens withImageList1
. 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:
- The Right and Left arrows increase or decrease the index of the image being shown.
- The Up Cache Size and Down Cache Size buttons increase or decrease the CacheSize property on
1
. - The Clear Cache button to clear the internal cache.
- The Dormant check box sets or clears whether the actual image is stored with this bitmap item (the Dormant property).
- The Add New Source button creates a new image and adds it to the image list.
- The Update Text button demonstrates the drawing of a text over the current image.
- 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.