WPF DataGrid binding with ObservableCollection

datagridmvvmobservablecollectionwpfxaml

I'm trying to bind a ObservableCollection with rows of data to my datagrid.
I'm aiming on making the datagrid update itself (if data is added), it didn't worked when using a DataTable.
I tested this approach and it works just fine, my datagrid ist bound to ResultTable property and the property names are the column names.

public class MainWindowViewModel
{
    public MainWindowViewModel()
    {
        ResultTable = new ObservableCollection<Row>();
        ResultTable.Add(new Row() { Name = "Peter", Age = "21", Sex = "Male" });
        ResultTable.Add(new Row() { Name = "Sara", Age = "25", Sex = "Female" });
        ResultTable.Add(new Row() { Name = "Mike", Age = "28", Sex = "Male" });
    }

    public ObservableCollection<Row> ResultTable { get; set; }
}

public class Row
{
    public string Name { get; set; }
    public string Age { get; set; }
    public string Sex { get; set; }
}

Now my question is, how can I do this dynamically?
This was my second approach and looks like nothing in the DataGrid…

public class MainWindowViewModel
{
    public MainWindowViewModel()
    {
        ResultTable = new ObservableCollection<Row>();
        var row = new Row();
        row.Columns.Add(new Item() { Name = "Name", Value = "Peter" });
        row.Columns.Add(new Item() { Name = "Age", Value = "21" });
        row.Columns.Add(new Item() { Name = "Sex", Value = "Male" });
        ResultTable.Add(row);
    }

    public ObservableCollection<Row> ResultTable { get; set; }
}

public class Row
{
    public List<Item> Columns = new List<Item>();
}

public class Item
{
    public string Name { get; set; }
    public string Value { get; set; }
}

But now the question is, how can I say the DataGrid that each Name property in columns List is the column header.
And each Value is the value of the row?

This is my xaml (nothing fancy):

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowViewModel x:Name="MainWindowViewModel" />
    </Window.DataContext>
    <Grid>
        <DataGrid ItemsSource="{Binding ResultTable}"
                  AutoGenerateColumns="True" />
    </Grid>
</Window>

Best Answer

Ok so have tested this and works as per your diagram in the comments below.

Row class

public class Row
{
    private ObservableCollection<Item> columns = new ObservableCollection<Item>();

    public Row(params Item[] items)
    {
        foreach (var item in items)
            Columns.Add(item);
    }

    public ObservableCollection<Item> Columns
    {
        get { return columns; }
        set { columns = value; }
    }
}

Item.cs

public class Item 
{
    public Item(string name, string value)
    {
        this.Name = name;
        this.Value = value;
    }
    public string Name { get; set; }
    public string Value { get; set; }     
}

Custom DataGRidBoundColumn

public class CustomBoundColumn : DataGridBoundColumn
{
    public string TemplateName { get; set; }

    protected override FrameworkElement GenerateElement(DataGridCell cell, object dataItem)
    {
        var binding = new Binding(((Binding)Binding).Path.Path);
        binding.Source = dataItem;

        var content = new ContentControl();
        content.ContentTemplate = (DataTemplate)cell.FindResource(TemplateName);
        content.SetBinding(ContentControl.ContentProperty, binding);
        return content;
    }

    protected override FrameworkElement GenerateEditingElement(DataGridCell cell, object dataItem)
    {
        return GenerateElement(cell, dataItem);
    }
}

MainWindow.xaml.cs

public partial class MainWindow : Window
{
    public ObservableCollection<Row> ResultTable
    {
        get;
        set;
    }
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this;
        Loaded += (s, args) =>
            {
                this.ResultTable = new ObservableCollection<Row>();
                ResultTable.Add(new Row(new Item("Name", "Peter"), new Item("Age", "21"), new Item("Sex", "Male")));
                ResultTable.Add(new Row(new Item("Name", "Sara"), new Item("Age", "25"), new Item("Sex", "Female")));
                ResultTable.Add(new Row(new Item("Name", "Mike"), new Item("Age", "28"), new Item("Sex", "Male")));

                var columns = ResultTable.First()
                           .Columns
                           .Select((x, i) => new { Name = x.Name, Value = x.Value, Index = i })
                           .ToArray();

                foreach (var column in columns)
                {
                    var binding = new Binding(string.Format("Columns[{0}].Value", column.Index));
                    data.Columns.Add(new CustomBoundColumn()
                        {
                            Header = column.Name,
                            Binding = binding,
                            TemplateName = "CustomTemplate"
                        });                        
                }
                data.ItemsSource = this.ResultTable;

            };
    }
}

