在 WPF C# 中将 GridView 与字典绑定

Question

I am trying to bind a dictionary into GridView in WPF(C#) programmatically. The structure of the dictionary is -
Dictionary(string, Dictionary(string, int))
I am able to bind the key of the main dictionary to the GridView

Dictionary<string, Dictionary<string, int>> result
GridView myGrid = new GridView();  
GridViewColumn gc = new GridViewColumn();  
gc.Header = "File Name";  
gc.DisplayMemberBinding = new Binding("Key");  
myGrid.Columns.Add(gc);  

The source of the gridview is set to result

I want to create a column with the header set to Key of the inner Dictionary and bind it to the Value of the inner Dictionary

somethig like gc.DisplayMemberBinding = new Binding("Value.Value"); the dictionary is like this

{
'A', {(A1,1),(A2,2),(A3,3)}
'B', {(A1,4),(A2,5),(A3,6)}
'C', {(A1,7),(A2,8),(A3,9)}
}

So the gridview would be like

--------------------------------------
filename | A1 | A2 | A3
--------------------------------------
A | 1 | 2 | 3
B | 4 | 5 | 6
C | 7 | 8 | 9

Answer 1

Okay, displaying nested dictionaries in a GridView... This might take some time and a fairly huge amount of text, so you might brew yourself some fresh hot coffee. Ready? Okay, let's get started.

A GridView is basically just a view mode for a ListView control. A ListView control visualizes a collection (or list) of objects/values (whatever those objects might be). How this will relate to the dictionaries to be displayed will be explained in just a minute.

As already mentioned, the data to be displayed is stored in a nested dictionary. The concrete dictionary date type is specified as follow:

Dictionary< string, Dictionary<string, int > >

The key of the (outer) dictionary represents a file name and should be shown in the "FileName" column of the GridView. The (inner) dictionary associated with each file name will contain the values for the second and further columns.

The dictionary as specified above is an actual implementation of the interface

ICollection< KeyValuePair< string, Dictionary<string, int > > >

This is actually exactly what is needed for the ListView control - a collection of elements. Each element in this collection is of this type:

KeyValuePair< string, Dictionary<string, int > >

The Key in the KeyValuePair is the file name. The KeyValuePair's Value is the (inner) dictionary with the key/value pairs for the second and further columns. That means, each of these KeyValuePair elements contain the data for exactly one complete row.

Now, the harder part begins. For each column, the appropriate data from the KeyValuePair needs to be accessed. Unfortunately, it does not work with a simple binding for each column.

However, the KeyValuePair itself can be bound to each column, and with the help of a tailor-made IValueConverter the desired information can be extracted from the KeyValuePair.

And here we will have to make a decision. We can either go the comparatively easy way of having a static number of non-modifiable columns. Or, we invest a little bit more coding effort if the intention is to make it easy for dynamic setting, adding or removing of columns. In the following, an overview about both approaches will be given.

1. The easy, but static and inflexible way.

To access the Key of the KeyValuePair (the file name), a value converter is not necessary. A simple binding to the Key property is sufficient.

To access the values stored within the (inner) dictionary of the KeyValuePair, a custom IValueConverter will be used. The value converter will need to know the key of the value to be extracted. This is being implemented as a public property DictionaryKey , which allows specifying the key in XAML.

    [ValueConversion(typeof(KeyValuePair<string, Dictionary<string, int>>), typeof(string))]
    public class GetInnerDictionaryValueConverter : IValueConverter
    {
        public string DictionaryKey { get; set; }

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (!(value is KeyValuePair<string, Dictionary<string, int>>))
                throw new NotSupportedException();

            Dictionary<string, int> innerDict = ((KeyValuePair<string, Dictionary<string, int>>) value).Value;
            int dictValue;
            return (innerDict.TryGetValue(DictionaryKey, out dictValue)) ? (object) dictValue : string.Empty;
        }

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

The XAML for the ListView control might then look similar to the following.

Let's say, the columns to display are "FileName", "A1", "A2", "A3" (the latter three being keys in the inner dictionary). Also note the three custom GetInnerDictionaryValueConverter instances, which are created as static resources and are being used by the respective bindings.

<ListView x:Name="MyListGridView">
    <ListView.Resources>
        <My:GetInnerDictionaryValueConverter x:Key="ConverterColum_A1" DictionaryKey="A1" />
        <My:GetInnerDictionaryValueConverter x:Key="ConverterColum_A2" DictionaryKey="A2" />
        <My:GetInnerDictionaryValueConverter x:Key="ConverterColum_A3" DictionaryKey="A3" />
    </ListView.Resources>
    <ListView.View>
        <GridView AllowsColumnReorder="true">
            <GridViewColumn Header="FileName" DisplayMemberBinding="{Binding Key}" />
            <GridViewColumn Header="A1" DisplayMemberBinding="{Binding Converter={StaticResource ConverterColum_A1}}" />
            <GridViewColumn Header="A2" DisplayMemberBinding="{Binding Converter={StaticResource ConverterColum_A2}}" />
            <GridViewColumn Header="A3" DisplayMemberBinding="{Binding Converter={StaticResource ConverterColum_A3}}" />
        </GridView>
    </ListView.View>
</ListView>

All that is left to do is to assign the actual dictionary with the data to the ItemsSource property of the ListView control. This can be done through data binding in XAML or in code-behind.

As already mentioned, this approach is fairly straightforward and easy to implement. The disadvantage is that the number of columns is fixed, since the value converters necessary for the column data bindings are declared as static resources. If dynamically setting, adding or removing of columns with arbitrary DictionaryKeys is desired, we need to do away with those static converters. Which leads us to the second approach...

2. A little bit more complicated, but allowing dynamic easy setting/adding/removing columns

To allow dynamic setting, adding, removing of columns with arbitrary DictionaryKeys, the custom GetInnerDictionaryValueConverter introduced before might be used, but the code-behind might become somewhat convoluted. A better approach is to define custom GridViewColumn types, which can also implement any required IValueConverter logic and take care of setting up the bindings. Separate custom value converter type(s) as before are not necessary anymore, which will simplify the handling of those columns.

Concerning our example, only two custom columns are needed. The first custom column is for the file names, and it looks pretty simple:

public class GridViewColumnFileName : GridViewColumn
{
    public GridViewColumnFileName()
    {
        DisplayMemberBinding = new Binding("Key")
        {
            Mode = BindingMode.OneWay
        };
    }
}

All it does is setting the binding in code-behind. You might point out that we also could keep the simple GridViewColumn with the "{Binding Key}" binding as in the example before -- and you would be absolutely right. I only show this implementation here to illustrate possible approaches.

The custom column type for columns representing values from the inner dictionaries is a bit more complex. As the custom value converter before, this custom column needs to know the key of the value being displayed. By implementing the IValueConverter interface as part of this custom column type, this column type can use itself as value converter for the binding.

[ValueConversion(typeof(KeyValuePair<string, Dictionary<string, int>>), typeof(string))]
public class GridViewColumnInnerDictionaryValue : GridViewColumn, IValueConverter
{
    public string InnerDictionaryKey
    {
        get { return _key; }
        set
        {
            if (_key == value) return;

            _key = value;

            if (string.IsNullOrWhiteSpace(value))
            {
                DisplayMemberBinding = null;
            }
            else if (DisplayMemberBinding == null)
            {
                DisplayMemberBinding = new Binding()
                {
                    Mode = BindingMode.OneWay,
                    Converter = this
                };
            }
        }
    }

    private string _key = null;

    #region IValueConverter

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value is KeyValuePair<string, Dictionary<string, int>>)
        {
            Dictionary<string, int> innerDict = ((KeyValuePair<string, Dictionary<string, int>>) value).Value;
            int dictValue;
            return (innerDict.TryGetValue(InnerDictionaryKey, out dictValue)) ? (object) dictValue : string.Empty;
        }

        throw new NotSupportedException();
    }

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

    #endregion IValueConverter
}

