Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!

Working with StylesData in your FireUI applications

the future of starts demands massive productivity

I have been getting some questions recently on how to identify and access style elements using StylesData. StylesData is defined by the style and different controls can have different elements.

To identify and access the style elements in code that you want to change programmatically, you first need to set the style properties for each item at design time. You can then view the structure for those style items defined in the style using the built-in Style Designer in the IDE. You can choose “Edit default style” to see objects in the Style Designer in the IDE.
Note: “Edit default style” is only available for Desktop views, but Desktop styles have the same structure as mobile styles.

In this example we are using a ListBox item, but the steps are similar for customizing the style of other controls.

Step 1: Add a ListBox to your form and right-click to add a ListBoxItem

Step 2: Set the style of your ListBoxItem element by setting the StyleLookUp property. In this case, we set it to listboxitemrightdetail

Step 3: Select ListBoxItem1’s ItemData property in the Object Inspector. Set an accessory, detail text, item text and a bitmap image

Step 4: Right-click on ListBoxItem1 on the form and select ‘Edit Default Style’

StylesData1 1

Step 5: Expand the layout1 item in the Structure view in the Style Designer. Here you see the style element name of the ItemData items that we set in Step 3. This gives you an indicator on how to call these in code in order to change them programmatically.

For example:  FMXObject := ListBoxItem1.FindStyleResource(‘icon’);


In my demo, I am going to load a bitmap from resources and change the detail text color programmatically. To load an image from Resources, go to Project->Resources and Images and add your image. 

This sample code changes the listbox item image and detail text color at runtime when the ‘Change Style’ button is clicked.

Here is an example of what this looks like at runtime:

For additional information on StylesData, please see this docwiki article. 

Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

About author

Director of Product Management, Developer Tools Idera, Inc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.