Style Repository
- 4 minutes to read
The ExpressQuantumGrid library provides a TcxStyleRepository component to help in designing styles. This component contains an embedded styles editor and this allows you to add, edit and delete styles within the repository.
To activate the style repository editor, double-click the component icon or select the Edit option from the component’s popup menu. The Styles panel of the editor manages the collection of styles contained within the style repository:
To customize a style within the editor, highlight it and use the Object Inspector. A style specifies the Background color, Text Color and Font of the applied object. The TcxStyle.Color, TcxStyle.TextColor and TcxStyle.Font properties represent these settings correspondingly.
Once a style is set up as required, you can apply it to a specific grid View element. For instance, you can apply a style to a Table View column via the TcxCustomGridTableItemStyles.Content property.
The Style Sheets tab of the editor allows you to organize styles in a more convenient manner. A style sheet contains style attributes specific to a grid View. ExpressQuantumGrid provides four View-specific types of style sheet: Table View style sheet, Banded Table View style sheet, Card View style sheet, and Layout View style sheet.
Instead of creating separate styles for every View element, you can create a style sheet containing all 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 specific style sheets, customize their styles, store/restore style sheets to INI files and load predefined style sheets:
Buttons:
- [Add] – Adds a new style sheet to the repository. Clicking the button opens the popup menu and this allows you to select the class of the style sheet to add.
[Delete] – Deletes all selected style sheets.
[Edit…] – Invokes the StyleSheet Editor. You can use the editor to specify and redefine individual sheet styles. The style sheet editor will be discussed later.
[Save to ini…] – Invokes the Save As dialog that allows saving all selected style sheets to an INI file.
[Load from ini…] – Invokes the Open dialog that allows loading style sheets from an INI file.
[Predefined…] – Invokes the Predefined StyleSheets dialog which gives you the ability to create a specific style sheet based on one of the predefined color schemes.
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 grid in the preview section is automatically repainted to reflect the new color scheme.
For instance, a banded grid View with the applied DevExpress style will look as follows:
The [Load] button creates a style sheet based on the color scheme selected, initializes its styles and closes the editor window.
The [Close] button only closes the editor window without creating a style sheet.
Note that 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, 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 following buttons allow you to change the style settings:
[Color…] – This button enables you to change the background color of the selected style via a standard color dialog.
[Font…] – This button allows you to change the font settings for the selected style via a standard font dialog.
The preview section immediately reflects any changes after the Color and Font dialogs are closed. The following image shows a grid control with a changed style for the Content element. The background and text colors are blue and white respectively.
The [OK] button applies all changes, creates styles within a style sheet if necessary and closes the StyleSheet Editor. Styles are created only if the default settings have been changed.
The [Cancel] button just closes the StyleSheet Editor discarding all changes.