Skip to main content

TcxCustomButton.OptionsImage Property

Provides access to button glyph and content layout-related options.

Declaration

property OptionsImage: TcxButtonImageOptions read; write;

Property Value

Type Description
TcxButtonImageOptions

Stores image-related button settings.

Remarks

The button can display a glyph in addition to (or instead of) a caption if the PaintStyle property is set to bpsDefault or bpsGlyph.

VCL Editors: A DevExpress Button with a Glyph

You can use options accessible through the OptionsImage property to assign a glyph to the button and configure related content settings.

Available Options

You can use OptionsImage.Images/OptionsImage.ImageIndex or OptionsImage.Glyph to display a glyph within the button.

In addition, you can use OptionsImage.Layout, OptionsImage.Margin, and OptionsImage.Spacing properties to change caption and glyph positions within the buttons.

Refer to the TcxButtonImageOptions class description for detailed information on all available options.

Code Example: Create Buttons with Different-Sized SVG Glyphs

The following code example creates five buttons with different-sized SVG glyphs using a single image list as a glyph source:

uses
  cxButtons,  // Declares the TcxButton class and related types
  cxGraphics;  // Declares the TcxImageList class and related types
// ...

procedure TMyForm.FormCreate(Sender: TObject);
var
  AButton: TcxButton;
  ALargeGlyphSettings: TcxButtonImageOptions;
begin
  AButton := TcxButton.Create(Self);  // Creates the large "Apply" button
  AButton.Parent := Self;  // Associates the created button with the form
  AButton.Caption := 'Apply';
  AButton.Font.Size := 20;
  // Position the button
  AButton.Top := 40;
  AButton.Left := 40;
  AButton.Height := 60;
  AButton.Width := 140;
  // Assign a glyph and configure related settings
  ALargeGlyphSettings := AButton.OptionsImage;
  ALargeGlyphSettings.Images := cxImageList1;
  ALargeGlyphSettings.ImageIndex := 0;
  ALargeGlyphSettings.SVGOptions.UseRegularAsLarge := True;
  ALargeGlyphSettings.SVGOptions.LargeSize.Width := 48;
  ALargeGlyphSettings.SVGOptions.LargeSize.Height := 48;
  AButton := TcxButton.Create(Self);  // Creates the large "Cancel" button
  AButton.Parent := Self; // Associates the created button with the form
  // Position the button
  AButton.Top := 40;
  AButton.Left := 200;
  AButton.Height := 60;
  AButton.Width := 60;
  AButton.PaintStyle := bpsGlyph;
  // Assign a glyph and configure related settings
  AButton.OptionsImage.Assign(ALargeGlyphSettings);  // Copies common settings from the "Apply" button
  AButton.OptionsImage.ImageIndex := 1;  // Assigns a different glyph from the source image list
  AButton := TcxButton.Create(Self);  // Creates the small "Refresh" button
  AButton.Parent := Self;  // Associates the created button with the form
  AButton.Caption := 'Refresh';
  AButton.Left := 40;  // Positions the button
  AButton.OptionsImage.Images := cxImageList1;
  AButton.OptionsImage.ImageIndex := 2;
  AButton := TcxButton.Create(Self);  // Creates the small "Add" button
  AButton.Parent := Self;  // Associates the created button with the form
  AButton.Caption := 'Add';
  AButton.Left := 115;  // Positions the button
  AButton.OptionsImage.Images := cxImageList1;
  AButton.OptionsImage.ImageIndex := 3;
  AButton := TcxButton.Create(Self); // Creates the small "Remove" button
  AButton.Parent := Self;  // Associates the created button with the form
  AButton.Caption := 'Remove';
  AButton.Left := 190;  // Positions the button
  AButton.OptionsImage.Images := cxImageList1;
  AButton.OptionsImage.ImageIndex := 4;
end;

VCL Editors: Five Buttons Using the Same Glyph Source

See Also