WPF FlexGrid Style Skills Part 2: Cell Foreground Color and Cell Font Settings

Translation of a post by Alice Yue. Original post in Chinese located here. In our last article, we discussed changing the background color settings for the cell by rewriting the ApplyCellStyles method, and setting the Border's Background property. This article covers another aspect of styling: how to set the cell font. Using the ApplyCellStyles method, we can get the Border object, and by accessing the Border.Child as a TextBlock, we can configure Font-related attributes (Foreground, FontWeight, TextDecorations, etc.) and set the font(please refer to Microsoft 's msdn: TextBlock class ).

Foreground color

The code for setting the foreground and background colors of a cell is as follows:

   public override void ApplyCellStyles (C1FlexGrid grid, CellType cellType, CellRange range, Border bdr)  
        {  
            var columnindex = range.Column;  
            var rowindex = range.Row;  
            var _textblock = bdr.Child as TextBlock;  
            if (_textblock == null ) return ;  
            // check if the cell is selected or not   
            bool selected = (columnindex == grid.Selection.Column && rowindex == grid.Selection.Row) ;  
            if ((columnindex == 2) && (rowindex == 3) &&! Selected)  
            {  
                    // set the customizations for the cell when it is not selected   
                    bdr.Background = new SolidColorBrush (Colors.Red);  
                    _textblock.Foreground = Brushes.Yellow;  
            }  

        }  

This will give us this result:

Setting cell font styles

Keeping in mind what we’ve already covered with TextBocks, we can use the ApplyCellStyles method to configure the Font style.

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

            if (_textblock == null ) return ;  
            // check if the cell is selected or not   
            bool selected = (columnindex == grid.Selection.Column && rowindex == grid.Selection.Row);  

            if ((columnindex == 2) && (rowindex == 3) &&! Selected)  
            {                  
                    //set the customizations on the cell when it is not selected   
                    bdr.Background = new SolidColorBrush (Colors.Red);  
                    _textblock.Foreground = Brushes.Yellow;  
                    _textblock.FontSize = 14d;  
                    _textblock.FontWeight = FontWeights.Bold;  
                    _textblock.FontStyle = FontStyles.Italic;  

            }  

        }  

This changes the background color, foreground color, and font style of the cell. When the cell is not selected, you’ll see something like this: If the cell is selected it will now appear differently:

Changing the style of the selected cell

If you want this to do something particular to the selected cell such as change the font style, we’ll need to add different code including any _textblock font-related attributes we want to reset. Code Reference:

    if (selected)  
        {  
            _textblock.FontSize = 12d;  
            _textblock.FontWeight = FontWeights.Normal;  
            _textblock.FontStyle = FontStyles.Normal;                      
        }  

Note: The Invalidate operation is required at the end of the method. The code is as follows:

grid.Invalidate ( new CellRange (3, 2));  

Now the selected cell will appear as below: [

Download the sample for this article.

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