Creating a Style using the Bitmap Style Designer

From RAD Studio
Jump to: navigation, search

Go Up to Working with VCL Styles


The following procedure illustrates how to create a new Bitmap Style using the Bitmap Style Designer.

  1. Open the Bitmap Style Designer (Tools > Bitmap Style Designer).
  2. Choose File > New and select a style template.
    The Objects tree, in the left-hand panel of the Bitmap Style Designer, displays the following categories:
    • Objects
    • Images
    • Fonts
    • Colors
    • SysColors
    The center panel displays a representation of the control you have selected in the Objects tree.
    The Inspector panel, located on the right-hand side, displays the properties of the selected control.
  3. Click the down-arrow on Objects in the Objects tree to see the list of controls that can be styled.
    Each control has a set of parts and states that can be set. For example, the CheckBox object has Unchecked, Checked, and Mixed states, and you can choose the desired look for each state.
  4. Click the down-arrow on Images in the Objects tree to see the bitmaps you can use for defining your style. Use the buttons in the center panel to manage the list of bitmaps:
    • Add
    • Delete
    • Update
    • Export
  5. To choose the look for a specific part or state of a control (such as a Button), set the corresponding properties in the right-hand panel (Inspector).
    For example, to change the location or size of a style part in the image for the progress bar, expand ProgressBar in the list of objects, select BarHorz, and click the ellipsis [...] in Bitmap in the Inspector. The Bitmap Property dialog box appears. Choose the image you want to use from the list box to the left. Choose the rectangle you want to appear as the horizontal progress bar by left-clicking the image of the ProgressBar to select the upper-left corner, and by right-clicking to set the lower-right corner.
  6. Click Fonts in the Objects tree to see the list of the available fonts that are used for the various parts and states of controls.
    For example, RadioButtonTextPressed defines the appearance of the text when the radio button is pressed. You can change the font by clicking Change..., or change just the color of the font by clicking Change color. To programmatically access the font colors in this list, call StyleServices.GetStyleFontColor.
  7. Click Colors in the Objects tree to see 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. To do that, call StyleServices.GetStyleColor.
      For example, to obtain the color used for form background, call StyleServices.GetStyleColor(scWindow).
    • The second category includes the colors used for controls that are rendered from code at run time (Panel, ListBox, Grid, and so on). In this case, modifying the color in the Colors list changes the appearance of the control.
  8. Click SysColors in the Objects tree to see a list of system colors equivalents that are used in the current style. System colors offer you a way to obtain colors similar to the style colors for the system color constants.
    For example, if you use clBtnFace in your code to render a control, call StyleServices.GetSystemColor(clBtnFace) to make your control style-enabled.
  9. Choose Style > Test or press F9 to see a sample of your style for different controls.

See Also