and finally the xaml nice and simple

 <Window.Resources>
    <DataTemplate x:Key="CustomTemplate">
        <Border Padding="3">
            <TextBlock Text="{Binding}" Foreground="Black" />
        </Border>
    </DataTemplate>
</Window.Resources>

    <Grid>
        <DataGrid Name="data"
                  AutoGenerateColumns="False">            
        </DataGrid>
    </Grid>

This is done in code behind but I imagine you can adjust for your viewmodel. More about the fix can be found Here

Related Solutions

C# – Can’t create xmlns reference to other project in XAML

Check if

the fully qualified name for MyClass is MyApp.Domain.MyClass
MyClass has a default public constructor (with no parameters) so that XAML can instantiate it.

C# – Binding a WPF ComboBox to a custom list

You set the DisplayMemberPath and the SelectedValuePath to "Name", so I assume that you have a class PhoneBookEntry with a public property Name.

Have you set the DataContext to your ConnectionViewModel object?

I copied you code and made some minor modifications, and it seems to work fine. I can set the viewmodels PhoneBookEnty property and the selected item in the combobox changes, and I can change the selected item in the combobox and the view models PhoneBookEntry property is set correctly.

Here is my XAML content:

<Window x:Class="WpfApplication6.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
<Grid>
    <StackPanel>
        <Button Click="Button_Click">asdf</Button>
        <ComboBox ItemsSource="{Binding Path=PhonebookEntries}"
                  DisplayMemberPath="Name"
                  SelectedValuePath="Name"
                  SelectedValue="{Binding Path=PhonebookEntry}" />
    </StackPanel>
</Grid>
</Window>

And here is my code-behind:

namespace WpfApplication6
{

    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            ConnectionViewModel vm = new ConnectionViewModel();
            DataContext = vm;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            ((ConnectionViewModel)DataContext).PhonebookEntry = "test";
        }
    }

    public class PhoneBookEntry
    {
        public string Name { get; set; }

        public PhoneBookEntry(string name)
        {
            Name = name;
        }

        public override string ToString()
        {
            return Name;
        }
    }

    public class ConnectionViewModel : INotifyPropertyChanged
    {
        public ConnectionViewModel()
        {
            IList<PhoneBookEntry> list = new List<PhoneBookEntry>();
            list.Add(new PhoneBookEntry("test"));
            list.Add(new PhoneBookEntry("test2"));
            _phonebookEntries = new CollectionView(list);
        }

        private readonly CollectionView _phonebookEntries;
        private string _phonebookEntry;

        public CollectionView PhonebookEntries
        {
            get { return _phonebookEntries; }
        }

        public string PhonebookEntry
        {
            get { return _phonebookEntry; }
            set
            {
                if (_phonebookEntry == value) return;
                _phonebookEntry = value;
                OnPropertyChanged("PhonebookEntry");
            }
        }

        private void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }
}

Edit: Geoffs second example does not seem to work, which seems a bit odd to me. If I change the PhonebookEntries property on the ConnectionViewModel to be of type ReadOnlyCollection, the TwoWay binding of the SelectedValue property on the combobox works fine.

Maybe there is an issue with the CollectionView? I noticed a warning in the output console:

System.Windows.Data Warning: 50 : Using CollectionView directly is not fully supported. The basic features work, although with some inefficiencies, but advanced features may encounter known bugs. Consider using a derived class to avoid these problems.

Edit2 (.NET 4.5): The content of the DropDownList can be based on ToString() and not of DisplayMemberPath, while DisplayMemberPath specifies the member for the selected and displayed item only.

Best Answer

Related Solutions

C# – Can’t create xmlns reference to other project in XAML

C# – Binding a WPF ComboBox to a custom list

Related Topic