From Lazarus wiki
Revision as of 00:23, 9 March 2013 by Lainz (talk | contribs) (BCXButton)

Deutsch (de) English (en) português (pt) русский (ru) 中文(中国大陆)‎ (zh_CN)


You can use TortoiseSVN to download the svn repository and TortoiseGIT to download the git repository.

We're using BGRABitmap SVN to develop BGRAControls. Important changes in BGRABitmap can stop working BGRAControls.

Download BGRABitmap

Install BGRABitmap with the file bgrabitmap.lpk.



Latest SVN: svn co lazpaint

Download BGRAControls

Install BGRAControls with the file bgracontrols.lpk.



SVN Browse:

SVN Checkout: svn co bgracontrols


GIT Browse:

GIT Checkout: git://


License: Modified LGPL.

As many people know, Lazarus GTK doesn't have full alpha support. I created a set of components which use TBGRABitmap for drawing icons, so it partially solves the problem with alpha in GTK. But this components set is not only a GTK patch but has more fancy components which are using the power of the BGRABitmap package.

Author: Dibo.

Package founder and package mantainer.

BC Controls - TBCButton - TBCLabel - TBCPanel

BGRA Controls - TBGRAImageList - TBGRASpeedButton

Author: Circular.

BGRABitmap creator, contributor and package mantainer.

- TBGRAFlashProgressBar - TBGRAGraphicControl - TBGRAKnob - TBGRAShape - TBGRAVirtualScreen

Author: Lainz.

Contributor and package mantainer.

BC Controls - TBCImageButton - TBCGameGrid

BGRA Controls - TBGRASpriteAnimation

Author: Emerson Cavalcanti.

- TBGRAImageManipulation

Author: mora.

- Contributor to BCButton functionality.

Related Articles

BGRASpriteAnimation - Usage of the sprite animation component.

uE_Controls - Other controls developed with BGRABitmap.

BGRABitmap - The library used to create this controls.

LazPaint - A paint program developed with Lazarus and BGRABitmap.







The bitmap must contain 4 states (from top to bottom, with the same Height) in the following order: normal, hover, active, disabled.

Example Button:


Example Button (with Alpha):



Fully customizable button with 'OnRenderControl' event. This control doesn't has default properties, it's supposed that you will override this control and add all the things you wish.

- Like TCDButton (Custom Drawn Button).

- Call 'OnRenderControl' event (like a Drawer in CD) for each button, or one for all buttons.

- Create fully customizable buttons, like using BGRAVirtualScreen or BCGraphicControl.








Use as replace of: TProgressBar


Flash progressbar created by circular.


Use as replace of: TPaintBox

TBGRAGraphicControl, which allows to draw your component by yourself with alpha blending.


Use as replace of: TImageList





