Show: Object Pascal C++
Display Preferences

Bitmap Style Designer

From Appmethod Topics
Jump to: navigation, search

Go Up to Customizing FireMonkey Applications with Styles

Go Up to Tools Menu


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)

However, to open an existing FireMonkey style (.style file), you need to use the FireMonkey Style Designer.

For more information about what a style represents, see:

Bitmap Style Designer Window

Bitmap Style Designer Window

The Bitmap Style Designer comprises three main panels, that is, the Objects tree, the Viewer, and the Inspector:

  • The Objects tree, located on the left-hand side 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 an 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 object's tree. The copy is placed at the end of the tree and is given a new name (<name>_copy).
  • Delete an object from the object's tree.
    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. Note that the text may be 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.


  • The Viewer is the central panel, which contains the 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 objects are being viewed; the name of the file is displayed for Images; and Fonts, Colors, and System Colors are the titles used when the Fonts, Colors, and SysColors nodes, respectively, are selected.
  • 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.

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 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

Inspector

Gives focus to the Inspector panel.

Objects Tree

Gives focus to the Objects Tree panel.


Image Menu

Item Description

Add

Adds an image 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.


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.

BMPStyleDesignerToolbar2.png

New Style Command

The New Style button makes the following options available when you click the down-arrow:

BMPStyleDesignerNewStyleCmd.png
Item Description
New style for
VCL or
FireMonkey

Creates a new style with the look and feel of a classic Windows application.

New Metropolis UI style for FireMonkey

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.

New iOS6 style for FireMonkey

Creates a new style customized for iOS6. 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:

New iOS7 style for FireMonkey

Creates a new style customized for iOS7. 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:

New Android Light style for FireMonkey

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

New Android Dark style for FireMonkey

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

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
  • FMX Style Viewer
  • FMX Metropolis UI Style Viewer
  • Mobile Style Viewer

The Test Style command provides the following options:

BitmapStyleDesTest2.png
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 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

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 states for font (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 form's title 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 fonts for states (disabled font, enabled font, hot font, pressed font, focused font).

See Also

Personal tools
In other languages