Skip to main content

Using StyleSheets

  • 2 minutes to read

The most convenient way of customizing the vertical grid’s appearance is to use style sheets. Style sheets comprise sets of styles for all the vertical grid’s elements. A style sheet for the vertical grid control is represented by a TcxVerticalGridStyleSheet class instance.

Instead of creating separate styles for every view element, you can create a style sheet containing all the styles supported by the required grid view and then assign the style sheet to the view’s Styles.StyleSheet property.

The style repository editor allows you to add/delete style sheets, customize their styles, store/restore style sheets to INI files and load predefined style sheets:

The Style Sheet Class combo box allows you to select the type of the style sheet you want to create. When you select any item within the left pane, a sample vertical grid in the preview section is automatically repainted to reflect the new color scheme.

For instance, a vertical grid control with the DevExpress style applied will look as follows:

Note

when you create a style sheet, all its styles are added to the TcxStyleRepository.Items collection. But when you delete a style sheet, the corresponding styles are NOT deleted automatically. If necessary, though, you can delete them manually.

The StyleSheet Editor

Like the Predefined StyleSheets dialog, the StyleSheet Editor allows WYSIWYG style sheet creation. Select the desired style sheet from the list and click the [Edit…] button to activate the editor.

The styles listbox displays the list of styles available for the current grid view. Each style corresponds to a grid view element.

The preview section immediately reflects any changes after the Color and Font dialogs are closed. The following image shows a grid control with the style changed for the Content element. The background and text colors are blue and white respectively.