WPF FlexGrid Style Skills Part 1: Setting Cell Background Colors

_Translation of a post by Alice Yue. Original post in Chinese located here._ One of the most asked questions for the FlexGrid is how to set the style of the cell (including the foreground color and background color). Normally, we implement the style settings through the FlexGrid's CellFactory by overriding the ApplyCellStyles method. This article introduces you to using the FlexGrid’s CellFactory and provides an example of how to set a specific cell style using FlexGrid.

Data binding

First, we need to bind the FlexGrid to data so that we have something to display. We will use a DataTable for that purpose as illustrated below:

            DataTable dt = new DataTable ();  
            dt.Columns.Add ( "CurrencyCode" , typeof ( int ));  
            dt.Columns.Add ( "Industry" , typeof ( string ));  
            dt.Columns.Add ( "Market" , typeof ( string ));  
            dt.Columns.Add ( "Sector" , typeof ( int ));  
            dt.Columns.Add ( "Total" , typeof ( double ));  
            Dt.Columns.Add ( "SecurityType" , typeof ( string ));  
            dt.Rows.Add (1, "Ind1" , "M1" , 100, null , "type1" );  
            dt.Rows.Add (2, "Ind2" , "M2" , 200, null , "type2" );  
            dt.Rows.Add (3, "Ind3" , "M3" , 300, 12345678.1234567, "type3" );  
            dt.Rows.Add (4, "Ind4" , "M4" , 400, 12345678.1234567, "type4" );  
            dt.Rows.Add (5, "Ind5" , "M5" , 500, 12345678.1234567, " type5 " );  
            dt.Rows.Add (6, "Ind6" , "M6" , 600, 12345678.1234567, "type6" );  
            dt.Rows.Add (7, "Ind7" , "M7" , 700, 12345678.1234567, " type7 " );  
            dt.Rows.Add (8, "Ind8" , "M8" , 800, 12345678.1234567, "type8" );  
            dt.Rows.Add (9, "Ind9" , "M9" , 900, 12345678.1234567, "type9" );  

            flex.ItemsSource = dt.AsDataView ();  

Set the CellFactory

To use the FlexGrid’s CellFactory feature we’ll create our own CellFactory class (called MyCellFactory) which will inherit from the base CellFactory:

public class MyCellFactory : CellFactory  
{  
}  

We’ll need to tell the FlexGrid to use this CellFactory rather than the default. The code is as follows:

flex.CellFactory = new MyCellFactory ();  

Override ApplyCellStyles

You’ll need to implement the CellFactory's ApplyCellStyles method to implement the style settings for the specified cell. Inside ApplyCellStyles we can select a particular cell, and set the other properties. The Border object (bdr) lets us set the background color and border color, but by accessing it’s Child element as a TextBlock we can also set properties for text style (such as FontWeight and FontSize). Code Reference:

   public  override  void ApplyCellStyles (C1FlexGrid grid, CellType cellType, CellRange range, Border bdr)  
        {  
           var columnindex = range.Column;  
           var rowindex = range.Row;           
           if ((columnindex == 2) && (rowindex == 3))  
            {  
               // set the customizations on the cell when it is not selected   
                bdr.Background = new SolidColorBrush (Colors.Red);  
                bdr.BorderBrush = Brushes.Blue;  
                bdr.BorderThickness = new Thickness (1);  
            }  
        }  

When we run the code this time, the cell at column = 2 and row = 3 has had the cell style changed, as shown below:

Code improvements

In this implementation, the style for that particular cell will always be the same. Regardless of whether a user has selected a cell or not, the styling will be the same. This might be fine for some users, but many will want the original selection style to be retained to be retained when a user interacts with the FlexGrid. Otherwise it’s not clear when the cell is selected. We’ll be able to improve on our implementation by taking selection into consideration. Now we’ll add a condition to determine whether the specified cell is selected. Check if the cell is selected:

if (columnindex == grid.Selection.Column && rowindex == grid.Selection.Row)  

If the specified cell is selected, the background color is set to the selection background color for the rest of the FlexGrid. The code to improve the method is as follows:

   public  override  void ApplyCellStyles (C1FlexGrid grid, CellType cellType, CellRange range, Border bdr)  
        {  
           var columnindex = range.Column;  
           var rowindex = range.Row;  

            // check if the cell is selected or not   
            if ((columnindex == 2) && (rowindex == 3))  
            {  
                if (columnindex == grid.Selection.Column && rowindex == grid.Selection.Row)  
                {  
                    // set a different backcolor and border brush   
                    // when the cell is selected   
                    // leave the remaining customizations as it is  
                    bdr.Background = grid.SelectionBackground;  
                }  
                else  
                {  
                    bdr.Background = new SolidColorBrush (Colors.Red);  
                    bdr.BorderBrush = Brushes.Blue;  
                    bdr.BorderThickness = new Thickness (1);  
                }  
            }  

        }  

The background color settings for the specified cell are now implemented, and the background color for this cell will be the same as other cells when selected.[

Download the sample for this article.

](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2017/05/Wpf_Flex_CellStyle.zip)