We're known for our grids—specifically, FlexGrid‐ and our most popular blogs are usually about FlexGrid and how you can customize them up to meet your users' requirements. Here's a post from 2013, by our own Greg Lutz, who has since moved on to lead the Xuni native mobile product line. Enjoy! FlexGrid for WinForms 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 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.
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.
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. FlexGrid 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"];
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.
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!