How do I bind a WPF DataGrid to a variable number of columns? How do I bind a WPF DataGrid to a variable number of columns? wpf wpf

How do I bind a WPF DataGrid to a variable number of columns?


Here's a workaround for Binding Columns in the DataGrid. Since the Columns property is ReadOnly, like everyone noticed, I made an Attached Property called BindableColumns which updates the Columns in the DataGrid everytime the collection changes through the CollectionChanged event.

If we have this Collection of DataGridColumn's

public ObservableCollection<DataGridColumn> ColumnCollection{    get;    private set;}

Then we can bind BindableColumns to the ColumnCollection like this

<DataGrid Name="dataGrid"          local:DataGridColumnsBehavior.BindableColumns="{Binding ColumnCollection}"          AutoGenerateColumns="False"          ...>

The Attached Property BindableColumns

public class DataGridColumnsBehavior{    public static readonly DependencyProperty BindableColumnsProperty =        DependencyProperty.RegisterAttached("BindableColumns",                                            typeof(ObservableCollection<DataGridColumn>),                                            typeof(DataGridColumnsBehavior),                                            new UIPropertyMetadata(null, BindableColumnsPropertyChanged));    private static void BindableColumnsPropertyChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)    {        DataGrid dataGrid = source as DataGrid;        ObservableCollection<DataGridColumn> columns = e.NewValue as ObservableCollection<DataGridColumn>;        dataGrid.Columns.Clear();        if (columns == null)        {            return;        }        foreach (DataGridColumn column in columns)        {            dataGrid.Columns.Add(column);        }        columns.CollectionChanged += (sender, e2) =>        {            NotifyCollectionChangedEventArgs ne = e2 as NotifyCollectionChangedEventArgs;            if (ne.Action == NotifyCollectionChangedAction.Reset)            {                dataGrid.Columns.Clear();                foreach (DataGridColumn column in ne.NewItems)                {                    dataGrid.Columns.Add(column);                }            }            else if (ne.Action == NotifyCollectionChangedAction.Add)            {                foreach (DataGridColumn column in ne.NewItems)                {                    dataGrid.Columns.Add(column);                }            }            else if (ne.Action == NotifyCollectionChangedAction.Move)            {                dataGrid.Columns.Move(ne.OldStartingIndex, ne.NewStartingIndex);            }            else if (ne.Action == NotifyCollectionChangedAction.Remove)            {                foreach (DataGridColumn column in ne.OldItems)                {                    dataGrid.Columns.Remove(column);                }            }            else if (ne.Action == NotifyCollectionChangedAction.Replace)            {                dataGrid.Columns[ne.NewStartingIndex] = ne.NewItems[0] as DataGridColumn;            }        };    }    public static void SetBindableColumns(DependencyObject element, ObservableCollection<DataGridColumn> value)    {        element.SetValue(BindableColumnsProperty, value);    }    public static ObservableCollection<DataGridColumn> GetBindableColumns(DependencyObject element)    {        return (ObservableCollection<DataGridColumn>)element.GetValue(BindableColumnsProperty);    }}


I've continued my research and have not found any reasonable way to do this. The Columns property on the DataGrid isn't something I can bind against, in fact it's read only.

Bryan suggested something might be done with AutoGenerateColumns so I had a look. It uses simple .Net reflection to look at the properties of the objects in ItemsSource and generates a column for each one. Perhaps I could generate a type on the fly with a property for each column but this is getting way off track.

Since this problem is so easily sovled in code I will stick with a simple extension method I call whenever the data context is updated with new columns:

public static void GenerateColumns(this DataGrid dataGrid, IEnumerable<ColumnSchema> columns){    dataGrid.Columns.Clear();    int index = 0;    foreach (var column in columns)    {        dataGrid.Columns.Add(new DataGridTextColumn        {            Header = column.Name,            Binding = new Binding(string.Format("[{0}]", index++))        });    }}// E.g. myGrid.GenerateColumns(schema);


I have found a blog article by Deborah Kurata with a nice trick how to show variable number of columns in a DataGrid:

Populating a DataGrid with Dynamic Columns in a Silverlight Application using MVVM

Basically, she creates a DataGridTemplateColumn and puts ItemsControl inside that displays multiple columns.