C# – DataGrid Cell.Style binding

cdata-bindingdatagridperformancewpf

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

Best Answer

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

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>
{
}

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

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);
    }

Related Solutions

C# – WPF DataGrid: DataGridComboxBox ItemsSource Binding to a Collection of Collections

Firstly, this should be easy... secondly, why are you building (and binding) columns in C#? Eek.

XAML (I'm using a regular grid because I'm lazy):

<ListView Name="MyListView">
    <ListView.View>
        <GridView>

            <GridView.Columns>

                <GridViewColumn DisplayMemberBinding="{Binding Operation}" />

                <GridViewColumn>
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <ComboBox ItemsSource="{Binding Choices}" />
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>

            </GridView.Columns>

        </GridView>
    </ListView.View>
</ListView>

C#:

void Window1_Loaded(object sender, RoutedEventArgs e)
{
    var dahList = new List<StatsOperation>();

    dahList.Add(new StatsOperation
    {
        Operation = "Op A",
        Choices = new string[] { "One", "Two", "Three" },
    });

    dahList.Add(new StatsOperation
    {
        Operation = "Op B",
        Choices = new string[] { "4", "5", "6" },
    });

    this.MyListView.ItemsSource = dahList;
}

The Results:

WPF grid with dynamic combo box choices http://www.singingeels.com/Articles/Articles/UserImage.aspx?ImageID=b1e3f880-c278-4d2b-bcc2-8ad390591200

Javascript – How does data binding work in AngularJS

AngularJS remembers the value and compares it to a previous value. This is basic dirty-checking. If there is a change in value, then it fires the change event.

The $apply() method, which is what you call when you are transitioning from a non-AngularJS world into an AngularJS world, calls $digest(). A digest is just plain old dirty-checking. It works on all browsers and is totally predictable.

To contrast dirty-checking (AngularJS) vs change listeners (KnockoutJS and Backbone.js): While dirty-checking may seem simple, and even inefficient (I will address that later), it turns out that it is semantically correct all the time, while change listeners have lots of weird corner cases and need things like dependency tracking to make it more semantically correct. KnockoutJS dependency tracking is a clever feature for a problem which AngularJS does not have.

Issues with change listeners:

The syntax is atrocious, since browsers do not support it natively. Yes, there are proxies, but they are not semantically correct in all cases, and of course there are no proxies on old browsers. The bottom line is that dirty-checking allows you to do POJO, whereas KnockoutJS and Backbone.js force you to inherit from their classes, and access your data through accessors.
Change coalescence. Suppose you have an array of items. Say you want to add items into an array, as you are looping to add, each time you add you are firing events on change, which is rendering the UI. This is very bad for performance. What you want is to update the UI only once, at the end. The change events are too fine-grained.
Change listeners fire immediately on a setter, which is a problem, since the change listener can further change data, which fires more change events. This is bad since on your stack you may have several change events happening at once. Suppose you have two arrays which need to be kept in sync for whatever reason. You can only add to one or the other, but each time you add you fire a change event, which now has an inconsistent view of the world. This is a very similar problem to thread locking, which JavaScript avoids since each callback executes exclusively and to completion. Change events break this since setters can have far-reaching consequences which are not intended and non obvious, which creates the thread problem all over again. It turns out that what you want to do is to delay the listener execution, and guarantee, that only one listener runs at a time, hence any code is free to change data, and it knows that no other code runs while it is doing so.

What about performance?

So it may seem that we are slow, since dirty-checking is inefficient. This is where we need to look at real numbers rather than just have theoretical arguments, but first let's define some constraints.

Humans are:

Slow — Anything faster than 50 ms is imperceptible to humans and thus can be considered as "instant".
Limited — You can't really show more than about 2000 pieces of information to a human on a single page. Anything more than that is really bad UI, and humans can't process this anyway.

So the real question is this: How many comparisons can you do on a browser in 50 ms? This is a hard question to answer as many factors come into play, but here is a test case: http://jsperf.com/angularjs-digest/6 which creates 10,000 watchers. On a modern browser this takes just under 6 ms. On Internet Explorer 8 it takes about 40 ms. As you can see, this is not an issue even on slow browsers these days. There is a caveat: The comparisons need to be simple to fit into the time limit... Unfortunately it is way too easy to add a slow comparison into AngularJS, so it is easy to build slow applications when you don't know what you are doing. But we hope to have an answer by providing an instrumentation module, which would show you which are the slow comparisons.

It turns out that video games and GPUs use the dirty-checking approach, specifically because it is consistent. As long as they get over the monitor refresh rate (typically 50-60 Hz, or every 16.6-20 ms), any performance over that is a waste, so you're better off drawing more stuff, than getting FPS higher.