Developer Skill Sprints - Week 1 - Modernize Your VCL Application Look and Feel With Styles

Posted by on in UI

This blog post contains the notes for week 1 of the developer skill sprint focusing on Modernizing Your VCL Application Look and Feel With Styles

Modernizing Your VCL Apps


Live sessions every Tuesday
November 4 - December 23, 2014
6AM San Francisco / 9AM New York / 2PM London / 3PM Milan
11AM San Francisco / 2PM New York / 7PM London / 8PM Milan
5PM San Francisco / Wed 10AM Tokyo / Wed 12PM Sydney

The next round of Developer Skill Sprints are here! Join us for this 8-part series on modernizing your VCL apps from start to finish. We'll explore how to update your app's look and feel, utilize multiple processor cores in your app, scale your solution, and extend your apps to wearables and gadgets.


Week 1 - Modernize Your VCL Application Look and Feel With Styles

Catch all the Skill Sprint Replay videos on our YouTube Playlist.


Project Files



DocWiki VCL Style Overview
DocWiki VCL Bitmap Style Designer
DocWiki Gesture Overview



is it just one style image file for windows, ios, android etc. applications? or duplicate files that will need to be updated/created?
This skill sprint is covering VCL Bitmap style so Windows only, however FMX does have different style files depending on the platform for the platform style. For custom styles, they are the same style file.

How do we integrate apps more into the Windows 8.x environment. I'm thinking of operating in Windows 8 mode, not on the desktop and being able to do things like swiping from the top of the screen to close an app.
Use the GestureManager.  You'll notice that when you create a Metropolis App for VCL - the gesture manager is already added to handle the swiping from the bottom to bring up the panel from the bottom.

Is there any simple way to change size of fonts from ex. 10 to 14 in all controls at the style?
You can do this in your code - iterate through the components array looking for objects that have a font property.

Is it possible to change styles dynamically while running your program?
You can use the Vcl.Themes.StyleServices function to programmatically access information about the current style. Using StyleServices you can obtain information about the styled controls and elements and can perform drawing of controls. See Vcl.Themes.TCustomStyleServices for a better understanding of the Vcl.Themes.StyleServices interface.

Use the Vcl.Themes.TStyleEngine class to register style hook classes for your custom VCL components. A style hook is a class that you must implement to provide custom message handling for your custom control. If you have a custom control that needs special visual processing, create a style hook class that processes messages by inheriting from Vcl.Themes.TStyleHook.

Use the Vcl.Themes.TStyleManager class to load, register, and select styles or to get, register, and unregister a style engine.

Is possible to reduce the executable size using styles? it seems so big  (12.5 MB)
Only choose the style(s) files you want to use in your app - you don't need to select all of them.  you can load style files from resources and also from external files.

How do you exclude a specific control from an applied style?
Have the control's bitmap in the png be empty in the style file.

Are there any community forums where we can share styles?
CodeCentral - cc.embarcadero.comm

In one of the early webinars it was stated that a developer can allow multiple styles by the clients, are all styles inserted into the executable or do you have to distribute along with the application?
Yes you can add them by checking the application appearance styles checkboxes. you can also include styles as resources. and you can load style files at runtime using code.

What exactly does the gesture manager do?
Allows you to do standard and interactive gestures - touch or mouse. See the Gesture Overview DocWiki



Gold User, Rank: 8, Points: 399
Brian Alexakis is a Product Marketing Manager at Embarcadero Technologies. He is focused on leveraging the connected world of technology to build new experiences for the Internet of Things.


Check out more tips and tricks in this development video: