How to create a C# WPF DataGrid which can display different types of objects?

Question

I've just started learning C# and I'm trying to create a WPF Application using MVVM principles, and I'm a little confused about how data binding and datagrids work. Basically right now I have an simple application that does the following:

• I have an GraphType1 Object and GraphType2 Object that implements an IGraphType Interface.
• GraphType1 and GraphType2 Objects contain an ObservableCollection of GraphType1Series and GraphType2Series Objects respectively, which implement an IGraphTypeSeries interface
• I have a ListBox that lets you add and delete IGraphType Objects. When you select an IGraphType Object, it becomes the CurrentGraphObject
• I have a DataGrid that displays the collection of IGraphTypeSeries of the CurrentGraphObject

My questions is, how can I set up the DataGrid so that the DataGrid columns will reflect the Properties of the currently selected IGraphType's IGraphTypeSeries, regardless of whether it is GraphType1Series or GraphType2Series, as these two will have different Properties? I did not use AutoGenerateColumns=true because I want one of the columns to be a ComboBox column for one of the properties.

Below is my current DataGrid code. It has the two columns bound to IGraphTypeSeries Object's MachineName and MetricName properties. But not all IGraphTypeSeries will have these properties. I'm not sure how to create the datagrid so that the columns and column binding change based on the type of the CurrentGraphObject the user has selected in the ListBox.

<DataGrid Margin="0,0,0,0" AutoGenerateColumns="False" CanUserDeleteRows="True" CanUserAddRows="True" ItemsSource="{Binding Path=CurrentGraphObject.SeriesList}">
            <DataGrid.Columns>
                <DataGridTextColumn  Header="Machine Name" IsReadOnly="False" Binding="{Binding MachineName}">
                </DataGridTextColumn>
                <DataGridComboBoxColumn
                    Header="Metric Name"
                    ItemsSource="{DynamicResource MetricObjects}"
                    SelectedValueBinding="{Binding MetricName}"
                    SelectedValuePath="Path"
                    DisplayMemberPath="Alias"
                    >
                </DataGridComboBoxColumn>
            </DataGrid.Columns>
        </DataGrid>

I'm not sure if I need to create separate views or datagrids for each Graph Type, or whether I can edit this DataGrid. I tried to use a DataTrigger, but I couldn't figure out how the sytax to let a DataTrigger edit the properties of a DataGrid column.

Answer 1

I would like to suggest two possible solutions.

Solution A: Create display specific view model

Instead of binding your different graph objects to your grid, create a seperate view model just dedicated for data display. You could then initialize this view model with your different graph objects. And in your grid you can always bind to the properties of the display specific view model which match the columns of your DataGrid.

This is essentially the purpose of MVVM, with the view model serving as a layer between the view and the model. In your case, the models are the graph objects and the view model wraps them for display in the view.

The idea with this approach is also to move the complexity from the view (xaml) to the view model to avoid complex xaml definations.

Solution B: Use a ListBox instead of a DataGrid and a ItemTemplateSelector

This tutorial shows how to use a ItemTemplateSelector in combination with a ListView control: How to use a DataTemplateSelector to switch the Template depending on the data

The idea here is to choose the appropiate DataTemplate for a speficic bound source type.

You write that you want to use a DataGrid. I am not sure whether its possible to use an ItemTemplateSelector with a DataGrid because then you would need to create a row object in the DataTemplate, and I do not know how this can be achieved.

But I would prefer solution A.