How to bind class with Dictionary<string,object> property to datagrid

Question

I have a scenario where i have to dynamically fetch the data and store it in a dictionary for display.

This is how my Model looks like:

public class ViewModel
{
   public Guid Id { get; set; }
   public string Name { get; set; }
   public Dictionary<string,object> CustomFields { get; set; }
}

I am binding my view model to DataGrid and i have two columns defined for Id and Name.

How do i generate columns for the data in the dictionary?

I cannot use Dynamic object as i am using .net 3.5.

This is how my XAML looks like:

<Window x:Class="MyClass"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:tk="http://schemas.microsoft.com/wpf/2008/toolkit" 
        xmlns:viewmodel="clr-namespace:MyViewModel"
        xmlns:model="clr-namespace:MyModel"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="List Of Projects" Height="600" Width="600">

<Window.DataContext>
    <viewmodel:SomeViewModel></viewmodel:SomeViewModel>
</Window.DataContext>

<tk:DataGrid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" x:Name="dgData" ItemsSource="{Binding ListOfObjects}"  VerticalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  AutoGenerateColumns="False"  SelectionMode="Single" CanUserAddRows="False" CanUserDeleteRows="False" >

<tk:DataGrid.Columns>
   <tk:DataGridTextColumn Header="Id"  Binding="{Binding Id}" IsReadOnly="True"></tk:DataGridTextColumn>

   <tk:DataGridTextColumn Header="Name"  Binding="{Binding Name}" IsReadOnly="True"></tk:DataGridTextColumn>
</tk:DataGrid.Columns>

</tk:DataGrid>

</Window>

Answer 1

Use a Converter :

CS :

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this;
    }


    public Dictionary<int, string> MyDictionary 
    {
        get
        {
            var dic = new Dictionary<int, string>();
            dic.Add(1,"11111");
            dic.Add(2,"22222");
            dic.Add(3,"33333");
            dic.Add(4,"44444");

            return dic;                
        }
    }
}

public class DictionaryConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        DataGridRow row = (DataGridRow)values[0];
        IDictionary<int,string> dic = (IDictionary<int,string>)values[1];

        bool isId = bool.Parse(parameter.ToString());

        var index = row.GetIndex();

        KeyValuePair<int,string> kv = dic.ElementAt(index);

        return isId ? kv.Key.ToString() : kv.Value;
    }

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

XAML :

   <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding MyDictionary}" CanUserAddRows="False">
        <DataGrid.Resources>
            <loc:DictionaryConverter x:Key="dicConverter" />
        </DataGrid.Resources>

        <DataGrid.Columns>
            <DataGridTextColumn Header="ID">
                <DataGridTextColumn.Binding>
                    <MultiBinding Converter="{StaticResource dicConverter}" ConverterParameter="True">
                        <Binding Path="." RelativeSource="{RelativeSource AncestorType=DataGridRow}" />
                        <Binding Path="ItemsSource" RelativeSource="{RelativeSource AncestorType=DataGrid}" />
                    </MultiBinding>
                </DataGridTextColumn.Binding>                    
            </DataGridTextColumn>

            <DataGridTextColumn Header="Name">
                <DataGridTextColumn.Binding>
                    <MultiBinding Converter="{StaticResource dicConverter}" ConverterParameter="False">
                        <Binding Path="." RelativeSource="{RelativeSource AncestorType=DataGridRow}" />
                        <Binding Path="ItemsSource" RelativeSource="{RelativeSource AncestorType=DataGrid}" />
                    </MultiBinding>
                </DataGridTextColumn.Binding>
            </DataGridTextColumn>
        </DataGrid.Columns>
    </DataGrid>