Setting the Grid's Appearance
- 7 minutes to read
The TcxGrid control provides the following ways to modify its appearance:
Look And Feel. Changes the look & feel of the entire grid control.
Styles. Affects the appearance of the grid elements which support the Styles technology.
Custom Draw. Changes the appearance of grid control elements for which
OnCustomDraw~events are handled.
Let’s explore each option in detail.
Look And Feel
The ExpressQuantumGrid has a LookAndFeel property which provides 4 options:
Standard
Flat
UltraFlat
Office11
You can switch between them via the LookAndFeel.Kind property.
Implement the following code to apply the Flat appearance to your grid control:
If you are using the Windows XP operating system (or later), you can make your grid look like a native Windows control. Just set the LookAndFeel.NativeStyle property to True.
Implement the following code to make the grid control look like a native Windows control:
cxGrid1.LookAndFeel.NativeStyle := True;
Note
The NativeStyle property has higher priority than the Kind property. Thus, if the NativeStyle property is set, the Kind property has no effect.
Styles
Styles allow you to customize the appearance of specific grid elements, including Views and their elements. A style affects an element’s background, font and text color.
To apply a style to a specific grid element, you need to create a style object (TcxStyle) first. A Style Repository component provides a convenient way to create and manipulate styles at design time. If you apply styles at runtime, you can create them via code in the form’s constructor or by handling the form’s OnCreate event, for instance.
After a style is created, you can assign it to a specific style property to identify the look & feel of the corresponding grid element.
The following code creates a style (blue text and aqua background) in the form’s OnCreate handler and assigns it to the first column of the tvItems grid View:
AFirstColumnStyle: TcxStyle;
//...
procedure TForm1.FormCreate(Sender: TObject);
begin
AFirstColumnStyle := TcxStyle.Create(Self);
AFirstColumnStyle.Color := clAqua;
AFirstColumnStyle.TextColor := clBlue;
tvItems.Columns[0].Styles.Content := AFirstColumnStyle;
end;
The following image shows the result of applying this style to the first column. Note that other columns and other View elements are not assigned styles and they are painted by default.
A style repository component enables you to create and load predefined style sheets. A style sheet represents a set of styles suitable for a particular grid View type. 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. To create style sheets at design time, you must use a style repository. Refer to the Style Repository section for more information.
The following code assigns a style sheet (GridTableViewStyleSheetDevExpress) to the tvCustomers View, using a style repository component based on the DevExpress color scheme:
This specifies the look and feel options of all View elements at once. Now the tvCustomers View is displayed as follows:
In addition to static styles (styles common to all items or records), the EQGrid control allows you to override the appearance of particular cells, records, grouping rows, items, footer panels, etc. These styles are dynamic as they can be implemented only via code using style events. To access the style events, see the View’s and/or item’s Styles property.
For instance, the View’s Styles.OnGetContentStyle event enables you to provide different styles for individual cells addressed by a record and item. This event is fired in turn for each cell within a grid View. If you assign a style to the event’s AStyle parameter, the grid View will use this style to draw the current cell. Otherwise, the cell will be painted by default.
The item’s Styles.OnGetContentStyle event is similar to the View’s OnGetContentStyle event. However, it occurs only for the cells of the current item.
The following code shows how you can handle the View’s OnGetContentStyle event to color grid records based on the value of the Population column. The Table View (tvCountries) in this example displays records from the Country table. Countries with population greater than 10,000,000 are displayed with the AYellowStyle style (red text color and yellow background) and this style is created in the form’s OnCreate event as follows:
AYellowStyle: TcxStyle;
//...
procedure TForm1.FormCreate(Sender: TObject);
begin
AYellowStyle := TcxStyle.Create(Self);
AYellowStyle.Color := $0080FFFF;
AYellowStyle.TextColor := clMaroon;
end;
procedure TForm1.tvCountriesStylesGetContentStyle(
Sender: TcxCustomGridTableView; ARecord: TcxCustomGridRecord;
AItem: TcxCustomGridTableItem; out AStyle: TcxStyle);
begin
if ARecord.Values[tvCountriesPopulation.Index] > 10000000 then
AStyle := AYellowStyle;
end;
After you run the application, the grid control will look like:
Consider an example of specifying different styles for group rows at different nesting levels. For this purpose, the View’s OnGetGroupStyle event is handled. The ALevel parameter of the event identifies the nesting level of the grouping row for which the event is generated:
var
cxMyStyle1, cxMyStyle2: TcxStyle;
//...
//Put the following code into form constructor
cxMyStyle1 := TcxStyle.Create(Self);
cxMyStyle1.Color := $0042D7FF;
cxMyStyle2 := TcxStyle.Create(Self);
cxMyStyle2.Color := $0073E1CC;
procedure TForm1.tvCustomersStylesGetGroupStyle(
Sender: TcxGridTableView; ARecord: TcxCustomGridRecord; ALevel: Integer;
out AStyle: TcxStyle);
begin
if ALevel = 0 then
AStyle := cxMyStyle1
else
AStyle := cxMyStyle2;
end;
The result of the above code is shown in the image below:
Custom Draw
This feature provides the most powerful method of customizing the grid’s appearance. This is an event-based technology. Every customizable grid element provides a set of custom draw events (see the Custom Draw topic to learn more). Each event provides several arguments necessary for grid element painting. These parameters include:
Sender – the standard parameter passed to all event handlers
AViewInfo – an element’s ViewInfo
ACanvas – the grid control’s canvas
All these parameters are discussed in detail in the Custom Draw base concepts. The ACanvas parameter needs additional explanation though. Generally, the TcxCanvas class (passed by the ACanvas parameter) is a wrapper around the standard VCL canvas (TCanvas) and the latter is available via ACanvas.Canvas.
Note
The ACanvas parameter contains the canvas of the whole grid control and you have to calculate the current element’s bounding rectangle manually. The AViewInfo parameter contains the Bounds property representing the current element’s bounding rectangle.
Implement the code below to draw an image as a card background.
procedure TForm1.cxGridDBCardView1CustomDrawCell(Sender: TcxCustomGridTableView; ACanvas: TcxCanvas; AViewInfo: TcxGridTableDataCellViewInfo; var ADone: Boolean);
var
ARec: TRect;
ABitmap: TBitmap;
ATextToDraw: string;
begin
if (AViewInfo is TcxGridCardRowDataViewInfo) then
ATextToDraw := AViewInfo.GridRecord.DisplayTexts[AViewInfo.Item.Index]
else
ATextToDraw := VarAsType(AViewInfo.Item.Caption, varString);
ARec := AViewInfo.Bounds;
ABitmap := TBitmap.Create;
ABitmap.LoadFromFile('sky.bmp');
ACanvas.Canvas.Brush.Bitmap := ABitmap;
ACanvas.Canvas.FillRect(ARec);
ABitmap.Free;
SetBkMode(ACanvas.Canvas.Handle, TRANSPARENT);
ACanvas.DrawText(ATextToDraw, AViewInfo.Bounds, 0);
ADone := True;
end;
The result of the above code is shown on the image below:
