Is it possible to apply custom styling with xaml to the FlexGrid?

Is it possible to apply custom styling with xaml to the FlexGrid?

Posted by: tobias.walter on 5 June 2018, 4:12 am EST

• 

  tobias.walter

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 June 2018, 4:12 am EST

  Hi,

  I tried to apply custom styling to our FlexGrid with xaml. But I couldn’t achieve more than basic Styling like alternating row colors. Are there some resources how I can do this? I found some resources describing this with c# code, but nothing with xaml.

  Best regards

  Tobias

• 

  tobias.walter

  • Post Options:
  • Link
    Copy

  Posted 5 June 2018, 7:03 am EST

  For example, I want :

  • a different FontSize in the Header than in the Cells.
  • a border only at the bottom of each cell
  • a border only at the bottom of the header

  and many more custom styling stuff.

  It would be great if you could tell me whether stuff like this is possible or not.

  Edit: I just found out, that the Datagrid supports all this. Are there somewhere the differences shown between the DataGrid and the FlexGrid?

  Best regards

  Tobias Walter

• 

  tobias.walter

  • Post Options:
  • Link
    Copy

  Posted 6 June 2018, 7:56 am EST

  Hi Ruchir.

  maybe I’m looking into the false samples, but I can’t find any styling resources in these projects. I’m working with the release version 4.0.20173.579, did the FlexGrid change? For example, I go into Controls\C1WPFFLexGrid.4\XAML I can find there really basic styling. For comparison I go into Controls\C1WPFDataGrid.4\XAML I can find there in depth styling resources, exactly what I would need for the FlexGrid.

  Edit: Okay, I found the factory examples, I guess that works for us, but could you give me a snippet to style the header border, so that it’s just on the bottom?

  Edit: Okay, I was able to style the border via the HeaderCellStyle Property on a Column, isn’t there a global way to do this for all columns? And how would I set the header height, the CellStyle has no Property to do so…

  Thanks for the help

  Tobias

• 

  Ruchir.Agarwal

  

  • Post Options:
  • Link
    Copy

  Posted 7 June 2018, 12:14 am EST

  Hello Tobias,

  Yes, the custom styling requirements you mentioned are all possible with C1FlexGrid. To get to know of the differences between C1FlexGrid and C1DataGrid, please refer to the following documentation page: http://help.grapecity.com/componentone/NetHelp/c1flexgridwpfsilv/webframe.html#ComparisonWPFGrids.html
  
  Also, there are various product samples for C1FlexGrid that you can find installed at \Documents\ComponentOne Samples\WPF\C1.WPF.FlexGrid\CS location in your machine. Since you need to have various custom styling, I strongly suggest you to refer these samples, as they would make you aware of the various concepts available in C1Flexgrid like CellFactory, RowPresenter etc and will help you understand how to modify their appearance as per your requirement.

  Thanks,
  
  Ruchir

• 

  Ruchir.Agarwal

  

  • Post Options:
  • Link
    Copy

  Posted 7 June 2018, 3:26 am EST

  Hello Tobias,

  Using CellFactory, you can easily achieve your requirements, you just need to override ApplyCellStyles method, as follows:```
  
  public override void ApplyCellStyles(C1FlexGrid grid, CellType cellType, CellRange rng, Border bdr)
  
  {
  
  if (cellType== CellType.ColumnHeader)
  
  {
  
  var tb = bdr.Child as TextBlock;
  
  tb.Foreground = Brushes.Yellow;
  
  tb.FontSize = 30;

              bdr.Background = Brushes.Red;
              bdr.BorderThickness = new Thickness(0, 0, 0, 5);
              bdr.BorderBrush = Brushes.Blue;
          }
          else
          {
              base.ApplyCellStyles(grid, cellType, rng, bdr);
          }
      }
  

  And for setting column header height use the following statement 

  
  
  fg.ColumnHeaders.Rows[0].Height = 80;

  
  Thanks & Regards,
  
  Ruchir