Creating Custom Styles for FlexGrid

_This post was reposted on October 23, 2015._ C1FlexGrid has very flexible styling capabilities. You can simply choose any of the built-in visual styles, or use the custom renderer sample to create your own color scheme. In addition, you can even create custom CellStyle objects to give your grid a completely original look very easily. CellStyles are especially nice when you need to use custom graphics in your style. This blog post shows how you can use CellStyles to create a couple unique styles which use special graphics.

The CellStyle class

The appearance of the cells (alignment, font, colors, borders, and so on) is handled with C1.Win.C1FlexGrid.CellStyle objects. The grid has a Styles property that holds the collection of styles used to format the grid. This collection has some different cell categories, such as fixed cells, selected cells and so on. You can change these styles to modify the way the grid looks, and you can also create your own custom styles and assign them to cells, rows, or columns.

'Mac' Style

This cell style mimics the MAC OS grid. And just for fun, i've turned the checkboxes into stars. Here are the images used for this style.

Image name

Image file

Mac_Header.png

Mac_HeaderSelected.png

Mac_Check.png

Mac_Uncheck.png

Here's how you can build a style like this. First, let's set the basic row styles. Use the Normal and Alternating styles to style the rows.

//get C1FlexGrid's normal row cell style  
CellStyle cs = c1FlexGrid1.Styles.Normal;  
cs.BackColor = Color.FromArgb(250, 250, 250);  
cs.Border.Direction = BorderDirEnum.Vertical;  
cs.Border.Color = Color.FromArgb(101, 101, 101);  
//get C1FlexGrid's alternating row cell style  
cs = c1FlexGrid1.Styles.Alternate;  
cs.BackColor = Color.FromArgb(239, 239, 255);  

Next, let's set the style for the fixed rows using a custom image. C1FlexGrid has special support for using images as cell backgrounds with the TileStretch enum. This image alignment option stretches the image to fill the cell, but it does not stretch the corners. So you can create cells that appear to have rounded corners with custom images very nicely.

//get C1FlexGrid's fixed cell style  
cs = c1FlexGrid1.Styles.Fixed;  
cs.BackgroundImage = imageList.Images["Mac_Header.png"];  
cs.BackgroundImageLayout = ImageAlignEnum.TileStretch;  
cs.Border.Width = 0;  
cs.Margins = new System.Drawing.Printing.Margins(4, 4, 4, 2);  

Next, we should set the style for a selected column header. In this case, we want it to share many of the same properties as the Fixed cell style. We can use the CellStyle.MergeWith method to merge an existing style onto a new style. Then we simply set the one style property that we want to be different, the background image.

//merge SelectedColumnHeader style with Fixed style  
cs = c1FlexGrid1.Styles.SelectedColumnHeader;  
cs.MergeWith(c1FlexGrid1.Styles.Fixed);  
//set unique background image  
cs.BackgroundImage = imageList.Images["Mac_HeaderSelected.png"];

The selected row header can share the same graphic as column header selected. Here, we'll make use of the MergeWith method once again (cs is the CellStyle object defining our SelectedColumnHeader style from the code above).

//merge SelectedRowHeader with SelectedColumHeader  
c1FlexGrid1.Styles.SelectedRowHeader.MergeWith(cs);

Next, we should set the Highlight style to a rich blue shade. This style is used to highlight selected cells. We will also merge the same with the Focus style, so there won't be any apparent difference between the Focus and Highlight style.

cs = c1FlexGrid1.Styles.Highlight;  
cs.Clear();  
cs.BackColor = Color.FromArgb(60, 143, 234);  
cs.ForeColor = Color.White;  
//copy Highlight style to Focus style  
c1FlexGrid1.Styles.Focus.MergeWith(cs);

Last, but not least, we set the glyphs to be used for our custom checkboxes. This is completely separate from the cell styles but it's still just as easy to configure.

//set custom checkbox glyphs  
c1FlexGrid1.Glyphs[GlyphEnum.Checked] = checkBoxes.Images["Mac_Check.png"];  
c1FlexGrid1.Glyphs[GlyphEnum.Unchecked] = checkBoxes.Images["Mac_Uncheck.png"];

'Glass' Style

This style is unique because it uses an image with rounded corners as the selected cell style. We also use images as normal cell styles to give it a subtle gradient texture. Here are the images used in this style.

Image name

Image file

Glass_Normal.png

Glass_Alternate.png

Glass_Header.png

Glass_HeaderSelected.png

Glass_Selected.png

Here is the complete code for creating this style.

//set Normal style  
CellStyle cs = c1FlexGrid1.Styles.Normal;  
cs.BackColor = Color.FromArgb(250, 250, 250);  
cs.Border.Width = 0;  
cs.BackgroundImage = glass.Images["Glass_Normal.png"];  
cs.BackgroundImageLayout = ImageAlignEnum.TileStretch;  
//set Alternate style  
cs = c1FlexGrid1.Styles.Alternate;  
cs.BackgroundImage = glass.Images["Glass_Alternate.png"];  
cs.BackgroundImageLayout = ImageAlignEnum.TileStretch;  
//set Fixed style  
cs = c1FlexGrid1.Styles.Fixed;  
cs.BackgroundImage = glass.Images["Glass_Header.png"];  
cs.BackgroundImageLayout = ImageAlignEnum.TileStretch;  
cs.Margins = new System.Drawing.Printing.Margins(4, 4, 4, 2);  
cs.Border.Width = 0;  
//set SelectedColumnHeader style  
cs = c1FlexGrid1.Styles.SelectedColumnHeader;  
cs.MergeWith(c1FlexGrid1.Styles.Fixed);  
cs.BackgroundImage = glass.Images["Glass_HeaderSelected.png"];  
//copy to SelectedRowHeader style  
c1FlexGrid1.Styles.SelectedRowHeader.MergeWith(cs);  
//set Highlight style  
cs = c1FlexGrid1.Styles.Highlight;  
cs.BackgroundImage = glass.Images["Glass_Selected.png"];  
cs.BackgroundImageLayout = ImageAlignEnum.TileStretch;  
cs.BackColor = Color.LightPink;  
cs.ForeColor = Color.Black;  
//copy to Focus style  
c1FlexGrid1.Styles.Focus.MergeWith(cs);

See, even designers can have a bit of fun with FlexGrid!