How To Format Flexgrid for Multi-line or Header Text Wrapping

How To Format Flexgrid for Multi-line or Header Text Wrapping

Posted by: john.kiowski on 4 September 2019, 2:36 am EST

• 

  john.kiowski

  • Post Options:
  • Link
    Copy

  Posted 4 September 2019, 2:36 am EST

  I'm using the FlexGrid in a UWP project.
  
  What is the recommended technique for formatting FlexGrid column headers for header text wrapping, or multi-line header text? I have a requirement for some long header text that won't scale well on a single line.
  
  I've looked through the samples and don't see an example of this. Is it supported in the UWP FlexGrid? My preference is to do it in XAML, if possible.
  
  Thanks,
  John

• Marked as Answer

  

  Ruchir.Agarwal

  

  • Post Options:
  • Link
    Copy

  Replied 4 September 2019, 3:28 pm EST

  Hello John,
  
  To format FlexGrid's column header to show long header text, you can use a custom CellFactory and override its CreateColumnHeaderContent method to wrap the header textblock as follows:

  public class MyFactory : CellFactory
  {
      public MyFactory() { }
      public override void CreateColumnHeaderContent(C1FlexGrid grid, Border bdr, CellRange rng)
      {
          base.CreateColumnHeaderContent(grid, bdr, rng);
          var header = ((FrameworkElement)(bdr.Child as Grid).Children[0]) as TextBlock;
          header.TextWrapping =   TextWrapping.Wrap;
      }
  }

  
  Additionally, you need to change the ColumnHeader row height as well

  private void Page_Loaded(object sender, RoutedEventArgs e)
  {
      _grid.ItemsSource = _view;
      _grid.CellFactory = new MyFactory();
      _grid.ColumnHeaders.Rows[0].Height = 100;
  }

  I've also attached a simple application to demonstrate the whole code.
  
  Bets wishes,
  Ruchir
  Wrap_ColumnHeader.zip
• 

  john.kiowski

  • Post Options:
  • Link
    Copy

  Replied 5 September 2019, 6:51 am EST

  Thank you, this worked.