C++Builder How To Make Controls Have A Glow Effect In C++?

[FireWind]

How To Make Controls Have A Glow Effect In C++?
By Yilmaz Yoru December 2, 2021

Is there an easy way to add glow effects to components? How can I add glow to alpha images on my applications? What is Glow Effect in C++? How can I use TGlowEffect in C++ Builder? What are the visual tips to add glows in the development of C++ applications? Let’s answer these questions.

Для просмотра ссылки Войди или Зарегистрируйся is the easiest and fastest C and C++ IDE for building simple or professional applications on the Windows, MacOS, iOS & Android operating systems. One of the greatest features of VCL and FMX UI frameworks is the effects on UI elements. There are many UI effects that can be used on the most of visual elements supported officially by the Embarcadero. There are two main effects that I used generally, Для просмотра ссылки Войди или Зарегистрируйся and Glow Effects.

What do we mean by Glow Effect?​

TGlowEffect is a class for creating a glow effect around a visible object. TGlowEffect is an implementation of Для просмотра ссылки Войди или Зарегистрируйся. For further information, go to Для просмотра ссылки Войди или Зарегистрируйся and Для просмотра ссылки Войди или Зарегистрируйся.

Besides the properties provided by Для просмотра ссылки Войди или Зарегистрируйся, TGlowEffect provides three specific properties: Для просмотра ссылки Войди или Зарегистрируйся, Для просмотра ссылки Войди или Зарегистрируйся, and Для просмотра ссылки Войди или Зарегистрируйся.

For example, the following table shows the result of TGlowEffect on a .png picture (with transparent background) placed on a form (using a Для просмотра ссылки Войди или Зарегистрируйся object) and on a Для просмотра ссылки Войди или Зарегистрируйся object. For both objects, Для просмотра ссылки Войди или Зарегистрируйся is set to Gold, Для просмотра ссылки Войди или Зарегистрируйся, to 0.9, and Для просмотра ссылки Войди или Зарегистрируйся, to 0.4.

How can I add glow effects to components in C++ Builder?​

Adding Glow Effects to UI Elements in C++ Builder is very easy, drag the TGlowEffect component from the Palette onto the UI element that you want to. If you want to apply the same glow settings on some group of the components, include all components that you want to add glow into a group component (i.e Layout, Rectangle…) and drag TGlowEffect to your group component. This will add the same glow settings to all group members. You can use Structure Panel to move UI elements into UI groups. Note that in RAD Studio any component can be used as a group member, for example, you can group a Button component under a Label component.

Here is a design example in C++ Builder with UI elements below. On the left side of the form, there is a text and image that we apply different glow settings. On the right side, all UI elements are grouped in the Layout (TLayout) element and we applied one glow effect to Layout element and all the members has same color.

And the output of a Windows application will be like this,

What are the best tips on adding glow effects to apps during design time?​

Here are are the some tips when you use glow effects. These are my own recommendations, not a must but should be considered in most designs.

1. Glows are like neon lights, can make your app’s visuals funny, can be used in some games and funny applications.
2. Try to use bright modern colors (like lime, cyan…) as a glow color. These kinds of colors may affect like they are neon colors.
3. If you are using glow effects background may also affect your visuals, consider appropriate background colors or textures.
4. Glows are generally light colors, different softness on different UI Elements can be used.
5. A Black or darker color glow is good in front of darker backgrounds.
6. White or lighter color glow is good in front of light backgrounds. The white glow is also good with white texts.
7. Opacity between around 0.6 and 0.9 has good results.
8. You can use group elements (like Layout, Rectangle, GroupBox, …) to display all elements in one glow setting. This may reduce CPU and memory usage on design.
9. If you are using glows, remember that you may need to have more spaces (margins or paddings) between UI elements.
10. If you use glow, try to not use rounded pen color (set Stroke->Kind->None), both together make your UI heavier. Or you can use a little bit darker Stroke colors around the glow colors.
11. If you want to add glows to the around of a shaped Image, remember that your image should have an alpha color background. If your image has no alpha image your glow affects as it is a rectangle. Note that you can use the GIMP application to change the background of the image by using the Color to Alpha menu.