Is there an easy way to add custom shadows to components? How can I add shadow to alpha images on my applications? What is Shadow Effect in C++? How can I Use TShadowEffect in C++ Builder? What are the visual tips to add shadows in the development of C++ applications? Let’s answer these questions.
C++ IDE is a software that makes the easiest and fastest for building simple or professional C++ applications on the Windows, MacOS, iOS & Android operating systems. One of the greatest features of the 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 use generally, Shadow Effects and Glow Effects.
What do we mean by a shadow effect?
ShadowEffect (TShadowEffect) is a class for creating a shadow effect for visible objects like Buttons, Images, Shapes, etc. TShadowEffect is an implementation of TEffect that is used to define ShadowEffect’s. For further information, go to TEffect and FireMonkey Image Effects.
Besides the properties provided by TEffect, TShadowEffect provides five specific properties: Direction, Distance, Opacity, ShadowColor, and Softness. For example, the following table shows the result of TShadowEffect on a .png picture (with transparent background) placed on a form (using a TImage object) and on a TRectangle object. For both objects, Direction is set to 60, Distance, to 3, Opacity, to 0,6, ShadowColor, to Black, and Softness, to 0,3.
How to add shadow effects to components in C++ Builder?
Adding Shadow Effects to UI Elements in C++ Builder is very easy, Drag the TShadowEffect component from the Palette on to UI Element that you want to. Adding Shadow Effects to UI Elements in C++ Builder is very easy, Drag the TShadowEffect component from the Palette onto the UI element that you want to. If you want to apply the same shadow settings on some group of the components, include all components that you want to add shadow into a group component (i.e Layout, Rectangle…) and drag TShadowEffect to your group component. This will add the same shadow settings to all group members. You can use the 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 shadows. On the right side, all UI elements are grouped in the Layout (TLayout) element.
And the output of a Windows application will be like this,
What are some additional tips on adding shadows to C++ apps at design time?
- You don’t need to use shadows everywhere, the simple UI is the best!
- Try to use light shadows which means the Opacity property is under 0.60, this will show your application is lighter and easy to understand
- Do not use a large amount (the Distance property) of shadows, UI elements look heavy and complex. Heavy shadows can be used to bold important parts like on titles or big images like company logos.
- Do not use different shadow heights on different UI Elements
- Do not use shadows on each element, use group elements (like Layout, Rectangle, GroupBox, …) to show all elements in one shadow setting. This may reduce CPU and memory usage on design.
- If you are using shadows, remember that you should have more spaces (margins or paddings) between UI elements.
- If you use shadow, try to not use rounded pen color (Stroke->Kind->None), both together make your UI heavier.
- If you want to add shadows to the around of an Image, remember that your image should have an alpha color background. If your image has no alpha image your shadow 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.
C++ Builder is the easiest and fastest C and C++ IDE for building simple or professional applications on the Windows, MacOS, iOS & Android operating systems. It is also easy for beginners to learn with its wide range of samples, tutorials, help files, and LSP support for code. RAD Studio’s C++ Builder version comes with the award-winning VCL framework for high-performance native Windows apps and the powerful FireMonkey (FMX) framework for cross-platform UIs.
There is a free C++ Builder Community Edition for students, beginners, and startups; it can be downloaded from here. For professional developers, there are Professional, Architect, or Enterprise versions of C++ Builder and there is a trial version you can download from here.
