Image on Tspeedbutton with Timagelist

Question

Greetings to all!

I’m starting to develop in Delphi 10 Seattle, before I used Delphi 7. I’m trying to create a toolbar, I’m using Ttoolbar with a Tactionlist, Tspeedbuttons and Timagelist. I’m using square images with 32px, but when I choose the image, by Imageindex, in Tspeedbutton, the image is smaller than 32px, I think it is with 16px.

How can I set the image size in Tspeedbutton using a Timagelist ?

Edited on 06/08/2016 for inclusion of example code Unit:

unit Unit1;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs;

type
  TForm1 = class(TForm)
    SpeedButton1: TSpeedButton;
    ImageList1: TImageList;
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

end.

DFM

object Form1: TForm1
  Left = 0
  Top = 0
  Caption = 'Form1'
  ClientHeight = 231
  ClientWidth = 421
  FormFactor.Width = 320
  FormFactor.Height = 480
  FormFactor.Devices = [Desktop]
  DesignerMasterStyle = 0
  object SpeedButton1: TSpeedButton
    Images = ImageList1
    ImageIndex = 0
    Position.X = 156.000000000000000000
    Position.Y = 32.000000000000000000
    Size.Width = 117.000000000000000000
    Size.Height = 22.000000000000000000
    Size.PlatformDefault = False
    Text = 'SpeedButton1'
  end
  object ImageList1: TImageList
    Source = <
      item
        MultiResBitmap = <
          item
            Scale = 2.000000000000000000
            Width = 32
            Height = 32
            PNG = {
              89504E470D0A1A0A0000000D4948445200000020000000200806000000737A7A
              F4000000017352474200AECE1CE90000000467414D410000B18F0BFC61050000
              072E4944415458479D576D6C5465167E66EEDCF96AE9509CB6CC143A8084EFF8
              B16EAA488040502306297E60F4871A51134D8C89C15D5D77FF18D8FD21313126
              9BCD66FFEC8FFDB1648DA001242E6E9664356A549482424BDB99964E3F66DA4E
              A79DAF3B77669FF3CEDC6166182AF121CFEDE53DE73DE7BCE73DEFB9EFD87093
              E87E052DBE763C0F0DCF146DB8AD3C0C1B2D582C98F8C151C4DFE351FCEDABF7
              315B5659103F17806DC741ACB22DC1318F139BB66ED88A951D212CF707502CE4
              30974B209D9D21134864A6313C19C5442281683C837C1EBDD9247AFE731803B4
              532C99BB1E0B05A0ED3A8C3FBB5C78F1A5075FC396755B306B8CC0C00C67E550
              2C166072C9A6693218206764119F9D4034368048EC274426E6301A074C037F3D
              F5065EA63DB364B616370A40DFF94784EF59FBABC01F1E791749F4235588E0EA
              E40F189FBA80786200998CA9D2AEC0BF2E5D87CFBB1C2DCDB7C2ED08E2CAE8B7
              B838729E7380D939444FFE16216A1AA509D7D028007DFB210CBD70DFD3C19EEE
              27305D3887B1E9F33877F928B24601767B6952C57915549EF9D01D0E74F87630
              434E7C3BF06F8CC6B2B81AC3E8A9DF6005356A82A837A3EF3A84C8933B1E5DBA
              FBD70F21A30DA277F0430C8DF642D3003BB52DC7E2AC58DE595584A557051917
              D162EF6AB47AEFC2D7FD2710E6960C8F61ECF49BE8A2A81204CD56A0ED7A1B7F
              D9B86AE5B6C7B7EC47D17D15DFF5FD1323133F810B82262B172F24B71C793E98
              109865672A88B2DC7A4F1B53D44DE2D68E9D984DF5633E6B3607EF45F0CA6738
              414D153ECD2AD8EE3E80352E2F0EECDFF2186C9E299C1F3CCE22EAABACDC82AC
              4E9CEFD9700CAF6E2D2ACABB8C5919B120F366D311CCA4BFC11D2B77A1B38DB5
              E2C101F145B1B26A05A0B7ACC207F7DFB90DCD8B80A9641FC2E3E74BCE454354
              CB640F50AB0EB5EE95790AF2AE3251A56751E6CFA4FBA139B258D3B911413FB7
              86BE28D5C95200CBEF85DFE9C2FAF5CB43F078ECF87EF06843E716650BEAA1C6
              1AE80A6DB43331F75F74F937A1CD6783D38DF5E293521580B67A079E5BDBD9A9
              F67A7CE62272791E31A98E06C62AAC47239D32A51E8CA281AC19455B4B08ADCC
              F21AFAA4544A0B4EDD8BA7962C6A82DBEDC218035045448140B6B5C08745ABC2
              EB216322ABD12D8914C4DE9C3104BFAF0B4D6EC0419F1C724A006EBB8EF5BE26
              3BBCEE262458349232992169954ACFB287A5AB986DB0073256A343CA5CA52ADE
              C98C11456BF3521580C62DE7A89B4987107933AD569065EF94BC48F4AADAD71D
              43C877ADE06E8437791AEA114E1CC7C7977AA0D39EC460F09F839E55DE4BEA8E
              F25A19353F2C7933AFD22F23956ABF09E73782CCBDEE74D44225BBD4347249E4
              8DFC35A5EB17F4CBB180AD520064D6287DD9AC0C48687214258DBF1432576C58
              35D520036AA87DF7118C6F60877EE0CE273134FF2FA6CD5002A964A903D32A26
              A25427DCF3CDB5CBFAD31736B8C459D989F894BD964D968E28DA0E567BD0BD0F
              9F7D7F141723C0C983E810BDA29941DF5C06882546E075042AD14A23D259A22E
              F62C4F15E5FFF568A42373AB9B995B0B607A6E0CF3F4253E395A14719E631FA7
              3838911846B36345CD96C95C5981C5EA1E510D1913598D6E495441136D4FCE44
              5400E29343790920D3FB11FE319D04269361B81080AEE90DFB7A0DEBD148A74C
              B1E5A04DB11DA30FF1253E29CD4800B94404E3B9140626678A08C77BD1EEDCBE
              60002AAD75B8D1774328B6FCB419A16DF121BEC427A53999C692C2FC8F1FE155
              B9C35DBE7A0166CE85C58ED528D41912AAD3418667AF9D0E7997B19A6A2F536C
              F8C4166DF6D3B6F8105F94CE93A6A8099C6460DBEB782FB8027BD72E73E19EB5
              3D8817BE40D28C54BED9162AA7A35C2C1AAD58D55E0D11376B5D5862DF8C2F2F
              1DC3A5912C468770FCEC3B2A802899936F9E404E9919FE1CE7966DC57E9BDDF4
              A67261ACBE6527AD6691C69452AAF40852526E1DB3CAA5A54CB57D1C6FD17825
              B377E39B2B2778654F63620AF1336FE3594AC5394B9173E551866C45A1FF0C4E
              F9BBD1C3ABB7779617894E5F377CCE10B58799CE7237A003751AAA58A9191594
              8E76C74E6846079D9F54CE2351C44EFF0E7BA8314CCA8F1665AC3A00C9588E34
              7867FBA4FD6EECE31DCE9348F5C165F76059D37678B45BE8A4C84052DCBC8272
              6A51B7E9F0DA97A155BB1DADE8E6757C80179BFF61306A62228EA9D36FE161DA
              1E22259DECF92548CCF5600B51B795D0B683F8BD2F808782F4DBB6D806FFA210
              6F345DFCA40678AC9C35FDC234736C32514CB2BCE5A849B54BC125A23871F608
              0E51254CC6C805AFE5162488567269E00E6CDAF8280E7BBC58213719F996ABEF
              39535D0D69D7D2608472CED3290C5DF8006F45CFA197E231729ABCA91F261664
              7BBC24D78F36AF1F1D1BF7614F6B10F739166165CDF205B4944F62707A149F5E
              F8909D35A6CE397F178179408A941ABB0E0B052010B964430269225B481FE921
              EB72A08A2A4D2648293239E7E258565D1F6E053F1740352423D22FB801EA1655
              3F579C4871C9F192626EB8E25A00FF070AD8D2DC0DBED52F0000000049454E44
              AE426082}
            FileName = 'D:\Documentos\Imagens\Icones Pesquisar\32x32\add.png'
          end>
        Name = 'add'
      end>
    Destination = <
      item
        Layers = <
          item
            Name = 'add'
            SourceRect.Right = 32.000000000000000000
            SourceRect.Bottom = 32.000000000000000000
          end>
      end>
    Left = 88
    Top = 20
  end
