DataGrid Cell.Style binding

Question

I have a performance issue with the WPF DataGrid (.net 4.0)

first, some details:

• I have a datagrid with an Observable collection as ItemsSource.
• this observableCollection itself contains collections of objects, each collection hence being a row, each object being a cell ("logical" cell of course, not actual dataGridCell)

the reason why I do this is because I only know at runtime how many columns I will have in my dataGrid.

• then I bind each DataGridCell's value to the value of the object in the "logical" table (= the collection of collections)

now the trouble I have is that I also have to be able to change whatever cell's Properties (like Background, Foreground, FontFamily, etc...) at any time while the app is running.

The solution I came up with is one involving setting the columns' cellStyles with bindings that bind to the "logical" cells' properties

here Is a sample code (no Xaml in my app):

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        Width = 1200;
        Height = 780;
        Top = 60;
        Left = 200;

        DataGrid dg = new DataGrid();
        Content = dg;

        ObservableCollection<Row> Source = new ObservableCollection<Row>();
        dg.ItemsSource = Source;

        dg.SelectionMode = DataGridSelectionMode.Extended;
        dg.IsSynchronizedWithCurrentItem = true;

        dg.CanUserSortColumns = false;
        dg.CanUserReorderColumns = true;
        dg.CanUserResizeColumns = true;
        dg.CanUserResizeRows = true;
        dg.CanUserAddRows = false;
        dg.CanUserDeleteRows = false;

        dg.AutoGenerateColumns = false;

        dg.EnableColumnVirtualization = true;
        dg.EnableRowVirtualization = false;     // unuseful in my case : I alawys have less lines than the DG can contain

        dg.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;
        dg.GridLinesVisibility = DataGridGridLinesVisibility.None;
        dg.HorizontalGridLinesBrush = Brushes.LightGray;

        dg.MinRowHeight = 20;
        dg.RowHeaderWidth = 20;

        for (int i = 0; i < 100; i++)
        {
            DataGridTextColumn column = new DataGridTextColumn();
            column.Binding = new Binding(String.Format(CultureInfo.InvariantCulture, "[{0}].Text", i));
            Style style = new Style(typeof(DataGridCell));
            style.Setters.Add(new Setter(DataGridCell.BackgroundProperty, new Binding(String.Format(CultureInfo.InvariantCulture, "[{0}].Background", i))));
            style.Setters.Add(new Setter(DataGridCell.ForegroundProperty, new Binding(String.Format(CultureInfo.InvariantCulture, "[{0}].Foreground", i))));
            column.CellStyle = style;
            column.Header = "Column " + i;
            dg.Columns.Add(column);
        }

        for (int i = 0; i < 35; i++)
        {
            Row dgRow = new Row();
            Source.Add(dgRow);
            for (int j = 0; j < 100; j++)
                dgRow.Add(new TextBox() { Text = "cell " + i + "/" + j, Background = Brushes.AliceBlue, Foreground = Brushes.BlueViolet });
        }
    }
}

public class Row : ObservableCollection<TextBox>
{
}

my problem is: with the VolumnVirtualisation On (I don't need row Virtualization in my case), the grid takes about 2sec to load, and then 1sec each time I move the horizontal scrollbar by a big leap (clic in the scrollBar bg, not the arrow)

this is too much for my purpose

so my question is: am I doing something wrong and if yes, what? what better way to do this do I have?

thanks for reading

Answer 1

If ColumnVirtualization make so problems, why do you need it? You can do a several improvements, but they can't solve the problem completely.

1. Change TextBoxes for light-weight objects:

   public class TextItem
   {
       public string Text { get; set; }
       public Brush Background { get; set; }
       public Brush Foreground { get; set; }
   }
   
   
   public class Row : ObservableCollection<TextItem>
   {
   }
   

2. Enable VirtualizingStackPanel: dg.SetValue(VirtualizingStackPanel.IsVirtualizingProperty, true);

3. Replace styles with templates:

       for (int i = 0; i < 100; i++)
       {
           DataGridTemplateColumn column = new DataGridTemplateColumn();
           column.CellTemplate = (DataTemplate)XamlReader.Parse(
               "<DataTemplate xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>" +
                   "<TextBlock DataContext='{Binding [" + i + "]}' Text='{Binding Text}' Background='{Binding Background}' Foreground='{Binding Foreground}'/>" +
               "</DataTemplate>");
           column.Header = "Column " + i;
           dg.Columns.Add(column);
       }
   

Answer 2

After a lot of time put into this, I came to the conclusion that I've reached the limit.

Here are a few thoughts for those that are dealing with the same issue:

1. There is no easy way to manage a single cell's visual properties in WPF as of .net 4.0: MS did not plan anything to make this easy so basically you are stuck with 2 possibilities to do this:

   • get the actual dataGridCell using some kind of helper function and then change its properties directly. This is easily done but can lead to big trouble if virtualization is turned on.
   • bind each cell's visual properties to dependency properties from your VM inside the dataGridCell's Style. you can use either the DataGrid.CellStyle or the Column.CellStyle to do so, depending on you constraints. This slows the dataGrid quite a bit though, and is quite a hassle to manage.
     
     

2. if like me you have no choice but to use the second option (because I need virtualization), here are a few things to consider:

   • you are not stuck with C#. There is actually a way to do your CellStyle in Xaml. See Martino's post on this issue. As far as I'm concerned, this works pretty well. I tweaked it a bit so as not to have to use the hack though: I define my style in Xaml and apply it to the Column.CellStyle. Then when I create a column in my code behind, I simply create a new Style inheriting this one, and I add the Tag setter with a binding set to: "[column's Index].Self". This breaks the MVVM model, but I'm not using it anyway and It's easier to maintain like this.
   • obviously, the more properties you have to bind, the more time it will take for your dataGrid to load, so stick to the minimum (using light-weight objects does make a small difference, as stated by Vorrtex).
   • while using templates or styles makes absolutely no difference regarding performance, if you are using dataGridTemplateColumns, you'd want to set you bindings up directly in the template instead of adding a style on top of the template, obviously (this does make a small difference with a huge number of data)

if anybody has anything to add to this, please do so! I'm still looking for any idea that can improve things up and would be glad for whatever crazy idea you have on the subject. Even in 3 months...