Card View Tutorial. Step 5: Styles And Style Sheets
- 3 minutes to read
The previous topic explained how to assign editors to grid cells’ contents. The result of all the actions performed is shown below:
This topic now demonstrates how to improve the grid’s appearance using styles and the Styles Repository.
Go to the DevExpress tab of the component palette and drop a TcxStyleRepository control on the form:
With the Style Repository, you can create and manage styles. Double-click the TcxStyleRepository component on the form to invoke the editing dialog. Activate the Styles page and click the Add button to create a new style, as displayed below:
Note that the style has been renamed to CaptionRowStyle. Now you need to set up the other style properties:
Enter 0x00C56A31 as the Style.Color property value.
Set the Style.TextColor property value to clWhite.
Expand the Style.Font property and set its font style to fsBold.
After the style has been created and set up, it can be assigned to a grid View element. Select the grid View using the Structure Navigator, Component Editor, or View selector. Expand the Styles property in the Object Inspector. Select the Styles.CaptionRow property and use the corresponding combo to assign the CaptionRowStyle to the card row headers. The result is shown in the following screenshot:
You can create and assign styles in the same way for every grid element. But there is another easier way to manipulate grid appearance – by using style sheets.
A style sheet is a set of styles designed for a specific View type. There are four types of style sheet: Table View style sheet, Banded Table View style sheet, Card View style sheet, and Layout View style sheet. All these style sheets can be created and edited using the Style Sheets tab of the Style Repository Editor:
The Style Repository also provides a set of predefined color schemes for each View type. To use predefined style sheets, follow the instructions below:
Activate the Style Repository Editor. Switch to the Style Sheets tab.
Click the Predefined… button to invoke the Predefined StyleSheets dialog.
Use the Style Sheet Class combo to select the type of the required style sheet – TcxGridCardViewStyleSheet in this case:
- Select the DevExpress style sheet from the list below the Style Sheet Class combo box. Watch the preview box at the right side of the dialog as it reflects the results of applying this color scheme to a sample grid.
- Press the Load button at the bottom of the dialog.
After the required style sheet has been loaded into the editor, you can access and override individual styles within it. Switch to the Styles tab of the Style Repository Editor. Select the desired style and modify its settings as described above.
Now we will assign the DevExpess style sheet to a Card View. Select the cvCars View using the Structure Navigator or the Component Editor. Expand the Styles property and select the style sheet just created using the combo box near the StyleSheet property. Note that all grid element styles have been assigned and styles settings can now be edited using the Object Inspector.
The grid control reflects the changes immediately:
For comprehensive info about the Style Repository and its usage, see the Style Repository topic.