end

In the above example I am using only Tspeedbutton and Timagelist.

Thank you!

God bless us!

Answer 1

Let’s say we have Speedbutton1 (Tspeedbutton) and Imagelist1 (Timagelist)

The image size will be set in the Timagelist properties, Height and Width, if you assign 32 and 32 respectively and only after adding an image to the Imagelist of the size of 32px and also the size of the Speedbutton is greater than or equal to 32px side the size of the image shown will be 32px.

If you add the image before setting these measures it will happen that the image will be smaller than desired.

To assign an image of Imagelist to Speedbutton just put the following code...

ImageList1.GetBitmap(0, SpeedButton1.Glyph);

Being 0 the image index in Imagelist1.

Answer 2

I consulted forums and continued searching on the internet and am posting an option to solve the problem.

The size of the image in Tspeedbutton is set through a stylesheet (stylesheet), and only by this option it was possible to change it.

How to change:

First click with the right click on any Tspeedbutton of your form, and choose the option Edit Default Style....

In style editing mode, in panel Structure locate and select the option glyphstyle: Tglyph. In the Object Inspector, search for for size. Note that the height(Height) and the Width(Width) will be with the value of 16 (pixels), change its values to 32 or the size you want.

When you’re done click the Apply and Close button.

Done this, all Tspeedbuttons will present the images with 32px or in the size you set.

Observing: The size of Tspeedbutton should fit the size of the image you set, or it will be resized.

Hugs and thanks to all for your help!