Appearance Customization
- 12 minutes to read
The Spreadsheet control provides extensive customization options for the appearance of both the control’s UI elements and the currently opened workbook document. The Spreadsheet control’s appearance customization functionality is divided into four hierarchically arranged levels:
The Global Appearance Customization Level that includes the appearance settings applied to both the Spreadsheet control and the default visual style applied to all sheets within the currently opened workbook document;
The Worksheet Appearance Customization Level that includes the appearance settings applied to individual Table View worksheets within the currently opened spreadsheet document;
The Table Item Appearance Customization Level that includes the style settings applied to all cells within an individual table item;
The Individual Cell Customization Level that includes the style settings applied to an individual cell object.
Each subsequent appearance level overrides the previous one. For instance, the custom background color applied to a column object (i.e., both the cell objects and uninitialized cells, hosted within it) overrides the cell background color set by using one of the skins from the ExpressSkins Library or the Styles technology. In turn, the custom background color setting applied to a particular cell object within the customized column object, overrides its respective background color setting:
The Global Appearance Customization Level
The global level appearance settings affect everything in the Spreadsheet control – from UI elements of the control itself to the currently opened spreadsheet document. However, this level has the lowest priority, and its settings applied to the workbook content, are overridden by the corresponding worksheet, table item, and cell appearance settings. On this level, you can customize the default cell appearance within the opened spreadsheet document, hide or display scrollbars, the entire caption bar or individual buttons hosted within it, etc.
The Spreadsheet control provides the following global appearance customization options that can be used independently or collectively:
The Look and Feel technology affecting the entire control;
The Styles technology affecting specific UI elements, such as the caption bar, headers, cell selection rectangle, etc;
The Spreadsheet control’s global OptionsView settings affecting both its appearance and functionality.
The Look and Feel Appearance Settings
You can customize the Look and Feel appearance settings of the Spreadsheet control by using its LookAndFeel property. As with other DevExpress controls, the Look and Feel functionality allows you to either choose between five predefined styles for the Spreadsheet control or apply one of the available skins.
In order to customize the Spreadsheet control’s Look and Feel settings, set the LookAndFeel.NativeStyle property to False. Otherwise, the native windows style (one of the five predefined styles) is used to paint the control. The other four predefined styles can be assigned to the Spreadsheet control by using its LookAndFeel.NativeStyle property.
To select one of the skins, provided by the Spreadsheet control, use its LookAndFeel.SkinName property. The currently selected skin overrides any of the predefined styles except native.
The following image demonstrates various Look and Feel settings applied to the Spreadsheet control: the native style (Windows 7), Stardust and McSkin:
The Styles Appearance Settings
While the selected Look and Feel settings apply to all UI elements of the Spreadsheet control, the Styles technology allows you to customize the control’s appearance more discretely. The Spreadsheet control’s Styles property provides access to appearance settings of individual UI elements or specific groups of worksheet and control UI elements, such as the sheet background, cell content, and selection area. The Styles appearance settings are applied to a specific Spreadsheet control’s UI elements, overriding the Look and Feel settings, unless stated otherwise:
The default cell brush and content colors (Styles.Content.Color and Styles.Content.TextColor);
The worksheet background color (Styles.Background.Color);
The background color of both horizontal and vertical standard headers (Styles.Header.Color value is in effect only if no skin is applied and the LookAndFeel.NativeStyle property is set to False);
The standard header font settings (Styles.Header.Font);
The standard header font color (Styles.Header.TextColor property is in effect only if the native style is disabled);
The font settings used to display worksheet names on their tabs (Styles.PageControl.Font and Styles.PageControl.TextColor);
The cell selector’s color (Styles.Selection.Color).
Both the Spreadsheet control’s LookAndFeel and Styles properties can be used collectively to add more flexibility to the appearance customization. For instance, you can use the Styles technology to customize the standard McSkin skin:
The Global OptionsView Settings
While the Look And Feel and Styles appearance settings primarily determine color schemes and drawing styles for the Spreadsheet control’s View and caption bar areas, the global OptionsView property set allows you to change the end-user experience with the control’s UI elements.
The global OptionsView settings allow you to hide or display such important UI elements as grid lines that separate individual cells, both horizontal and vertical scrollbars, and the standard worksheet headers, whose reference style can be also changed.
In addition to the settings affecting the availability of specific UI elements, the OptionsView property set provides the means to customize the colors of grid and frozen pane separator lines (OptionsView.GridLineColor and OptionsView.FrozenPaneSeparatorColor).
Moreover, the global OptionsView settings allow you to change the formula expression display mode (OptionsView.ShowFormulas and OptionsView.ZeroValues), disable or enable the antialiasing effect applied to all floating containers (OptionsView.Antialiasing), and select the date/time system used in formula calculations (OptionsView.DateTimeSystem).
The Worksheet Appearance Customization Level
The Table View worksheet’s Options property corresponds to the next appearance customization level whose settings are applied to individual worksheets. These settings override the corresponding global OptionsView settings.
With the Options property set, for instance, you can resize all columns within a single Table View worksheet without affecting the entire spreadsheet document:
Since there is no complete match of the global and worksheet level options, the relationship between the OptionsView and Options settings is detailed in the following table:
Global Settings | Table View Worksheet Settings | Description |
|---|---|---|
The OptionsView.Antialiasing property. | Individual worksheets do not have a corresponding antialiasing setting. | The antialiasing setting affects all floating objects within the current spreadsheet document. |
The Spreadsheet control has no global settings that specify table item dimensions. | The Options.DefaultColumnWidth property. | The default column width can be specified only for individual Table View worksheets. Alternatively, you can use the Column.DefaultSize or Columns.DefaultSize properties. On the global level, the default column width is affected only by the dxSpreadSheetDefaultColumnWidth constant. |
The OptionsView.CellAutoHeight property. | The Options.DefaultRowHeight property. | If the CellAutoHeight property is set to True, and the height of a cell, specified by using the Table View worksheet’s Options.DefaultRowHeight property, is too high or too low for the cell content, the cell object’s height is lowered or raised accordingly. You can also use the Table View worksheet’s Row.DefaultSize or Rows.DefaultSize properties to change the height of all rows within a particular worksheet. |
The OptionsView.DateTimeSystem property. | Since formula expressions can include arguments from different worksheets, the Spreadsheet control does not allow you to use more than one Date/Time setting within the same spreadsheet document. | The assigned Date/Time setting is applied to all worksheets within the currently opened spreadsheet document. |
The OptionsView.FrozenPaneSeparatorColor property. | The Spreadsheet control does not allow you to assign different frozen pane separator colors to individual worksheets within the same spreadsheet document. | The frozen pane separators always look the same on all sheets within the same workbook. |
The OptionsView.FrozenPaneSeparatorWidth property. | The Spreadsheet control does not allow you to assign different frozen pane separator widths to individual worksheets within the same spreadsheet document. | The frozen pane separators always look the same on all sheets within the same workbook. |
The OptionsView.GridLineColor property. | The Spreadsheet control does not allow you to assign different grid line colors to individual worksheets within the same spreadsheet document. | The specified grid line color is the same for all sheets within the same workbook. |
The OptionsView.GridLines property. | The Options.GridLines property. | If the Options.GridLines property is set to bDefault, the OptionsView.GridLines property value is applied to a particular Table View worksheet. Otherwise, Options.GridLines overrides the global setting. |
The OptionsView.Headers property. | The Options.Headers property. | If the Options.Headers property is set to bDefault, the OptionsView.Headers property value is applied to a particular Table View worksheet. Otherwise, Options.Headers overrides the global setting. |
The OptionsView.HorizontalScrollBar property. | The Options.HorizontalScrollBar property. | If the Options.HorizontalScrollBar property is set to bDefault, the OptionsView.HorizontalScrollBar property value is applied to a particular Table View worksheet. Otherwise, Options.HorizontalScrollBar overrides the global setting. |
The OptionsView.R1C1Reference property. | The Spreadsheet control does not allow you to use more than one reference style simultaneously within the same spreadsheet document. | The assigned cell reference style applies to the entire workbook since the formula expressions can contain references to cells and cell ranges located within different sheets. |
The OptionsView.ShowFormulas property. | The Options.ShowFormulas property. | If the Options.ShowFormulas property is set to bDefault, the OptionsView.ShowFormulas property value is applied to a particular Table View worksheet. Otherwise, Options.ShowFormulas overrides the global setting. |
The OptionsView.VerticalScrollBar property. | The Options.VerticalScrollBar property. | If the Options.VerticalScrollBar property is set to bDefault, the OptionsView.VerticalScrollBar property value is applied to a particular Table View worksheet. Otherwise, Options.VerticalScrollBar overrides the global setting. |
The OptionsView.ZeroValues property. | The Options.ZeroValues property. | If the Options.ZeroValues property is set to bDefault, the OptionsView.ZeroValues property value is applied to a particular Table View worksheet. Otherwise, Options.ZeroValue overrides the global setting. |
There is no match for the ZoomFactor setting on the global level. | The Options.ZoomFactor property. | You can specify zoom factor values only for individual Table View worksheets. The Spreadsheet control does not provide the global zoom factor settings. |
Refer to the Working with Rows and Columns topic for additional information on customization of table-related appearance settings.
The Table Item Appearance Customization Level
The next appearance customization level of the Spreadsheet control is represented by the style settings of individual table items within a particular Table View worksheet. The table items term refers to the logical sheet elements, i.e., columns and rows used to host both uninitialized cells and cell objects.
In order to customize an individual column and/or row within a Table View worksheet, you first need to create a corresponding logical column and/or row object, respectively. To do so, call the Table View worksheet’s Columns.CreateItem and/or Rows.CreateItem functions. Then you can use the table item’s Style property to customize the appearance of all cells hosted within a row or column object.
The following code example creates one column and one row object and assigns the custom brush and border settings to them:
//...
var
ATableView: TdxSpreadSheetTableView;
AColumn: TdxSpreadSheetTableColumn;
ARow: TdxSpreadSheetTableRow;
//...
ATableView := dxSpreadSheet1.ActiveSheetAsTable;
// Creating a column object corresponding to the third column (C)
// from the left border of the worksheet's table
AColumn := ATableView.Columns.CreateItem(2);
// Creating a row object corresponding to the third row
// from the top border of the worksheet's table
ARow := ATableView.Rows.CreateItem(2);
// Assigning the custom border settings to the C column
AColumn.Style.Borders[bLeft].Color := clBlue;
AColumn.Style.Borders[bLeft].Style := sscbsMediumDashDotDot;
AColumn.Style.Borders[bRight].Color := clBlue;
AColumn.Style.Borders[bRight].Style := sscbsMediumDashDotDot;
// Assigning the custom brush settings to all cells within the C column
AColumn.Style.Brush.Style := sscfsRevDiagonalStrip;
AColumn.Style.Brush.BackgroundColor := clHotLight;
AColumn.Style.Brush.ForegroundColor := clSkyBlue;
// Assigning the custom border settings to the third row
ARow.Style.Borders[bTop].Color := clBlue;
ARow.Style.Borders[bTop].Style := sscbsMediumDashDotDot;
ARow.Style.Borders[bBottom].Color := clBlue;
ARow.Style.Borders[bBottom].Style := sscbsMediumDashDotDot;
// Assigning the custom brush settings to all cells within the third row
ARow.Style.Brush.Style := sscfsRevDiagonalStrip;
ARow.Style.Brush.BackgroundColor := clHotLight;
ARow.Style.Brush.ForegroundColor := clSkyBlue;
Note that both the column and row objects are created in response to creation of the corresponding cell object:
In addition to the cell style settings, you can customize table item dimensions by using the Size property that overrides the Table View worksheet’s Options.DefaultColumnWidth and Options.DefaultRowHeight properties. For additional information on resizing individual columns and rows, refer to the Resizing of Individual Rows and Columns.
An end-user can customize individual columns and rows by clicking their captions and invoking the Format Cells dialog from a respective context menu.
The Individual Cell Customization Level
Since individual cell objects are the smallest logical elements within a Table View worksheet, this is the last available level of appearance customization, which therefore has the highest priority.
Individual cell appearance settings are provided by the cell object’s Style property set which is identical to the settings provided by table items on the previous level.
Additionally, you can access both the column and row objects to which the cell object belongs by using its Column and Row properties, respectively.
As in the case of the Table Item Appearance Customization level, an end-user can customize cells by invoking the Format Cells dialog from a respective context menu while a single cell or cell range is selected:
For additional information on cell style settings, refer to the Cell Style Customization topic.