RAD Studio 10.4.1 is now available! Learn more. Looking for discounts? Visit our Special Offers page!
News

Working with StylesData in your FireUI applications

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’);

StylesData2

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   Learn More About Upgrading

Deep Dive Webinar: Boost C++Builder Compile Speed with TwineCompile
About author

Director of Product Management, Developer Tools Idera, Inc.
Related posts
C++

What's New in the GetIt Package Manager - June 2020

C++

RAD Studio 10.4 Now Available, Learn More

C++NewsRAD Studio

Open for Business with 10.4! - May 2020 GM Update

C++DelphiNews

Embarcadero Open Source Project Sponsorship

Leave a Reply

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

IN THE ARTICLES