Component which inherits from TImageList. So each control (tested on TToolBar and TTreeView) which is using TImageList.Draw method for drawing icons, automatically can have alpha support. Just use this component instead of TImageList. This component has been written for enabling GTK alpha, so on Windows (and other interfaces) it works just like normal TImageList (it doesn't use BGRABitmap for drawing).


Use as replace of: TImage

Component to facilitate the importation of images in an application.

In the current version you can import an image and cut out keeping the aspect ratio (or not). For example, if you want to import photos using the 3x4 ratio, adjust the 'ratio' property to 3:4. If import an image with different size, the component will ensure that the image meets the proportions of the desired dimensions.

You can determine the minimum size of the image adjusting the properties 'MinWidth'and 'MinHeight'.

You can rotate the image using functions builtin.

See demo of component:


After retrieving the image modified by the component, just put the image into your destination using the stretch. It is obvious that the target must have the same ratio chosen on component for do not distort the final result.



Graphic knob component created by circular.


Use as replace of: TShape


The component has full alpha support and you can put the number of polygons you want with rounded borders & gradients (linear, radial, diamond, reflected).


Use as replace of: TSpeedButton


Component which inherits from TSpeedButton and draws the glyph using TBGRABitmap. This component has been written for enabling GTK alpha, so on Windows (and other interfaces) it works just like normal TImageList (it doesn't use BGRABitmap for drawing).


Use as replace of: TImage

Read more in the article BGRASpriteAnimation.


With this you can do animations from bitmap. You need an image with all the frames layout in in a horizontal position.

It has the ability to specify how many times the animation should be played (0 for infinite, 1, 2, etc) and static to stop the animation, is capable to specify the speed and direction and support transparency.


  • Animation: invert, position, lap, speed, static, repeat.
  • Sprite: fill opacity (global transparency), flip mode (horizontal, vertical, both), key color (transparent color), resample (normal or fine resample modes). AutoSize.
  • AnimatedGifToSprite: convert an animated gif to a BGRABitmap sprite.


Use as replacement of: TPanel, TPaintBox

The principle is to draw on a memory bitmap.

The component has a specific event, OnRedraw, which is called when the whole bitmap needs to be redrawn. It happens at the beginning and when the component is resized. You can also query to redraw the bitmap with Redraw and DiscardBitmap methods. The second one only invalidates the content, which can wait until the messageloop is handled.

Otherwise, it is possible to modify the Bitmap property and call Invalidate or Repaint, to avoid erasing the whole bitmap content.


Game - Maze

game maze.png

Game - Puzzle

game puzzle.png

SliceScaling - CustomDrawn Windows 7


This is a drawer for Lazarus Custom Drawn Controls, you need that component installed with the latest Lazarus revision to work.

Working in this drawer: button, statictext, checkbox, radiobutton and progressbar.

This has also extra images for 'Luna' (Windows XP Theme) 'Aero Lite' (Windows 8 Theme) and extra buttons (arrows).

SliceScaling - TAChart

9-slice scaling is usefull to create sizable UI elements like in the Custom Drawn Windows 7 Drawer.

There's a TAChart example with slice scaled bars.



BGRAButton Gallery - Gallery of buttons with source code to use in your projects with BGRAButton.


This unit is used by BGRAImageButton to draw the button! Also it's usefull to skin controls from bitmaps.

A more advanced version of this is SliceScaling.pas unit.


This unit is an example, it's usefull to learn how to create your own button with bgrabitmap. BTW read the BGRAImageButton and BGRAButton code. All in this unit can be overriden. I've not added 'invalidate' messages in types and AutoSize, add your own according to your programming needs.



Is a TBGRAVirtualScreen descendant with some default child sizing, and nice Win7 ToolBar background.

BGRASamples unit

This unit has sample drawings, styles for buttons and colors used in different UI.


  • Accent Color: the colors used in the Windows Phone. The accent color can be used in TBGRAButton and TBGRAImageButton (see the different procedures).
  • Facebook button color: gray, green and blue, with a procedure to create an image in the normal or pressed state, also to use this style in a TBGRAImageButton.
  • TBGRASampleStyle: Styles for TBGRAButton ('Default', 'Flash Player', 'Windows 7 ToolBar', 'Windows 7 ToolBar Smooth', 'Windows 7', 'Office 2010', 'Mac OSX Lion', 'Windows 7 Cristal').
  • iOS Elements: Draw a gray bar, the blue toolbar and a tiled background, the same elements used in the iOS screen.
  • Glass: used in testbgracontrols, it show an image in a virtualscreen and apply blur in the buttons area.
  • Drawings: flash player body and toolbar, windows 7 toolbar.
  • Some other usefull procedures to work with TBGRAButton and TBGRAImageButton.



Use as replace of: TToggleBox

Component used to create a toggle box from Bitmap.

The bitmap must contain 8 images (from top to bottom, with the same Height) in the following order: unchecked normal, unchecked enter, unchecked pressed, unchecked disabled for Unchecked state and checked normal, checked enter, checked pressed, checked disabled for Normal state.

Example toggle box:



Use as replace of: TLabel

Label component based on TBGRAButton.


  • Caption with shadow or not
  • Full alpha and antialias support or not
  • WordWarp or not
  • Caption with Property Editor Multiline


Use as replace of: TLabel



  • Outline
  • Shadow


  • Use BGRATextFX multicolor, textures.
  • etc.


If you need some code to load and split an image from file, and then scale the borders like in this control you can use TBGRABitmapThemeUtils (included in BGRAControls).

Use as replace of: TButton


Component used to create a button with 4 states from Bitmap.


  • Load the image from the "Bitmap" property in the object inspector or load from file using "BitmapFile".
 // You can load bmp and also png files
  • BitmapOptions: you can set the border pixels, resample method and fill modes. Usefull to create textured / like Windows themed buttons.
  • AutoSize, ModalResult.
  • Text with Shadow, you can disable text render with the option "TextVisible".
  • Sound: in mouse enter and leave in Windows from .wav files.
  • Toggle: you can read / set the current state with the property "Checked".
  • Animation: glowing effect.


The bitmap must contain 4 states (from top to bottom, with the same Height) in the following order: normal, enter, pressed, disabled.

If you choose to use BitmapOptions you need to have for each state an image which has a border, and inside some content that can be repeated. Then with FillCenter option (if you want a textured button), it gets repeated while the borders stay as they are. This is like the method used in Windows to theme the buttons.


Use as replace of: TButton


Customizable graphic component which is using only BGRABitmap functions for drawing. This component is insensitive for -dGTK_ONLY switch. Demo project included in package.


  • Gradient, Clear or Color body. Double_Gradient.
  • Text with shadow: BGRA antialias or like system default with ClearType.
  • Rounded border, inner Light.
  • States: normal, hover & clicked fully customizable and grayscale disabled state.
  • Special: Down, DropDown, Static.
  • Full AutoSize working with Glyph.


Use as replace of: TPanel

Simple TPanel descendant which can have gradient background. Created especially for TBGRAButton (for creating a nice looking toolbar for bgrabuttons). This component is insensitive for -dGTK_ONLY switch