Adding a style selector to your application

Posted by on in UI

With RAD Studio 10 Seattle, we provide built-in default styles for iOS, Android, Windows and Mac. Additional styles can be found in the Styles directory installed with the product, and in the premium styles bonus pack. Adding a style selector to your application provides customization options for your end users. Some customers prefer a darker UI while others prefer a lighter color scheme. In this demo application, you can choose from 3 different styles.

Step 1: Build your user interface

For this demo, I placed a range of UI controls onto my form, including TSwitch, TButton, TToolBar, TTabControl and TTrackBar. To add the style selector drop-down menu to your new or existing application, add a TComboBox component to your form and change its 'Name' property to 'StyleBox'. We are going to programmatically populate that list with the styles contained in our StyleBook components. 

Step 2: Add multiple TStyleBook components

From the Tool Palette in the IDE, drag and drop a TStyleBook component onto your form. Double-click on the StyleBook component on your form to bring up the Style Designer. Click on the folder icon to browse to the folder on your hard drive that contains the custom styles you'd like to use. In my example, I selected the iOSJet style which is found in the premium style pack (part of the 10 Seattle Bonus Pack). Next, hit 'Apply and Close'. With TStyleBook selected, enter a StyleName in the Object Inspector, i.e. "Dark Style". Repeat these steps for as many style options as you want to present to your users. In this demo, I added two more StyleBooks with different styles.


Step 3: Set up an OnChange event for TComboBox

procedure TForm8.StyleBoxChange(Sender: TObject);
   if StyleBox.ItemIndex >= 0 then
      StyleBook := TStyleBook(StyleBox.ListItems[StyleBox.ItemIndex].Data);


Step 3: Set up an OnFormCreate event

This will scan your form for all TStyleBook components in order to populate the TComboBox drop-down menu.

procedure TForm8.FormCreate(Sender: TObject);
  Index: Integer;
  EnumObjects(function (AObject: TFmxObject): TEnumProcResult
      if AObject is TStyleBook then
        Index := StyleBox.Items.Add(TStyleBook(AObject).StyleName);
        StyleBox.ListItems[Index].Data := AObject;
      Result := TEnumProcResult.Continue;


Step 4: Deploy your application

In the screenshots below, you can see my sample application deployed to my iOS device.




Gold User, Rank: 5, Points: 558
Senior Product Manager, RAD Studio


  • Lucas S54520
    Lucas S54520 Monday, 18 December 2017

    Hi! Is there any problem using this code in a form with TTabControl specifically in Android?
    Because the tabItems background appears not to update the new style.
    PS: panels inside the tabItem updates correctly, but where there is no panel, you can see de older style
    I`m using Delphi Rad Studio 10.2.1

  • David Millington
    David Millington Friday, 14 July 2017
  • Khaled I13796
    Khaled I13796 Tuesday, 4 July 2017

    Please, could you provide above example code in C++, your assistance is greatly appreciated?

  • Please login first in order for you to submit comments
  • Page :
  • 1

Check out more tips and tricks in this development video: