Sign in Join
Wiki copytemporary

BGRAControls: what changed

Revision 1 to 2. Removed lines have a minus sign; added lines have a plus sign.

OldNewLine
1-<figure>
2-<img src="bgracontrols.png" title="bgracontrols.png" />
3-<figcaption>bgracontrols.png</figcaption>
4-</figure>
1+![](/wiki-images/7/74/Bgracontrols.png)
52
63## Install
74
85Use the [[Online Package Manager]] to get BGRABitmap and BGRAControls.
96
107Notice that you must check only the packages "bgrabitmappack.lpk" and "bgracontrols.lpk" in the Online Package Manager. The other packages are optional and may need third party packages / libraries to work (OpenGL and PascalScript).
118
129### Optional Components
1310
1411Since v4.4 the components TBCDefaultThemeManager, TBCKeyboard and TBCNumericKeyboard are not installed by default to allow Linux users to get a seamless installation with the Online Package Manager not installing third party stuff. If you want these components turn on the "Register unit" in the package options for each file (bcdefaulthememanager.pas, bckeyboard.pas, bcnumerickeyboard.pas) then compile and rebuild Lazarus. On Linux you need to install libxtst-dev and libgl-dev first.
1512
1613### Website
1714
1815BGRABitmap Organization on GitHub: <https://github.com/bgrabitmap/>
1916
2017## BGRA Controls
2118
2219BGRA Controls is a set of graphical UI elements that you can use with Lazarus LCL applications. Under Linux you need to have installed libxtst-dev and libgl-dev.
2320
2421### TBCButton
2522
26-<figure>
27-<img src="bcbutton.png" title="bcbutton.png" />
28-<figcaption>bcbutton.png</figcaption>
29-</figure>
23+![](/wiki-images/8/8a/Bcbutton.png)
3024
3125A button control that can be styled through properties for each state like StateClicked, StateHover, StateNormal with settings like gradients, border and text with shadows. You can assign an already made style through the property AssignStyle.
3226
3327### TBCButtonFocus
3428
3529Like TBCButton but it supports focus like normal TButton.
3630
3731### TBCGameGrid
3832
39-<figure>
40-<img src="bcgamegrid.png" title="bcgamegrid.png" />
41-<figcaption>bcgamegrid.png</figcaption>
42-</figure>
33+![](/wiki-images/6/62/Bcgamegrid.png)
4334
4435A grid with custom width and height of items and any number of horizontal and vertical cells that can be drawn with BGRABitmap directly with the OnRenderControl event.
4536
4637### TBCImageButton
4738
48-<figure>
49-<img src="samplebgraimagebutton.png" title="samplebgraimagebutton.png" />
50-<figcaption>samplebgraimagebutton.png</figcaption>
51-</figure>
39+![](/wiki-images/2/29/Samplebgraimagebutton.png)
5240
53-<figure>
54-<img src="samplebgraimagebuttonalpha.png" title="samplebgraimagebuttonalpha.png" />
55-<figcaption>samplebgraimagebuttonalpha.png</figcaption>
56-</figure>
41+![](/wiki-images/b/b9/Samplebgraimagebuttonalpha.png)
5742
5843A button control that can be styled with one image file, containing the drawing for each state Normal, Hovered, Active and Disabled. It supports 9-slice scaling feature. It supports a nice fading animation that can be turned on.
5944
6045### TBCXButton
6146
62-<figure>
63-<img src="bcxbutton.png" title="bcxbutton.png" />
64-<figcaption>bcxbutton.png</figcaption>
65-</figure>
47+![](/wiki-images/0/02/Bcxbutton.png)
6648
6749A button control that can be styled by code with the OnRenderControl event. Or even better create your own child control inheriting from this class.
6850
6951### TBCLabel
7052
71-<figure>
72-<img src="bclabel.png" title="bclabel.png" />
73-<figcaption>bclabel.png</figcaption>
74-</figure>
53+![](/wiki-images/e/e5/Bclabel.png)
7554
7655A label control that can be styled through properties, it supports shadow, custom borders and background.
7756
7857### TBCMaterialDesignButton
7958
8059A button control that has an animation effect according to Google Material Design guidelines. It supports custom color for background and for the circle animation, also you can customize the shadow.
8160
8261### TBCPanel
8362
84-<figure>
85-<img src="bcpanel.png" title="bcpanel.png" />
86-<figcaption>bcpanel.png</figcaption>
87-</figure>
63+![](/wiki-images/2/28/Bcpanel.png)
8864
8965A panel control that can be styled through properties. You can assign an already made style through the property AssignStyle.
9066
9167### TBCRadialProgressBar
9268
9369A progress bar with radial style. You can set the color and text properties as you like.
9470
9571### TBCToolBar
9672
9773A TToolBar with an event OnRedraw to paint it using BGRABitmap. It supports also the default OnPaintButton to customize the buttons drawing. By default it comes with a Windows 7 like explorer toolbar style.
9874
9975### TBCTrackBarUpdown
10076
10177A control to input numeric values with works like a trackbar and a spinedit both in one control.
10278
10379### TBGRAFlashProgressBar
10480
105-<figure>
106-<img src="BC-Bgraflashprogressbar.png" title="BC-Bgraflashprogressbar.png" />
107-<figcaption>BC-Bgraflashprogressbar.png</figcaption>
108-</figure>
81+![](/wiki-images/0/0b/BC-Bgraflashprogressbar.png)
10982
11083A progress bar with a default style inspired in the old Flash Player Setup for Windows progress dialog. You can change the color property to have different styles and also you can use the event OnRedraw to paint custom styles on it like text or override the entire default drawing.
11184
11285### TBGRAGraphicControl
11386
11487Is like a paintbox. You can draw with transparency with this control using the OnRedraw event.
11588
11689### TBGRAImageList
11790
11891An image list that supports alpha in all supported platforms.
11992
12093How app looks with TImageList (with transparent icons):
12194
122-<figure>
123-<img src="before-TImageList.png" title="before-TImageList.png" />
124-<figcaption>before-TImageList.png</figcaption>
125-</figure>
95+![](/wiki-images/a/ac/Before-TImageList.png)
12696
12797How app looks with BGRAImageList:
12898
129-<figure>
130-<img src="after-TBGRAImageList.png" title="after-TBGRAImageList.png" />
131-<figcaption>after-TBGRAImageList.png</figcaption>
132-</figure>
99+![](/wiki-images/1/1f/After-TBGRAImageList.png)
133100
134101### TBGRASVGImageList
135102
136103It is located in the BGRA Themes tab.
137104
138-<figure>
139105<img src="bgrasvgimagelist_edit.png" title="bgrasvgimagelist_edit.png" width="450" />
140-<figcaption>bgrasvgimagelist_edit.png</figcaption>
141-</figure>
142106
143107In its properties, one can define the size and a target raster image list (TImageList or TBGRAImageList):
144108
145-<figure>
146109<img src="bgrasvgimagelist_prop.png" title="bgrasvgimagelist_prop.png" width="350" />
147-<figcaption>bgrasvgimagelist_prop.png</figcaption>
148-</figure>
149110
150111This will automatically populate the target image list (here on MacOS, it provides the double sized icons for Retina):
151112
152-<figure>
153113<img src="targetimagelist_edit.png" title="targetimagelist_edit.png" width="350" />
154-<figcaption>targetimagelist_edit.png</figcaption>
155-</figure>
156114
157115### TBGRAImageManipulation
158116
159-<figure>
160-<img src="bgraimagemanipulation.jpg" title="bgraimagemanipulation.jpg" />
161-<figcaption>bgraimagemanipulation.jpg</figcaption>
162-</figure>
117+![](/wiki-images/6/60/Bgraimagemanipulation.jpg)
163118
164119A tool to manipulate pictures, see the demo that shows all the capability that comes with it.
165120
166121### TBGRAKnob
167122
168-<figure>
169-<img src="BC-Bgraknob.png" title="BC-Bgraknob.png" />
170-<figcaption>BC-Bgraknob.png</figcaption>
171-</figure>
123+![](/wiki-images/3/39/BC-Bgraknob.png)
172124
173125A knob that can be styled through properties.
174126
175127### TBGRAResizeSpeedButton
176128
177129A speed button that can resize the glyph to fit in the entire control.
178130
179131### TBGRAShape
180132
181-<figure>
182-<img src="samplebgrashape.png" title="samplebgrashape.png" />
183-<figcaption>samplebgrashape.png</figcaption>
184-</figure>
133+![](/wiki-images/6/61/Samplebgrashape.png)
185134
186135A control with configurable shapes like polygon and ellipse that can be filled with gradients and can have custom borders and many other visual settings.
187136
188137### TBGRASpeedButton
189138
190-<figure>
191-<img src="BGRASpeedButton.png" title="BGRASpeedButton.png" />
192-<figcaption>BGRASpeedButton.png</figcaption>
193-</figure>
139+![](/wiki-images/e/e9/BGRASpeedButton.png)
194140
195141A speed button that in GTK and GTK2 provides BGRABitmap powered transparency to the glyph.
196142
197143### TBGRASpriteAnimation
198144
199-<figure>
200-<img src="bgraspriteanimation.png" title="bgraspriteanimation.png" />
201-<figcaption>bgraspriteanimation.png</figcaption>
202-</figure>
145+![](/wiki-images/8/88/Bgraspriteanimation.png)
203146
204147A component that can be used as image viewer or animation viewer, supports the loading of gif files.
205148
206149### TBGRAVirtualScreen
207150
208151Is like a panel. You can draw this control using the OnRedraw event.
209152
210153### TDTAnalogClock
211154
212155A clock.
213156
214157### TDTAnalogGauge
215158
216159A gauge.
217160
218161### TDTThemedClock
219162
220163Another clock.
221164
222165### TDTThemedGauge
223166
224167Another gauge.
225168
226169### TPSImport_BGRAPascalScript
227170
228171A component to load BGRABitmap pascal script utilities.
229172
230173## BGRA Custom Drawn
231174
232175BGRA Custom Drawn is a set of controls inherited from Custom Drawn. These come with a default dark style that is like Photoshop.
233176
234177### TBCDButton
235178
236179A button control that is styled with TBGRADrawer.
237180
238181### TBCDEdit
239182
240183An edit control that is styled with TBGRADrawer.
241184
242185### TBCDStaticText
243186
244187A label control that is styled with TBGRADrawer.
245188
246189### TBCDProgressBar
247190
248191A progress bar control that is styled with TBGRADrawer.
249192
250193### TBCDSpinEdit
251194
252195A spin edit control that is styled with TBGRADrawer.
253196
254197### TBCDCheckBox
255198
256199A check box control that is styled with TBGRADrawer.
257200
258201### TBCRadioButton
259202
260203A radio button that is styled with TBGRADrawer.
261204
262205## Sample code
263206
264207BGRA Controls comes with nice demos to show how to use the stuff and extra things you can use in your own projects.
265208
266209### Pascal Script Library
267210
268211Putting BGRABitmap methods into a .dll with c#, java and pascal headers.
269212
270213### BGRA Ribbon Custom
271214
272215How to create a fully themed window using the controls to achieve a Ribbon like application.
273216
274217### Tests
275218
276219There are test for analog controls (clock and gauge), BC prefixed controls, BGRA prefixed controls, BGRA Custom Drawn controls, how to use Pascal Script and BGRABitmap, bgrascript or how to create your own scripting solution with BGRABitmap.
277220
278221### Tests Extra
279222
280-<figure>
281-<img src="game_maze.png" title="game_maze.png" />
282-<figcaption>game_maze.png</figcaption>
283-</figure>
223+![](/wiki-images/0/0c/Game_maze.png)
284224
285-<figure>
286-<img src="game_puzzle.png" title="game_puzzle.png" />
287-<figcaption>game_puzzle.png</figcaption>
288-</figure>
225+![](/wiki-images/f/f8/Game_puzzle.png)
289226
290-<figure>
291-<img src="customdrawnwindows7.png" title="customdrawnwindows7.png" />
292-<figcaption>customdrawnwindows7.png</figcaption>
293-</figure>
227+![](/wiki-images/4/4e/Customdrawnwindows7.png)
294228
295-<figure>
296-<img src="slicescaledtachart.png" title="slicescaledtachart.png" />
297-<figcaption>slicescaledtachart.png</figcaption>
298-</figure>
229+![](/wiki-images/9/9d/Slicescaledtachart.png)
299230
300231These are extra tests like how to use fading effect, an fpGUI theme, games like maze and puzzle, how we created the material design animation, pix2svg or how to convert a small picture to svg using hexagons, rectangles and ellipses, plugins or how to load .dlls and use into a TBGRAVirtualScreen, rain effect, shadow effect, 9-slice-scaling with Custom Drawn or how to theme with bitmaps an application to look like Windows themes and 9-slice-scaling with charts.
301232
302233## Other units
303234
304235These units come with BGRA Controls and contains more functionality that is sometimes used with the controls, sometimes not but are usefull in some way. Some are listed here, others you can see linked directly with any control like bcrtti, bcstylesform, bctools and bctypes.
305236
306237### BCEffect
307238
308239Fading effect with BGRABitmap.
309240
310241### BCFilters
311242
312243A set of pixel filters to use with BGRABitmap.
313244
314245### BGRAScript
315246
316247Scripting with BGRABitmap, see test project.
317248
318249## Related Articles
319250
320251[[BGRASpriteAnimation]] - Usage of the sprite animation component.
321252
322253[[uE Controls]] - Other controls developed with BGRABitmap.
323254
324255[[BGRABitmap]] - The library used to create this controls.
325256
326257[[LazPaint]] - A paint program developed with Lazarus and BGRABitmap.
327258
328259---
329260*From the Free Pascal wiki, page "BGRAControls", as it stood on 2023-08-13 after a change by Alextpp, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).*
330261Category: BGRAControls
331262Category: Components
332263Category: Graphics

Back to history