The implementation of the IValueConverter interface is exactly as done before. Of course, the GetInnerDictionaryValueConverter type from before could be used instead of implementing its logic as part of GridViewColumnInnerDictionaryValue , but again, i wanted to demonstrate different possibilities.

Creating the ListView control in XAML using the custom column types would look like this:

<ListView x:Name="MyListGridView">
    <ListView.View>
        <GridView AllowsColumnReorder="true">
            <My:GridViewColumnFileName Header="FileName" />
            <My:GridViewColumnInnerDictionaryValue Header="A1" InnerDictionaryKey="A1" />
            <My:GridViewColumnInnerDictionaryValue Header="A2" InnerDictionaryKey="A2" />
            <My:GridViewColumnInnerDictionaryValue Header="A3" InnerDictionaryKey="A3" />
        </GridView>
    </ListView.View>
</ListView>

Instead of declaring the columns in XAML, adding and removing of columns to/from the GridView.Columns property could also be done easily in code-behind. Again, don't forget to set the ListView's ItemsSource property to the dictionary, either through data binding in XAML or in code-behind.

Answer 2

If your columns are not fixed, and you don't want to hard code them in the XAML, the other option is to pack the data into a DataTable, and display the DataGrid with automatic columns.

    private static DataTable DictionaryToDataTable(
        Dictionary<string, Dictionary<string, int>> values, 
        string fixedColumn)
    {

        DataTable result = new DataTable();
        result.Columns.Add(fixedColumn);

        IEnumerable<string> headers = values.SelectMany(row => row.Value)
            .Select(cell => cell.Key).Distinct();
        headers.ForEach(b => result.Columns.Add(b));

        foreach (KeyValuePair<string, Dictionary<string, int>> row in values)
        {
            DataRow dataRow = result.NewRow();
            dataRow[fixedColumn] = row.Key;
            foreach (KeyValuePair<string, int> cell in row.Value)
            {
                dataRow[cell.Key] = cell.Value;
            }

            result.Rows.Add(row);
        }

        return result;
    }

Then the Xaml is quite simple:

<DataGrid ItemsSource="{Binding MyDataTableProperty}" AutoGenerateColumns="True" />