Bind custom header controls in DataGrid

Question

I have a custom column header where each column's header has TextBox which contains name of the column and ComboBox, which contains information about the type of the column, e.g. "Date", "Number", etc.

I'm trying to bind ComboBox and keep its value somewhere, so that when user selects new value from ComboBox I can recreate table with the column's type changed. Basically all I need is to store somehow each ComboBox's value in a list somehow. I want to do the same with TextBox which should contain name of the column.

This is what I have so far.

<DataGrid x:Name="SampleGrid" Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2" ItemsSource="{Binding SampledData}">
            <DataGrid.Resources>
                <Style TargetType="{x:Type DataGridColumnHeader}">
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <StackPanel>
                                    <TextBox Text="{Binding ., Mode=OneWay}"/>
                                    <ComboBox>
                                        // How can I set it from ViewModel?
                                        <ComboBoxItem Content="Date"></ComboBoxItem>
                                        <ComboBoxItem Content="Number"></ComboBoxItem>
                                    </ComboBox>
                                </StackPanel>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </DataGrid.Resources>
        </DataGrid>

ViewModel:

private DataTable _sampledData = new DataTable();

public DataTable SampledData
{
    get => _sampledData;
    set { _sampledData = value; NotifyOfPropertyChange(() => SampledData); }
}

Solutions in code behind are welcome too as long as I can pass the mappings to ViewModel later.

EDIT: I've been trying to make this work with a List of ViewModels, but no luck:

public class ShellViewModel : Screen
{

    public List<MyRowViewModel> Rows { get; set; }

    public ShellViewModel()
    {
        Rows = new List<MyRowViewModel>
        {
            new MyRowViewModel { Column1 = "Test 1", Column2= 1 },
            new MyRowViewModel { Column1 = "Test 2", Column2= 2 }
        };
    }
}

View

<DataGrid ItemsSource="{Binding Rows}">
    <DataGrid.Resources>
        <Style TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel>
                            <TextBox Text="{Binding ., Mode=OneWay}"/>
                            <ComboBox ItemsSource="{Binding ??????}" />
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.Resources>
</DataGrid>

Row

public class MyRowViewModel : PropertyChangedBase
{
    public string Column1 { get; set; }
    public int Column2 { get; set; }
}

EDIT2:

To clarify, I need a solution that will handle dynamic number of columns, so some files may store 3 columns and some might store 40 columns. I use this for parsing csv files to later display the data. In order to do that I have to know what types of values the file contains. Because some types may be ambiguous, I let the user decide which types they want. This is identical to Excel's "Load From File" wizard.

The wizard loads a small chunk of data (100 records) and allows user to decide what type the columns are. It automatically parses the columns to:

1. Let user see how the data will look like
2. Validate if the column can actually be parsed (e.g. 68.35 cannot be parsed as DateTime)

Another thing is naming each column. Someone might load csv with each column named C1, C2... but they want to assign meaningful names such as Temperature, Average. This of course has to be parsed later too, because two columns cannot have the same name, but I can take care of this once I have a bindable DataGrid.

Answer 1

Let's break your problem into parts and solve each part separately.

First, the DataGrid itemsource, to make things easier, let's say that our DataGrid has only two columns, column 1 and column 2. A basic model for the DataGrid Items should looks like this:

public class DataGridModel
{
    public string FirstProperty { get; set; }   
    public string SecondProperty { get; set; }   
}

Now, assuming that you have a MainWindow (with a ViewModel or the DataContext set to code behind) with a DataGrid in it , let's define DataGridCollection as its ItemSource:

private ObservableCollection<DataGridModel> _dataGridCollection=new ObservableCollection<DataGridModel>()
    {
        new DataGridModel(){FirstProperty = "first item",SecondProperty = "second item"},
        new DataGridModel(){FirstProperty = "first item",SecondProperty = "second item"},
        new DataGridModel(){FirstProperty = "first item",SecondProperty = "second item"}
    };
    public ObservableCollection<DataGridModel> DataGridCollection
    {
        get { return _dataGridCollection; }
        set
        {
            if (Equals(value, _dataGridCollection)) return;
            _dataGridCollection = value;
            OnPropertyChanged();
        }
    }

Second, now the interesting part, the columns structure. Let's define a model for your DataGrid's columns, the model will hold all the required properties to set your DataGrid columns, including:

-DataTypesCollection: a collection that holds the combobox itemsource. -HeaderPropertyCollection: a collection of Tuples, each Tuple represent a column name and a data type, the data type is basically the selected item of column's combobox.

 public class DataGridColumnsModel:INotifyPropertyChanged
    {
        private ObservableCollection<string> _dataTypesCollection = new ObservableCollection<string>()
        {
            "Date","String","Number"
        };
        public ObservableCollection<string> DataTypesCollection         
        {
            get { return _dataTypesCollection; }
            set
            {
                if (Equals(value, _dataTypesCollection)) return;
                _dataTypesCollection = value;
                OnPropertyChanged();
            }
        }

        private ObservableCollection<Tuple<string, string>> _headerPropertiesCollection=new ObservableCollection<Tuple<string, string>>()
        {
            new Tuple<string, string>("Column 1", "Date"),
            new Tuple<string, string>("Column 2", "String")

        };   //The Dictionary has a PropertyName (Item1), and a PropertyDataType (Item2)
        public ObservableCollection<Tuple<string,string>> HeaderPropertyCollection
        {
            get { return _headerPropertiesCollection; }
            set
            {
                if (Equals(value, _headerPropertiesCollection)) return;
                _headerPropertiesCollection = value;
                OnPropertyChanged();
            }
        }


        public event PropertyChangedEventHandler PropertyChanged;

        [NotifyPropertyChangedInvocator]
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

Now in you MainWindow's viewmodel (or codebehind) define an instance of the DataGridColumnsModel that we will be using to hold our DataGrid structure:

        private DataGridColumnsModel _dataGridColumnsModel=new DataGridColumnsModel();
    public DataGridColumnsModel DataGridColumnsModel
    {
        get { return _dataGridColumnsModel; }
        set
        {
            if (Equals(value, _dataGridColumnsModel)) return;
            _dataGridColumnsModel = value;
            OnPropertyChanged();
        }
    }

Third, getting the column's TextBox's value. For that w'll be using a MultiBinding and a MultiValueConverter, the first property that w'll be passing to the MultiBinding is the collection of tuples that we define (columns' names and datatypes): HeaderPropertyCollection, the second one is the current column index that w'll retrieve from DisplayIndex using an ancestor binding to the DataGridColumnHeader:

<TextBox >
    <TextBox.Text>
       <MultiBinding Converter="{StaticResource GetPropertConverter}">
            <Binding RelativeSource="{RelativeSource AncestorType={x:Type Window}}" Path="DataGridColumnsModel.HeaderPropertyCollection"/>
            <Binding  Path="DisplayIndex" Mode="OneWay" RelativeSource="{RelativeSource RelativeSource={x:Type DataGridColumnHeader}}"/>
      </MultiBinding> 
  </TextBox.Text>

The converter will simply retrieve the right item using the index from collection of tuples:

public class GetPropertConverter:IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        try
        {
            var theCollection = values[0] as ObservableCollection<Tuple<string, string>>;
            return (theCollection?[(int)values[1]])?.Item1; //Item1 is the column name, Item2 is the column's ocmbobox's selectedItem
        }
        catch (Exception)
        {
            //use a better implementation!
            return null;
        }
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Fourth, The last part is to update the DataGrid's ItemSource when the Combobox's selection changed, for that you could use the Interaction tools defined in System.Windows.Interactivity namespace (which is part of Expression.Blend.Sdk, use NuGet to install it: Install-Package Expression.Blend.Sdk):

<ComboBox ItemsSource="{Binding DataGridColumnsModel.DataTypesCollection,RelativeSource={RelativeSource AncestorType={x:Type Window}}}">
   <i:Interaction.Triggers>
      <i:EventTrigger EventName="SelectionChanged">
          <i:InvokeCommandAction Command="{Binding UpdateItemSourceCommand,RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />
      </i:EventTrigger>
  </i:Interaction.Triggers>
</ComboBox>

Each time the selectionChanged event occurred, update your DataGrid's ItemSource in the UpdateItemSourceCommand that should be added to your mainWindow's ViewModel:

 private RelayCommand _updateItemSourceCommand;
    public RelayCommand UpdateItemSourceCommand
    {
        get
        {
            return _updateItemSourceCommand
                   ?? (_updateItemSourceCommand = new RelayCommand(
                       () =>
                       {
                           //Update your DataGridCollection, you could also pass a parameter and use it.
                           //Update your DataGridCollection based on DataGridColumnsModel.HeaderPropertyCollection
                       }));
        }
    }

Ps: the RelayCommand class i am using is part of GalaSoft.MvvmLight.Command namespace, you could add it via NuGet, or define your own command.

Finally here the full xaml code:

Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp1"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525" DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Window.Resources>
    <local:GetPropertConverter x:Key="GetPropertConverter"/>
</Window.Resources>
<Grid>
    <DataGrid x:Name="SampleGrid" ItemsSource="{Binding DataGridCollection}" AutoGenerateColumns="False">
        <DataGrid.Resources>
            <Style TargetType="{x:Type DataGridColumnHeader}">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <StackPanel>
                                <TextBox >
                                    <TextBox.Text>
                                        <MultiBinding Converter="{StaticResource GetPropertConverter}">
                                            <Binding RelativeSource="{RelativeSource AncestorType={x:Type Window}}" Path="DataGridColumnsModel.HeaderPropertyCollection"/>
                                            <Binding  Path="DisplayIndex" Mode="OneWay" RelativeSource="{RelativeSource AncestorType={x:Type DataGridColumnHeader}}"/>
                                        </MultiBinding> 
                                    </TextBox.Text>
                                </TextBox>
                                <ComboBox ItemsSource="{Binding DataGridColumnsModel.DataTypesCollection,RelativeSource={RelativeSource AncestorType={x:Type Window}}}">
                                    <i:Interaction.Triggers>
                                        <i:EventTrigger EventName="SelectionChanged">
                                           <i:InvokeCommandAction Command="{Binding UpdateItemSourceCommand,RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />
                                        </i:EventTrigger>
                                    </i:Interaction.Triggers>
                                </ComboBox>
                            </StackPanel>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </DataGrid.Resources>
        <DataGrid.Columns>
            <DataGridTextColumn Header="First Column" Binding="{Binding FirstProperty}" />
            <DataGridTextColumn Header="Second Column" Binding="{Binding SecondProperty}"/>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

And view models / codebehind:

public class GetPropertConverter:IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        try
        {
            var theCollection = values[0] as ObservableCollection<Tuple<string, string>>;
            return (theCollection?[(int)values[1]])?.Item1; //Item1 is the column name, Item2 is the column's ocmbobox's selectedItem
        }
        catch (Exception)
        {
            //use a better implementation!
            return null;
        }
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}
public class DataGridColumnsModel:INotifyPropertyChanged
{
    private ObservableCollection<string> _dataTypesCollection = new ObservableCollection<string>()
    {
        "Date","String","Number"
    };
    public ObservableCollection<string> DataTypesCollection         
    {
        get { return _dataTypesCollection; }
        set
        {
            if (Equals(value, _dataTypesCollection)) return;
            _dataTypesCollection = value;
            OnPropertyChanged();
        }
    }

    private ObservableCollection<Tuple<string, string>> _headerPropertiesCollection=new ObservableCollection<Tuple<string, string>>()
    {
        new Tuple<string, string>("Column 1", "Date"),
        new Tuple<string, string>("Column 2", "String")

    };   //The Dictionary has a PropertyName (Item1), and a PropertyDataType (Item2)
    public ObservableCollection<Tuple<string,string>> HeaderPropertyCollection
    {
        get { return _headerPropertiesCollection; }
        set
        {
            if (Equals(value, _headerPropertiesCollection)) return;
            _headerPropertiesCollection = value;
            OnPropertyChanged();
        }
    }


    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class DataGridModel
{
    public string FirstProperty { get; set; }   
    public string SecondProperty { get; set; }   
}
public partial class MainWindow : Window,INotifyPropertyChanged
{
    private RelayCommand _updateItemSourceCommand;
    public RelayCommand UpdateItemSourceCommand
    {
        get
        {
            return _updateItemSourceCommand
                   ?? (_updateItemSourceCommand = new RelayCommand(
                       () =>
                       {
                           //Update your DataGridCollection, you could also pass a parameter and use it.
                           MessageBox.Show("Update has ocured");
                       }));
        }
    }

    private ObservableCollection<DataGridModel> _dataGridCollection=new ObservableCollection<DataGridModel>()
    {
        new DataGridModel(){FirstProperty = "first item",SecondProperty = "second item"},
        new DataGridModel(){FirstProperty = "first item",SecondProperty = "second item"},
        new DataGridModel(){FirstProperty = "first item",SecondProperty = "second item"}
    };
    public ObservableCollection<DataGridModel> DataGridCollection
    {
        get { return _dataGridCollection; }
        set
        {
            if (Equals(value, _dataGridCollection)) return;
            _dataGridCollection = value;
            OnPropertyChanged();
        }
    }

    private DataGridColumnsModel _dataGridColumnsModel=new DataGridColumnsModel();
    public DataGridColumnsModel DataGridColumnsModel
    {
        get { return _dataGridColumnsModel; }
        set
        {
            if (Equals(value, _dataGridColumnsModel)) return;
            _dataGridColumnsModel = value;
            OnPropertyChanged();
        }
    }

    public MainWindow()
    {
        InitializeComponent();
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Result:

Update

You will achieve the same result by setting AutoGenerateColumns="True" and creating you columns dynamically.