Styles Overview

• Aug 02, 2022
• 3 minutes to read

The ExpressVerticalGrid enables you to modify the style of its elements in a number of ways. Style Modifications are made by altering attributes such as background colors, text font, alignment, etc. This topic lists all the style settings available and provides an overview of the methods that can be used to apply styles. Note that style technology is not the limit - the ExpressVerticalGrid also allows you to customize the contents of its elements in any manner you like. By handling specially designed events, you can paint individual elements manually. Please refer to the Using Styles Events and Custom Painting Overview topic for details.

The vertical grid provides access to a collection of styles via the VerticalGrid.Styles property. This property contains the set of styles applied to the different control elements. The list of all styles available is given below:

Style	Description
Background	Specifies the style settings of the vertical grid’s background.
Category	Specifies the style settings of category rows.
Content	Specifies the style settings of the rows’ contents.
Header	Specifies the style settings of row headers.
Inactive	Specifies the style settings applied to inactive row headers.
IncSearch	Specifies the incremental search item style settings.
Navigator	Specifies the background color of the offset between the grid control’s navigator and horizontal scrollbar. This property is available only in the TcxVirtualVerticalGrid and TcxDBVerticalGrid controls.
NavigatorInfoPanel	Specifies the style for the information panel displayed in the grid control’s navigator.
Selection	Specifies the selected row’s header style settings.

To assign styles to vertical grid control elements, these styles must be created within the TcxStyleRepository. This component provides storage for individual styles and style sheets – predefined or custom sets of styles (see Using StyleSheets), and provides an embedded style editor.

The style settings include:

• Bitmap – specifies the bitmap for painting a vertical grid element;

• Color – specifies the background color for a vertical grid element;

• Font – contains font settings for drawing text within an element;

• TextColor – specifies the text color for painting an element.

These settings can be easily modified via the Object Inspector:

And by code:

//...
var
  AMyStyle: TcxStyle;
//...
AMyStyle := TcxStyle.Create(Self);
AMyStyle.Color := clSkyBlue;
AMyStyle.TextColor := clWhite;
AMyStyle.Font.Style := [fsBold];
cxVerticalGrid.Styles.Category := AMyStyle;
//...

The code execution’s result is shown in the following screenshot:

The VerticalGrid.Styles settings affect the appearance of all similar elements of the vertical grid control. See the Assigning Styles To Individual Rows, Using Styles Events and Custom Painting Overview topics for details.