FireMonkey Styles, Part 2: Creating a custom style for TSwitch

I have been covering many UI and styling related FireMonkey features on my blog. Today, I thought I would do a follow-up post to FireMonkey Styles, Part 1. 

If a style does not have a description object with a platform target defined, then all styles loaded to a TStyleBook will be loaded in addition to the native default styles. This allows you to use a custom style alongside the native styles. The steps below will outline how to create your own custom TSwitch style from scratch to use in your FireMonkey application while using the native style for all other UI elements. 

I will be using Photoshop to create the style. In Photoshop (you can also use another graphics program), create a new image by going to File>New. Under Background Contents, select Transparent.  

Next, create the active and inactive switch frame graphics and the thumb (slider) graphic. You can design these however you like. For example, you could use the Rounded Rectangle Tool in Photoshop along with the Custom Shape Tool. The active and inactive switch frame graphic should have the same height and width. To simplify the steps, the thumb graphic should have the same height as the switch frame graphic. Once done, save the graphic as a png by going to File>Save As…

Here is the resulting png:

This graphic displays the X on the right since the switch is set to inactive by default. Below is a quick clip of the switch style in action. 

To create your new switch style, open the Bitmap Style Designer via the Tools menu in the IDE. 

Select to create a new style for VCL or FireMonkey. This will generate a style template for you. In this case, we are going to create a Desktop FireMonkey style designed for Windows, so we only need a single 1x resolution graphic.

Under Images, select style.png and then click on Update. Browse to your switch graphic png file on disk to replace the current style.png with your new graphic.

Next, under Objects, select Switch.

Optionally, you can select to Duplicate the switch. This will create a new switch object. Since we are replacing the current one with a new one, we don't need to duplicate the switch. 

 Select Switch>Frame. 

Click on the … next to each Bitmap option and select the outline of your graphic. For the first three options, select the brown inactive graphic. For BitmapHot and BitmapPressed, select the green active graphic. Ctrl + click to select the bottom right corner of the graphic, and left-click to select the top left corner of the graphic. Once done, click Apply and repeat for each of the five Bitmap options. 

 Select Switch>Thumb and select the thumbnail graphic for each of the five Bitmap options. 

Once done, save the style template. This will save the file as a .vsf file. .vsf files can be opened in the Bitmap Style Designer for editing purposes. Next, go to File>Save As… and select FireMonkey Style (*.style) from the drop-down menu. Save the FireMonkey style file to a location on disk.

Since this style.png only contains elements for TSwitch and we want to use it alongside the native styles on Windows, we will need to edit the *.style file.

Open your switch style file in a text editor such as Notepad. 

You will see the TStyleDescription object:

  object TStyleDescription  StyleName = 'Description'  Author = 'Embarcadero Technologies Inc.'  AuthorURL = 'www.embarcadero.com'   MobilePlatform = False  Title = 'Untitled'   Version = '1.0'
  end.

You must remove it from the *.style file and only keep the images (object TImage) and new custom objects which are placed in TStyleContainer. This ensures that the new switch style can be loaded to a TStylebook and set on the form without overriding the default style settings from the native style. This also means that you will see both the native style switch element and your new custom one in the StyleLookup drop-down menu in the Object Inspector for TSwitch. 

The resulting .style file should follow this structure: 

object TStyleContainer

object TImage

    StyleName = 'MyStyle.png'

    MultiResBitmap = 

end

object TBitmapSwitchObject

    StyleName = 'myswitchstyle'  // this should be a unique name that is different from the default name 

    ...

    SourceLookup = 'MyStyle.png'

    ....

end

end

After you have made the changes, save the .style file again. Create a new Multi-Device Application, and place a TSwitch onto your form. Place a TStylebook onto your form and load the custom switch style to it. Select your form in the Structure pane, then set the StyleBook property to StyleBook1 in the Object Inspector. Select the TSwitch on your form, and have a look at the StyleLookUp property. You will see the default Windows style one called switchstyle and the custom one we created called checkedswitchstyle. 

Below is an example of my custom style structure:

Below is an example of my custom style structure: