Bitmap Style Designer

From RAD Studio
Jump to: navigation, search

Go Up to Graphic Utilities Index

Tools > Bitmap Style Designer

The Bitmap Style Designer enables you to:

  • Create, edit, and test FireMonkey styles (.style files)
  • Create, edit, and test VCL styles (.vsf files)
  • Convert a VCL style (.vsf file) into a FireMonkey style by saving the VCL style as a FireMonkey style (.style file)
Note: To open an existing FireMonkey style (.style file), you need to use the FireMonkey Style Designer.

In the Bitmap Style Designer, you work only with a style-template -- that is, an objects tree with parameters. A style template has a constant format independent of framework. The style converter that is integrated with the designer generates a real style from this template.

For more information about what a style represents, see:

Bitmap Style Designer Window

BitmapStyle.png


The Bitmap Style Designer opens with the untitled.vsf file (a VCL style file) open for editing.

The Bitmap Style Designer contains two or three panels, depending on the object node that is currently open:

  • The left-hand panel always displays the Objects Tree.
  • When you open the Objects node, the Designer contains two other panels:
    • The Object/Style Viewer in the center panel.
    • The Inspector, in the right-hand panel.
  • When you open any of the other nodes (Images, Fonts, Colors, or SysColors), only the Viewer appears, and it occupies the area of the center panel and the right-hand panel.

Objects Tree

The Objects tree, in the left-hand panel of the designer, contains the elements that can be customized in a style.

The following table describes the nodes in the Objects Tree.

Node Description

BMPEditorUpDown.png
(Up/Down Arrows)

Buttons that move a selected object up or down in the current subtree.

BMPEditorDelete.png
(Duplicate object /
Delete object)

Buttons that:

  • Add a duplicate of the selected top-level object in the tree of the object. The copy is placed at the end of the tree and is given a new name (<name>_copy).
  • Delete an object from the tree the object.
    You cannot delete or rename objects created by Embarcadero, but you can add and delete your own new objects.

Objects

A tree structure showing the user interface controls that can be styled, such as Button, Edit, Form, and so on.

Images

The image files used to select the look of controls. An image contains pictures of the parts and states of controls. You can create such images using graphic editing software.

Fonts

A list of fonts used for the text of controls. The text is typically different for different parts and states of the control. For example, RadioButtonTextPressed defines the appearance of the text when the radio button is pressed.

Colors

A list of base colors that are used in the current style. There are two categories of colors:

  • The first category includes colors used for control parts that are rendered directly from an image. In this case, the color item offers you a way to access the color of that image. For instance, the Window item specifies the color of the form background. Note that changing this color does not affect the way the control part is rendered, but is only a way to programmatically access that color.
  • The second category includes the colors used for controls that are rendered from code at run time (Panel, ListBox, Grid, and so on).

SysColors        

A list of system colors to help you make an application style enabled if it uses system color constants.


Style Viewer

The Viewer in the central panel contains a representation of the node or subnode selected in the Objects Tree.

  • If you select an object in the tree, the viewer displays the bitmaps used for the parts and states.
  • If you select Fonts, Colors, or SysColors, the corresponding lists are displayed and illustrated.
  • If you select an image, you can see the image file and the image toolbar.
  • The title of the Viewer contains the name of the entity or node being viewed:
    • Object Viewer is the title when you select an object in the Objects Tree.
    • The name of the file is displayed when you are viewing Images (the default file name is style.png).
    • Fonts, Colors, and System Colors are the titles used when the Fonts, Colors, and SysColors nodes, respectively, are selected in the Objects Tree.

Inspector Panel

The Inspector is the right-hand panel, which displays the properties of the selected object. The Inspector is visible only when a subnode is selected in the Objects tree. By default, you have the following options when selecting Objects:

InspectorView.png

This view changes according to the selected object from the Object node. You can set or adjust properties in the Inspector similar to the way you do this in the Object Inspector in the IDE. Remember that each object has its own properties, hence only some properties can be configured.

Bitmap Style Designer Menus

The Bitmap Style Designer has a menu bar that contains the following menus.

File Menu

Item Description

New

Creates a new style. By default, the new style has the same settings as:

  • AquaLightSlate style for VCL
  • AquaLightSlate style for FireMonkey
  • MetropolisUIBlack for Metropolis UI styles

Open

Opens the .vsf style file selected in the dialog.

Save

Saves the changes to the current style.

Save As

Saves the current style in a specific location or with a different name.

Exit

Closes the Bitmap Style Designer.


View Menu

Item Description

Object Inspector

Gives focus to the Inspector panel, located in the right-hand panel when the object is viewed.

Object Tree

Gives focus to the Objects Viewer panel, located in the center panel when objects are being viewed.


Image Menu

Item Description

Add

Displays the Selected Image dialog, enabling you to choose an image to add to the list of bitmaps.

Update

Replaces the selected image with the one selected in the Selected Image dialog.

Delete

Removes an image from the Images list.

Export

Exports all the images in the list to the destination folder.


Style Menu

Item Description

Test

Opens a sample dialog with different controls styled according to the current style.

Assign colors

Automatically assigns appropriate colors to the Colors and SysColors items based on the images used by the style.

Assign Font Name

Automatically sets the font name and font style for all objects in the current style.

Assign Font Size

Automatically sets the font size for all objects in the current style.

Add New Objects for 1.5x Resolution Graphic
Add New Objects for 2.0x Resolution Graphic
Add New Objects for 3.0x Resolution Graphic

Adds objects for one specific resolution (1.5x, 2.0x, or 3.0x) in the current style.

The Bitmap and Margin properties are automatically adjusted for the resolution you set.

Delete New Objects for 1.5x Resolution Graphic
Delete New Objects for 2.0x Resolution Graphic
Delete New Objects for 3.0x Resolution Graphic

Deletes objects for one specific resolution (1.5x, 2.0x, or 3.0x) in the current style.

The Bitmap and Margin properties are automatically adjusted for the resolution you set.


Bitmap Style Designer Toolbar

The toolbar on the Bitmap Style Designer provides quick access to frequently used style operations. More detailed information is given in this topic about the New Style, Test Style, and Objects with Text Info. Open Style and Save Style have standard meanings that are not described here.

DesignerToolbar.png

New Style Command

The New Style button Newstylebutton.png makes the following options available when you click the down-arrow (as the image shows, the list of new styles can also be invoked from the File > New command in the designer):

New style command.png

Style Commands:

Item Description

VCL Style

Creates a new VCL style (.vsf file) with the look and feel of a classic Windows application. This template includes additional elements, such as tool buttons with icons, segmented buttons, and others.

Modern VCL Style

Creates a new VCL style (.vsf file) with the look and feel of a Windows 10 application. This template includes additional elements, such as tool buttons with icons, segmented buttons, and others.

Modern Dark VCL Style

Creates a new VCL style (.vsf file) with the look and feel of a dark-mode Windows 10 application. This template includes additional elements, such as tool buttons with icons, segmented buttons, and others.

Windows Style

Creates a new style with the look and feel of a classic Windows application. This template includes additional elements, such as tool buttons with icons, segmented buttons, and others. You can save the style as either a FireMonkey style (.style file) or a VCL style (.vsf) file).

MacOS Style

Creates a new FireMonkey style (.style file) with the look and feel of an macOS Yosemite application. This template includes additional elements, such as tool buttons with icons, segmented buttons, and others.

Windows Modern Style

Creates a new FireMonkey style (.style file) with the look and feel of a Windows 10 application. This template includes additional elements, such as tool buttons with icons, segmented buttons, and others.

Windows Modern Dark Style

Creates a new FireMonkey style (.style file) with the look and feel of a dark-mode Windows 10 application. This template includes additional elements, such as tool buttons with icons, segmented buttons, and others.

Metropolis UI style

Creates a new style with the look and feel of a Windows 8 application. This option includes an extended collection of controls specific to Metropolis UI applications such as: play button, document button, video button and so on, all of which you can customize. For more information, see Developing Metropolis UI Applications.

iOS Style

Creates a new FireMonkey style customized for iOS. The template includes a 3x resolution graphic (for iPhone 6 Plus device) and objects. The template works for iOS 8 and iOS 9. For more information, see iOS Mobile Application Development.

For information about creating a new style customized for Retina (high-resolution) displays and the iOS target platform, see:

Android Light style

Creates a new Light style customized for the Android 4 (KitKat) target platform. The Android Light style is delivered in the product at C:\Users\Public\Documents\Embarcadero\Studio\21.0\Styles. For more information, see Android Mobile Application Development.

Android Dark style

Creates a new Dark style customized for the Android 4 (KitKat) target platform. The Android Dark style is delivered in the product at C:\Users\Public\Documents\Embarcadero\Studio\21.0\Styles. For more information, see Android Mobile Application Development.

Android L Light style

Creates a new Light style customized for the Android 5 (Lollipop) target platform. The Android L Light style is delivered in the product at C:\Users\Public\Documents\Embarcadero\Studio\21.0\Styles. For more information, see Android Mobile Application Development.

Android L Dark style

Creates a new Dark style customized for the Android 5 (Lollipop) target platform. The Android L Dark style is delivered in the product at C:\Users\Public\Documents\Embarcadero\Studio\21.0\Styles. For more information, see Android Mobile Application Development.

Blank Style for Windows

Creates an empty style for the Windows platform. You can add custom graphics and objects to the blank style, and save it as a FireMonkey style. After this, you can use the style in TStyleBook.

Blank Style for Mac

Creates an empty style for the macOS Yosemite platform. You can add custom graphics and objects to the blank style, and save it as a FireMonkey style. After this, you can use the style in TStyleBook.

Blank Style for iOS

Creates an empty style for the iOS platform. You can add custom graphics and objects to the blank style, and save it as a FireMonkey style. After this, you can use the style in TStyleBook.

Blank Style for Android

Creates an empty style for the Android platform. You can add custom graphics and objects to the blank style, and save it as a FireMonkey style. After this, you can use the style in TStyleBook.

Open Style Command

Click the Open Style button (or select File > Open (Ctrl+O)) in the Bitmap Style Designer, and then navigate to the location of a style you want to edit. You can open only a .vsf style using the Bitmap Style Designer. (You can, however, create .style files.)

Save Style Command

Click the Save Style button (or select File > Save or File > Save As (Ctrl+S)) in the Bitmap Style Designer. You can save styles as either .vsf or .style files.

Test Style Command

Clicking the green Test Style button TestCommand.png opens the Style Viewer, which allows you to examine the UI elements in the style you are testing, including the styles used for enabled and disabled UI elements.

The Style Viewer displays the appropriate type of style, such as:

  • VCL Style Viewer
    • Windows
    • Windows10 light and dark mode
  • FMX Style Viewer
    • Windows
    • MacOS
  • FMX Windows Modern Style Viewer
    • Windows light and dark mode
  • FMX Metropolis UI Style Viewer
  • Mobile Style Viewer
    • iOS
    • Android dark and light mode
    • Android L dark and light mode

The Test Style command provides the following options:

Test style.png

Test Style Commands:

Item Description

Test VCL Style

Allows you to test a VCL style that you are constructing.

Test FireMonkey Style

Allows you to test a FireMonkey style that you are constructing.

Test FireMonkey Windows Modern Style

Allows you to test a FireMonkey Windows Modern style that you are constructing.

Test FireMonkey Metropolis UI Style

Allows you to test a FireMonkey Metropolis UI style that you are constructing.

Test FireMonkey Mobile Style

Allows you to test a FireMonkey mobile style that you are constructing.

Test <style> with <multiplier> Resolution Graphic

Allows you to test the specified style in a resolution that is <multiplier> times bigger than the base style resolution. Use these entries to see how your style looks on device screens with a high pixel density.

If you are building a Metropolis UI style, choose:

  • Test FireMonkey Style to see how the basic controls appear in Metropolis UI style
  • Test FireMonkey Metropolis UI Desktop Style to see the new controls specific to Metropolis UI

Add Object Template Button

The Add Object Template button allows you to add object templates to the style. Each object template includes the appropriate ready-to-use structure of the object. You only need to rename the object and assign properties as you prefer. The Params field, which is populated automatically, contains directives for the style converter about how to create the real style-object in the resulting style. For example, if the style converter see [CHANGEPRESSEDOPACITY] in the Params field, then it uses a special TActiveLayout object.

When you click one of the Add Object Template Buttons, the object template is added at the end of the Objects tree and is given a generic name, such as StyleObject<n>_Button after you click Add Button.

AddButton.png

Add Object Template Commands:

Button Description

Add Button

Adds a generic button to the current style.

Add Button with Text

Adds a generic button with text to the current style.

Add Button with Glyph

Adds a generic button with a glyph or icon to the current style.

Add CheckBox

Adds a check box to the current style.

Add RadioButton

Adds a radio button to the current style.

Add Label

Adds a label to the current style.

Add Active Label

Adds an active label to the current style. An active label has additional functionality related to fonts.

Add Edit

Adds an edit field to the current style.

Add Panel

Adds a panel to the current style.

Add ProgressBar

Adds a progress bar to the current style.

Add TrackBar

Adds a track bar to the current style.

Add Switch

Adds a switch to the current style.

Objects with Text Info Buttons

The Objects with Text Info buttons are located on the right-hand section of the toolbar:

TBarbtns.png

These buttons perform the following tasks:

Button Object Description

T

StyleObject

Inserts a simple object that you can use as a container or a simple object with color or font data.

Tx1

BitmapObject

Inserts an object that has one bitmap state (for example, panels, toolbars).

Tx2

ActiveObject

Inserts an object that has two font states (active font and disabled font - only used for VCL styles).

Tx2

ActiveBitmap

Inserts an object that has two bitmap states (bitmap or activebitmap - for example, menu items).

x3

SystemButton

Inserts an object for the title of the form with three states (min, max, close buttons).

x5

ButtonObject

Inserts an object that has five bitmap states (disabled, enabled, hot, pressed, focused - for example, button).

Tx5

TextObject

Inserts an object that has five font states (disabled font, enabled font, hot font, pressed font, focused font).

Context Menu Commands for Editing Objects

The context menu for the Objects Tree contains some useful commands for editing objects.

Automatically Adjusting Resolutions

Using the context menu, you can automatically update a selected object for different resolutions (with automatically adjusting Bitmap and Margin properties). You just set these two properties for 1x resolution objects only. If the object also has objects for other resolutions (Face20x for 2x resolution, for example), right-clicking the object and selecting Automatically Adjust Object for All Graphic Resolutions in the context menu automatically adds new objects as needed and sets all the properties for the objects (for Face20x, for example).

To create objects for other resolutions, see #Style Menu.


AdjustResolution.png

Testing Your Custom Style Objects

You can individually test custom objects. If you added a custom object (for example, “smallswitch”), then you can test only this object with different graphic resolutions. Just call a Test object style command from the context menu for the object.

TestingObject.png

See Also