Difference between revisions of "TImageList"

From Free Pascal wiki
 
(30 intermediate revisions by 11 users not shown)
Line 1: Line 1:
'''TImageList''' is a list of [[TImage|images]], e.g. for creating a [[TToolBar|Toolbar]].
+
{{TImageList}}
  
[[File:Win7LazarusStdToolbar.png|Toolbars use ImageLists]]
+
'''TImageList''' [[image:timagelist.png]] is a component that provides a list of [[TImage|images]] that can be used within other components like  [[TToolBar]] of [[TActionList]].
  
See [[doc:lcl//controls/timagelist.html|TImageList]] in the LCL reference for details.
+
== Example with ComboBox ==
 +
To use TImageList, drop an TImageList object onto the form. In this example we need six images.
  
 +
All images must be the same size. If two sizes of image are to be used, then two TImageLists must be used.
  
== Example with ComboBox ==
+
Set the height and width of the images in the Object Inspector; In this case 50px wide by 18px high.
 
 
To use TImageList, drop an ImageList object onto the form. In this example we need six images.
 
  
All images must be the same size. If two sizes of image are to be used, then two ImageLists must be used.
+
Set Style to csOwnerDrawFixed.
  
Set the height and width of the images in the Object Inspector; In this case 50px wide by 18px high.
+
Double-click on the TImageList icon to open the TImageList editor. Make sure that the icons show correctly when selected. If they are smaller than expected, check the size in the Object Inspector <F11>. You may have to reload the images.
  
Double-click on the ImageList icon to open the ImageList editor. Make sure that the icons show correctly when selected. If they are smaller than expected, check the size in the Object Inspector <F11>. You may have to reload the images.
+
[[File:ImageListEd.png]]
  
 
Place a ComboBox on the form and name it cbSymbols.
 
Place a ComboBox on the form and name it cbSymbols.
Line 20: Line 20:
 
In the FormCreate event enter:
 
In the FormCreate event enter:
  
  cbSymbols.Items.Clear;
+
<syntaxhighlight lang=pascal>
  For I := 0 To 5 Do
+
cbSymbols.Items.Clear;
    cbSymbols.Items.Add('');
+
for I := 0 to 5 do
  cbSymbols.ItemIndex := 0;  
+
  cbSymbols.Items.Add('');
 +
cbSymbols.ItemIndex := 0;  
 +
</syntaxhighlight>
  
 
This will write 6 blank entries, and select the first.
 
This will write 6 blank entries, and select the first.
Line 29: Line 31:
 
In the OnDrawItem event for cbSymbols place the following code:
 
In the OnDrawItem event for cbSymbols place the following code:
  
Procedure TMyForm.cbSymbolsDrawItem(Control: TWinControl;
+
<syntaxhighlight lang=pascal>
  Index: Integer; ARect: TRect; State: TOwnerDrawState);
+
procedure TMyForm.cbSymbolsDrawItem(  
var
+
  aControl: TWinControl;
  cnv: TCanvas;
+
  iIndex: Integer;  
begin
+
  aRect: TRect;  
  if not (Control is TComboBox) then Exit;
+
  aState: TOwnerDrawState );
  cnv:=TComboBox(Control).Canvas;
+
var
  Imagelist1.Draw(cnv, ARect.Left+2, Arect.Top+2, index);
+
  cnv: TCanvas;
End;
+
begin
 +
  if not (aControl is TComboBox) then exit;
 +
  cnv := TComboBox( aControl ).Canvas;
 +
  Imagelist1.Draw( cnv, aRect.Left+2, aRect.Top+2, iIndex );
 +
end;
 +
</syntaxhighlight>
 +
 
 +
The adjustments (+2) are to center the image in the item, if necessary.
 +
 
 +
[[File:combo.png]]
 +
 
 +
== Example with SpeedButton ==
 +
 
 +
Add images to the ImageList1 like in the previous example and use:
 +
<syntaxhighlight lang=pascal>
 +
  ImageList1.GetBitmap(iIndex,SpeedButton1.Glyph);   
 +
</syntaxhighlight>
 +
 
 +
== Multiple-resolution TImageList in Lazarus 1.9 and newer ==
 +
 
 +
In Lazarus 1.9 the TImageList was rewritten to support multiple resolutions of one image.
 +
 
 +
[[File:ImageListEd-1.9.png]]
 +
 
 +
Every LCL control that supports ImageList has now a new [Images]Width property to decide what custom width at 96 PPI (100% scale) is to be used. Example: TToolBar.Images/ImageWidth, TListView.LargeImages/LargeImagesWidth.
 +
 
 +
Set the Scaled property to True and the image list will automatically pick up the scaled image in your High-DPI aware LCL application.
 +
 
 +
=== Demo applications ===
 +
There are 2 demo applications in Lazarus sources:
 +
* examples/imagelist_highdpi_designtime
 +
* examples/imagelist_highdpi_runtime
 +
 
 +
=== Changes affecting backwards compatibility ===
 +
==== Add method ====
 +
* Old behavior: the image got sliced if too big or extended if too small.
 +
* New behavior: the image is scaled to all resolutions in the image list.
 +
* Reason: Image List now supports multiple resolutions.
 +
* Remedy: use AddSliced (if the image consists of several icons to be added) or AddSlice (if one image from a custom rect has to be added - also rect outside the image is supported).
 +
 
 +
==High-DPI alternative for Lazarus 1.8 and older: resize all images in TImageList==
 +
 
 +
This is useful for example for [[High DPI]] scaling to get icons with higher resolution for TActionList, TMainMenu and TToolBar.
 +
Note: This may not work correctly with all widgetsets on all platforms. Note also: This code is not required for Laz 1.9+.
 +
 
 +
<syntaxhighlight lang=pascal>
 +
procedure ScaleImageList(ImgList: TImageList; NewWidth, NewHeight: Integer);
 +
var
 +
  TempImgList: TImageList;
 +
  TempBmp1: TBitmap;
 +
  TempBmp2: TBitmap;
 +
  I: Integer;
 +
begin
 +
  TempImgList := TImageList.Create(nil);
 +
  TempBmp1 := TBitmap.Create;
 +
  TempBmp1.PixelFormat := pf32bit;
 +
  TempBmp2 := TBitmap.Create;
 +
  TempBmp2.PixelFormat := pf32bit;
 +
  TempBmp2.SetSize(NewWidth, NewHeight);
 +
  try
 +
    TempImgList.Width := NewWidth;
 +
    TempImgList.Height := NewHeight;
 +
 
 +
    for I := 0 to ImgList.Count - 1 do begin
 +
      // Load image for given index to temporary bitmap
 +
      ImgList.GetBitmap(I, TempBmp1);
 +
 
 +
      // Clear transparent image background
 +
      TempBmp2.Canvas.Brush.Style := bsSolid;
 +
      TempBmp2.Canvas.Brush.Color := TempBmp2.TransparentColor;
 +
      TempBmp2.Canvas.FillRect(0, 0, TempBmp2.Width, TempBmp2.Height);
  
The adjustments (+2) are to centre the image in the item, if necessary.
+
      // Stretch image to new size
 +
      TempBmp2.Canvas.StretchDraw(Rect(0, 0, TempBmp2.Width, TempBmp2.Height), TempBmp1);
 +
      TempImgList.Add(TempBmp2, nil);
 +
    end;
  
 +
    ImgList.Assign(TempImgList);
 +
  finally
 +
    TempImgList.Free;
 +
    TempBmp1.Free;
 +
    TempBmp2.Free;
 +
  end;
 +
end;
 +
</syntaxhighlight>
  
 +
== See also ==
 +
* [[doc:lcl//controls/timagelist.html|TImageList doc]]
 +
* [[TImage]]
  
[[Category:LCL]]
+
{{LCL Components}}

Latest revision as of 10:36, 26 April 2020

English (en) français (fr) русский (ru) 中文(中国大陆)‎ (zh_CN)

TImageList timagelist.png is a component that provides a list of images that can be used within other components like TToolBar of TActionList.

Example with ComboBox

To use TImageList, drop an TImageList object onto the form. In this example we need six images.

All images must be the same size. If two sizes of image are to be used, then two TImageLists must be used.

Set the height and width of the images in the Object Inspector; In this case 50px wide by 18px high.

Set Style to csOwnerDrawFixed.

Double-click on the TImageList icon to open the TImageList editor. Make sure that the icons show correctly when selected. If they are smaller than expected, check the size in the Object Inspector <F11>. You may have to reload the images.

ImageListEd.png

Place a ComboBox on the form and name it cbSymbols.

In the FormCreate event enter:

 cbSymbols.Items.Clear;
 for I := 0 to 5 do
   cbSymbols.Items.Add('');
 cbSymbols.ItemIndex := 0;

This will write 6 blank entries, and select the first.

In the OnDrawItem event for cbSymbols place the following code:

procedure TMyForm.cbSymbolsDrawItem( 
  aControl: TWinControl;
  iIndex: Integer; 
  aRect: TRect; 
  aState: TOwnerDrawState );
var
  cnv: TCanvas;
begin
  if not (aControl is TComboBox) then exit;
  cnv := TComboBox( aControl ).Canvas;
  Imagelist1.Draw( cnv, aRect.Left+2, aRect.Top+2, iIndex );
end;

The adjustments (+2) are to center the image in the item, if necessary.

combo.png

Example with SpeedButton

Add images to the ImageList1 like in the previous example and use:

   ImageList1.GetBitmap(iIndex,SpeedButton1.Glyph);

Multiple-resolution TImageList in Lazarus 1.9 and newer

In Lazarus 1.9 the TImageList was rewritten to support multiple resolutions of one image.

ImageListEd-1.9.png

Every LCL control that supports ImageList has now a new [Images]Width property to decide what custom width at 96 PPI (100% scale) is to be used. Example: TToolBar.Images/ImageWidth, TListView.LargeImages/LargeImagesWidth.

Set the Scaled property to True and the image list will automatically pick up the scaled image in your High-DPI aware LCL application.

Demo applications

There are 2 demo applications in Lazarus sources:

  • examples/imagelist_highdpi_designtime
  • examples/imagelist_highdpi_runtime

Changes affecting backwards compatibility

Add method

  • Old behavior: the image got sliced if too big or extended if too small.
  • New behavior: the image is scaled to all resolutions in the image list.
  • Reason: Image List now supports multiple resolutions.
  • Remedy: use AddSliced (if the image consists of several icons to be added) or AddSlice (if one image from a custom rect has to be added - also rect outside the image is supported).

High-DPI alternative for Lazarus 1.8 and older: resize all images in TImageList

This is useful for example for High DPI scaling to get icons with higher resolution for TActionList, TMainMenu and TToolBar. Note: This may not work correctly with all widgetsets on all platforms. Note also: This code is not required for Laz 1.9+.

procedure ScaleImageList(ImgList: TImageList; NewWidth, NewHeight: Integer);
var
  TempImgList: TImageList;
  TempBmp1: TBitmap;
  TempBmp2: TBitmap;
  I: Integer;
begin
  TempImgList := TImageList.Create(nil);
  TempBmp1 := TBitmap.Create;
  TempBmp1.PixelFormat := pf32bit;
  TempBmp2 := TBitmap.Create;
  TempBmp2.PixelFormat := pf32bit;
  TempBmp2.SetSize(NewWidth, NewHeight);
  try
    TempImgList.Width := NewWidth;
    TempImgList.Height := NewHeight;

    for I := 0 to ImgList.Count - 1 do begin
      // Load image for given index to temporary bitmap
      ImgList.GetBitmap(I, TempBmp1);

      // Clear transparent image background
      TempBmp2.Canvas.Brush.Style := bsSolid;
      TempBmp2.Canvas.Brush.Color := TempBmp2.TransparentColor;
      TempBmp2.Canvas.FillRect(0, 0, TempBmp2.Width, TempBmp2.Height);

      // Stretch image to new size
      TempBmp2.Canvas.StretchDraw(Rect(0, 0, TempBmp2.Width, TempBmp2.Height), TempBmp1);
      TempImgList.Add(TempBmp2, nil);
    end;

    ImgList.Assign(TempImgList);
  finally
    TempImgList.Free;
    TempBmp1.Free;
    TempBmp2.Free;
  end;
end;

See also


LCL Components
Component Tab Components
Standard TMainMenu • TPopupMenu • TButton • TLabel • TEdit • TMemo • TToggleBox • TCheckBox • TRadioButton • TListBox • TComboBox • TScrollBar • TGroupBox • TRadioGroup • TCheckGroup • TPanel • TFrame • TActionList
Additional TBitBtn • TSpeedButton • TStaticText • TImage • TShape • TBevel • TPaintBox • TNotebook • TLabeledEdit • TSplitter • TTrayIcon • TControlBar • TFlowPanel • TMaskEdit • TCheckListBox • TScrollBox • TApplicationProperties • TStringGrid • TDrawGrid • TPairSplitter • TColorBox • TColorListBox • TValueListEditor
Common Controls TTrackBar • TProgressBar • TTreeView • TListView • TStatusBar • TToolBar • TCoolBar • TUpDown • TPageControl • TTabControl • THeaderControl • TImageList • TPopupNotifier • TDateTimePicker
Dialogs TOpenDialog • TSaveDialog • TSelectDirectoryDialog • TColorDialog • TFontDialog • TFindDialog • TReplaceDialog • TTaskDialog • TOpenPictureDialog • TSavePictureDialog • TCalendarDialog • TCalculatorDialog • TPrinterSetupDialog • TPrintDialog • TPageSetupDialog
Data Controls TDBNavigator • TDBText • TDBEdit • TDBMemo • TDBImage • TDBListBox • TDBLookupListBox • TDBComboBox • TDBLookupComboBox • TDBCheckBox • TDBRadioGroup • TDBCalendar • TDBGroupBox • TDBGrid • TDBDateTimePicker
Data Access TDataSource • TCSVDataSet • TSdfDataSet • TBufDataset • TFixedFormatDataSet • TDbf • TMemDataset
System TTimer • TIdleTimer • TLazComponentQueue • THTMLHelpDatabase • THTMLBrowserHelpViewer • TAsyncProcess • TProcessUTF8 • TProcess • TSimpleIPCClient • TSimpleIPCServer • TXMLConfig • TEventLog • TServiceManager • TCHMHelpDatabase • TLHelpConnector
Misc TColorButton • TSpinEdit • TFloatSpinEdit • TArrow • TCalendar • TEditButton • TFileNameEdit • TDirectoryEdit • TDateEdit • TTimeEdit • TCalcEdit • TFileListBox • TFilterComboBox • TComboBoxEx • TCheckComboBox • TButtonPanel • TShellTreeView • TShellListView • TXMLPropStorage • TINIPropStorage • TJSONPropStorage • TIDEDialogLayoutStorage • TMRUManager • TStrHolder
LazControls TCheckBoxThemed • TDividerBevel • TExtendedNotebook • TListFilterEdit • TListViewFilterEdit • TLvlGraphControl • TShortPathEdit • TSpinEditEx • TFloatSpinEditEx • TTreeFilterEdit • TExtendedTabControl •
RTTI TTIEdit • TTIComboBox • TTIButton • TTICheckBox • TTILabel • TTIGroupBox • TTIRadioGroup • TTICheckGroup • TTICheckListBox • TTIListBox • TTIMemo • TTICalendar • TTIImage • TTIFloatSpinEdit • TTISpinEdit • TTITrackBar • TTIProgressBar • TTIMaskEdit • TTIColorButton • TMultiPropertyLink • TTIPropertyGrid • TTIGrid
SQLdb TSQLQuery • TSQLTransaction • TSQLScript • TSQLConnector • TMSSQLConnection • TSybaseConnection • TPQConnection • TPQTEventMonitor • TOracleConnection • TODBCConnection • TMySQL40Connection • TMySQL41Connection • TMySQL50Connection • TMySQL51Connection • TMySQL55Connection • TMySQL56Connection • TMySQL57Connection • TSQLite3Connection • TIBConnection • TFBAdmin • TFBEventMonitor • TSQLDBLibraryLoader
Pascal Script TPSScript • TPSScriptDebugger • TPSDllPlugin • TPSImport_Classes • TPSImport_DateUtils • TPSImport_ComObj • TPSImport_DB • TPSImport_Forms • TPSImport_Controls • TPSImport_StdCtrls • TPSCustomPlugin
SynEdit TSynEdit • TSynCompletion • TSynAutoComplete • TSynMacroRecorder • TSynExporterHTML • TSynPluginSyncroEdit • TSynPasSyn • TSynFreePascalSyn • TSynCppSyn • TSynJavaSyn • TSynPerlSyn • TSynHTMLSyn • TSynXMLSyn • TSynLFMSyn • TSynDiffSyn • TSynUNIXShellScriptSyn • TSynCssSyn • TSynPHPSyn • TSynTeXSyn • TSynSQLSyn • TSynPythonSyn • TSynVBSyn • TSynAnySyn • TSynMultiSyn • TSynBatSyn • TSynIniSyn • TSynPoSyn
Chart TChart • TListChartSource • TRandomChartSource • TUserDefinedChartSource • TCalculatedChartSource • TDbChartSource • TChartToolset • TChartAxisTransformations • TChartStyles • TChartLegendPanel • TChartNavScrollBar • TChartNavPanel • TIntervalChartSource • TDateTimeIntervalChartSource • TChartListBox • TChartExtentLink • TChartImageList
IPro TIpFileDataProvider • TIpHttpDataProvider • TIpHtmlPanel
Virtual Controls TVirtualDrawTree • TVirtualStringTree • TVTHeaderPopupMenu