Binding to a Collection of Columns

May 12, 2020
11 minutes to read

When engineering a WPF application using the Model View ViewModel (MVVM) architectural pattern, you may be required to describe columns in a Model or ViewModel. The grid can be bound to a collection of objects containing column settings, described in a Model or ViewModel, thus minimizing the need for ‘code-behind’.

View Model Implementation

Assume an Employee view model. It includes the following classes.

Employee - a data object that contains employee information (e.g. first and last names, job title, etc.).
ViewModel - the employee view model.
EmployeeData - supplies employee information to be displayed within the grid control.
Column - describes a grid column. This class provides properties that correspond to settings common to all types of grid columns.
ComboBoxColumn - corresponds to a grid column with the ComboBoxEdit in-place editor. This class provides the Source property, which contains the list of a combo box item (in this example, these are cities).
SettingsType - enumerates possible types of in-place editors used to edit cell values.

using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace Model {
    public class ViewModel {
        public List<string> Cities { get; private set; }
        // Returns a list of employees so that they can be bound to the grid control.
        public List<Employee> Source { get; private set; }
        // The collection of grid columns.
        public ObservableCollection<Column> Columns { get; private set; }
        public ViewModel() {
            Source = EmployeeData.DataSource;
            List<string> _cities = new List<string>();
            foreach (Employee employee in Source) {
                if (!_cities.Contains(employee.City))
                    _cities.Add(employee.City);
            }
            Cities = _cities;
            Columns = new ObservableCollection<Column>() {
                new Column() { FieldName = "FirstName", Settings = SettingsType.Default },
                new Column() { FieldName = "LastName", Settings = SettingsType.Default },
                new Column() { FieldName = "JobTitle", Settings = SettingsType.Default },
                new Column() { FieldName = "BirthDate", Settings = SettingsType.Default },
                new ComboColumn() { FieldName = "City", Settings = SettingsType.Combo, Source = Cities }
            };
        }
    }
    // The data item.
    public class Employee {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string JobTitle { get; set; }
        public string City { get; set; }
        public DateTime BirthDate { get; set; }
    }
    public class EmployeeData : List<Employee> {
        public static List<Employee> DataSource {
            get {
                List<Employee> list = new List<Employee>();
                list.Add(new Employee() {
                    FirstName = "Nathan",
                    LastName = "White",
                    City = "NY",
                    JobTitle = "Sales Manager",
                    BirthDate = new DateTime(1970, 1, 10)  });
                return list;
            }
        }
    }
    public class Column {
        // Specifies the name of a data source field to which the column is bound.
        public string FieldName { get; set; }
        // Specifies the type of an in-place editor used to edit column values.
        public SettingsType Settings { get; set; }
    }
    // Corresponds to a column with the combo box in-place editor.
    public class ComboColumn : Column {
        // The source of combo box items.
        public IList Source { get; set; }
    }
    public enum SettingsType { Default, Combo }
}

Note

If the Columns collection might be changed after it has been assigned to the grid control, it should implement INotifyCollectionChanged, so that changes made within a View Model are automatically reflected by the grid.

Column Templates and Selector

The Grid Control generates columns based on column templates. Create multiple templates, one template for each column type. Using a single template you can create an unlimited number of columns in unlimited number of grid controls. In this example, there are two column templates: DefaultColumnTemplate and ComboColumnTemplate.

To avoid performance issues when binding to column properties, use the dxci:DependencyObjectExtensions.DataContext attached property. See the example below.

XAML

<!---->
xmlns:dxci="http://schemas.devexpress.com/winfx/2008/xaml/core/internal"
<!---->
    <DataTemplate x:Key="DefaultColumnTemplate">
        <ContentControl>
            <dxg:GridColumn FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"
                Header="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).Header, RelativeSource={RelativeSource Self}}"
                Width="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).Width, RelativeSource={RelativeSource Self}}" />
        </ContentControl>
    </DataTemplate>

To choose the required template based on the column’s type, use the Template Selector. In this example, the template selector is represented by the ColumnTemplateSelector class.

XAML

<Window x:Class="WpfApplication10.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxci="http://schemas.devexpress.com/winfx/2008/xaml/core/internal"
        xmlns:model="clr-namespace:Model"
        xmlns:view="clr-namespace:View">
    <Window.DataContext>
        <model:ViewModel/>
    </Window.DataContext>
    <Window.Resources>
        <view:ColumnTemplateSelector x:Key="ColumnTemplateSelector"/>
        <DataTemplate x:Key="DefaultColumnTemplate">
            <ContentControl>
                <dxg:GridColumn FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"/>
            </ContentControl>
        </DataTemplate>
        <DataTemplate x:Key="ComboColumnTemplate">
            <ContentControl>
                <dxg:GridColumn FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}">
                    <dxg:GridColumn.EditSettings>
                        <dxe:ComboBoxEditSettings ItemsSource="{Binding Source}"/>
                    </dxg:GridColumn.EditSettings>
                </dxg:GridColumn>
            </ContentControl>
        </DataTemplate>
    </Window.Resources>
    <Grid>
    </Grid>
</Window>

using System.Windows;
using System.Windows.Controls;
using Model;

namespace View {
    public class ColumnTemplateSelector : DataTemplateSelector {
        public override DataTemplate SelectTemplate(object item, DependencyObject container) {
            Column column = (Column)item;
            return (DataTemplate)((Control)container).FindResource(column.Settings + "ColumnTemplate");
        }
    }
}

Note

If all grid columns can be described using a single template, you have no need to create a column template selector. Instead, assign this template to the grid’s DataControlBase.ColumnGeneratorTemplate property.

Note

You can create a style to specify settings common to all columns generated using different templates. You can specify bindings to ViewModel properties within a style (see FieldName below):

XAML

<Window.Resources>
    <Style x:Key="ColumnStyle" TargetType="dxg:GridColumn">
        <Setter Property="FilterPopupMode" Value="CheckedList"/>
        <Setter Property="FieldName" Value="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"/>
    </Style>
</Window.Resources>

This style should be assigned to the DataControlBase.ColumnGeneratorStyle property.

Customizing the WPF DXGrid

Finally, specify the grid’s DataControlBase.ItemsSource, DataControlBase.ColumnsSource and DataControlBase.ColumnGeneratorTemplateSelector. The DataControlBase.ItemsSource property specifies the grid’s data source. The DataControlBase.ColumnsSource property specifies the source from which the grid generates columns. The DataControlBase.ColumnGeneratorTemplateSelector property specifies the column template selector, which returns a template for each column based on its type.

XAML

<Grid>
        <dxg:GridControl Name="grid"
                         ItemsSource="{Binding Source}"
                         ColumnsSource="{Binding Columns}"
                         ColumnGeneratorTemplateSelector="{StaticResource ColumnTemplateSelector}">
            <dxg:GridControl.View>
                <dxg:TableView Name="tableView1"
                               AutoWidth="True"
                               NavigationStyle="Cell" />
            </dxg:GridControl.View>
        </dxg:GridControl>
    </Grid>

The image below shows the result.

mvvm-columnbinding-result

Examples

This example shows how to put columns and data summary definition logic in the ViewModel and setup the Grid Control.

View Example

Imports System.Windows.Controls
Imports System.Windows
Imports Model

Namespace GridMVVMBindableColumns
    Partial Public Class MainPage
        Inherits UserControl

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
End Namespace

<Window x:Class="WPFGridMVVMBindableColumns.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        xmlns:local="clr-namespace:GridMVVMBindableColumns"
        Title="MainWindow" Height="600" Width="800">
    <local:MainPage/>
</Window>

Imports System.Windows
Imports Model

Namespace WPFGridMVVMBindableColumns
    ''' <summary>
    ''' Interaction logic for MainWindow.xaml
    ''' </summary>
    Partial Public Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub

    End Class
End Namespace

Imports System
Imports System.Collections
Imports System.Collections.Generic
Imports System.Collections.ObjectModel
Imports System.Reflection
Imports System.Xml.Serialization
Imports DevExpress.Data

Namespace Model
    Public Class ViewModel
        Private privateCities As List(Of String)
        Public Property Cities() As List(Of String)
            Get
                Return privateCities
            End Get
            Private Set(ByVal value As List(Of String))
                privateCities = value
            End Set
        End Property
        Private privateSource As IList(Of Employee)
        Public Property Source() As IList(Of Employee)
            Get
                Return privateSource
            End Get
            Private Set(ByVal value As IList(Of Employee))
                privateSource = value
            End Set
        End Property
        Private privateColumns As ObservableCollection(Of Column)
        Public Property Columns() As ObservableCollection(Of Column)
            Get
                Return privateColumns
            End Get
            Private Set(ByVal value As ObservableCollection(Of Column))
                privateColumns = value
            End Set
        End Property
        Private privateTotalSummary As ObservableCollection(Of Summary)
        Public Property TotalSummary() As ObservableCollection(Of Summary)
            Get
                Return privateTotalSummary
            End Get
            Private Set(ByVal value As ObservableCollection(Of Summary))
                privateTotalSummary = value
            End Set
        End Property
        Private privateGroupSummary As ObservableCollection(Of Summary)
        Public Property GroupSummary() As ObservableCollection(Of Summary)
            Get
                Return privateGroupSummary
            End Get
            Private Set(ByVal value As ObservableCollection(Of Summary))
                privateGroupSummary = value
            End Set
        End Property
        Public Sub New()
            Source = EmployeesData.DataSource

            Dim cities_Renamed As New List(Of String)()
            For Each employee As Employee In Source
                If Not cities_Renamed.Contains(employee.City) Then
                    cities_Renamed.Add(employee.City)
                End If
            Next employee
            Cities = cities_Renamed
            Columns = New ObservableCollection(Of Column)() From { _
                New Column() With {.FieldName="FirstName", .Settings = SettingsType.Default}, _
                New Column() With {.FieldName="LastName", .Settings = SettingsType.Default}, _
                New Column() With {.FieldName="BirthDate", .Settings = SettingsType.Default}, _
                New ComboColumn() With {.FieldName="City", .Settings = SettingsType.Combo, .Source = Cities}, _
                New Column() With {.FieldName="ImageData", .Settings = SettingsType.Image} _
            }
            TotalSummary = New ObservableCollection(Of Summary)() From { _
                New Summary() With {.Type = SummaryItemType.Count, .FieldName = "FirstName"}, _
                New Summary() With {.Type = SummaryItemType.Max, .FieldName = "BirthDate"} _
            }
            GroupSummary = New ObservableCollection(Of Summary)() From { _
                New Summary() With {.Type = SummaryItemType.Count, .FieldName = "FirstName"} _
            }
        End Sub
    End Class

    Public Enum SettingsType
        [Default]
        Combo
        Image
    End Enum

    Public Class Summary
        Public Property Type() As SummaryItemType
        Public Property FieldName() As String
    End Class

    Public Class Column
        Public Property FieldName() As String
        Public Property Settings() As SettingsType
    End Class
    Public Class ComboColumn
        Inherits Column

        Public Property Source() As IList
    End Class

    <XmlRoot("Employees")> _
    Public Class EmployeesData
        Inherits List(Of Employee)

        Public Shared ReadOnly Property DataSource() As IList(Of Employee)
            Get
                Dim s As New XmlSerializer(GetType(EmployeesData))
                Dim stream = System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream("EmployeesWithPhoto.xml")
                Dim out = DirectCast(s.Deserialize(stream), List(Of Employee))
                Return out
            End Get
        End Property
    End Class


    Public Class Employee
        Public Property Id() As Integer
        Public Property ParentId() As Integer
        Public Property FirstName() As String
        Public Property MiddleName() As String
        Public Property LastName() As String
        Public Property JobTitle() As String
        Public Property Phone() As String
        Public Property EmailAddress() As String
        Public Property AddressLine1() As String
        Public Property City() As String
        Public Property StateProvinceName() As String
        Public Property PostalCode() As String
        Public Property CountryRegionName() As String
        Public Property GroupName() As String
        Public Property BirthDate() As Date
        Public Property HireDate() As Date
        Public Property Gender() As String
        Public Property MaritalStatus() As String
        Public Property Title() As String
        Public Property ImageData() As Byte()
    End Class
End Namespace

<UserControl 
        x:Class="GridMVVMBindableColumns.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:dxci="http://schemas.devexpress.com/winfx/2008/xaml/core/internal"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

        mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
        xmlns:model="clr-namespace:Model"
        xmlns:view="clr-namespace:View">
    <UserControl.DataContext>
        <model:ViewModel/>
    </UserControl.DataContext>
    <UserControl.Resources>
        <view:ColumnTemplateSelector x:Key="ColumnTemplateSelector"/>
        <Style x:Key="ColumnStyle" TargetType="dxg:GridColumn">
            <Setter Property="FilterPopupMode" Value="CheckedList"/>
        </Style>
        <DataTemplate x:Key="DefaultColumnTemplate">
            <ContentControl>
                <dxg:GridColumn FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"/>
            </ContentControl>
        </DataTemplate>
        <DataTemplate x:Key="ComboColumnTemplate">
            <ContentControl>
                <dxg:GridColumn  FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}">
                    <dxg:GridColumn.EditSettings>
                        <dxe:ComboBoxEditSettings ItemsSource="{Binding Source}"/>
                    </dxg:GridColumn.EditSettings>
                </dxg:GridColumn>
            </ContentControl>
        </DataTemplate>
        <DataTemplate x:Key="ImageColumnTemplate">
            <ContentControl>
                <dxg:GridColumn FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}" Width="100" FixedWidth="True">
                    <dxg:GridColumn.EditSettings>
                        <dxe:ImageEditSettings ShowMenu="False"/>                    
                    </dxg:GridColumn.EditSettings>
                </dxg:GridColumn>
            </ContentControl>
        </DataTemplate>
        <DataTemplate x:Key="SummaryTemplate">
            <ContentControl>
                <dxg:GridSummaryItem FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"
                                 SummaryType="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).Type, RelativeSource={RelativeSource Self}}"/>
            </ContentControl>
        </DataTemplate>
    </UserControl.Resources>
    <Grid>
        <dxg:GridControl ItemsSource="{Binding Source}" x:Name="grid" 
                         ColumnsSource="{Binding Columns}"
                         ColumnGeneratorTemplateSelector="{StaticResource ColumnTemplateSelector}"
                         ColumnGeneratorStyle="{StaticResource ColumnStyle}"
                         TotalSummarySource="{Binding TotalSummary}"
                         TotalSummaryGeneratorTemplate="{StaticResource SummaryTemplate}"
                         GroupSummarySource="{Binding GroupSummary}"
                         GroupSummaryGeneratorTemplate="{StaticResource SummaryTemplate}">
            <dxg:GridControl.View>
                <dxg:TableView x:Name="view" NavigationStyle="Cell" AutoWidth="True"
                               AllowPerPixelScrolling="True" ShowTotalSummary="True"
                               IsTotalSummaryMenuEnabled="False"/>
            </dxg:GridControl.View>
        </dxg:GridControl>
    </Grid>
</UserControl>

Imports System.Windows.Controls
Imports System.Windows
Imports Model


Namespace View
    Public Class ColumnTemplateSelector
        Inherits DataTemplateSelector

        Public Overrides Function SelectTemplate(ByVal item As Object, ByVal container As DependencyObject) As DataTemplate
            Dim column As Column = DirectCast(item, Column)
            Return DirectCast(CType(container, Control).FindResource(column.Settings.ToString() + "ColumnTemplate"), DataTemplate)
        End Function
    End Class
End Namespace

using System.Windows.Controls;
using System.Windows;
using Model;

namespace GridMVVMBindableColumns {
    public partial class MainPage : UserControl {
        public MainPage() {
            InitializeComponent();
        }
    }
}

using System.Windows;
using Model;

namespace WPFGridMVVMBindableColumns {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }

    }
}

using System.Windows.Controls;
using System.Windows;
using Model;


namespace View {
    public class ColumnTemplateSelector : DataTemplateSelector {
        public override DataTemplate SelectTemplate(object item, DependencyObject container) {
            Column column = (Column)item;            

            return (DataTemplate)((Control)container).FindResource(column.Settings + "ColumnTemplate");

        }
    }
}

using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Reflection;
using System.Xml.Serialization;
using DevExpress.Data;

namespace Model {
    public class ViewModel {
        public List<string> Cities { get; private set; }
        public IList<Employee> Source { get; private set; }
        public ObservableCollection<Column> Columns { get; private set; }
        public ObservableCollection<Summary> TotalSummary { get; private set; }
        public ObservableCollection<Summary> GroupSummary { get; private set; }
        public ViewModel() {
            Source = EmployeesData.DataSource;
            List<string> cities = new List<string>();
            foreach(Employee employee in Source) {
                if(!cities.Contains(employee.City))
                    cities.Add(employee.City);
            }
            Cities = cities;
            Columns = new ObservableCollection<Column>() {
                new Column() { FieldName="FirstName", Settings = SettingsType.Default },
                new Column() { FieldName="LastName", Settings = SettingsType.Default},
                new Column() { FieldName="BirthDate", Settings = SettingsType.Default},
                new ComboColumn() { FieldName="City", Settings = SettingsType.Combo, Source = Cities },
                new Column() { FieldName="ImageData", Settings = SettingsType.Image },

            };
            TotalSummary = new ObservableCollection<Summary>() {
                new Summary() { Type = SummaryItemType.Count, FieldName = "FirstName" },
                new Summary() { Type = SummaryItemType.Max, FieldName = "BirthDate" },
            };
            GroupSummary = new ObservableCollection<Summary>() {
                new Summary() { Type = SummaryItemType.Count, FieldName = "FirstName" },
            };
        }
    }

    public enum SettingsType { Default, Combo, Image }

    public class Summary {
        public SummaryItemType Type { get; set; }
        public string FieldName { get; set; }
    }

    public class Column {
        public string FieldName { get; set; }
        public SettingsType Settings { get; set; }
    }
    public class ComboColumn : Column {
        public IList Source { get; set; }
    }

    [XmlRoot("Employees")]
    public class EmployeesData : List<Employee> {
        public static IList<Employee> DataSource {
            get {

                XmlSerializer s = new XmlSerializer(typeof(EmployeesData));

                return (List<Employee>)s.Deserialize(Assembly.GetExecutingAssembly().GetManifestResourceStream("WPFGridMVVMBindableColumns.EmployeesWithPhoto.xml"));

            }
        }
    }


    public class Employee {
        public int Id { get; set; }
        public int ParentId { get; set; }
        public string FirstName { get; set; }
        public string MiddleName { get; set; }
        public string LastName { get; set; }
        public string JobTitle { get; set; }
        public string Phone { get; set; }
        public string EmailAddress { get; set; }
        public string AddressLine1 { get; set; }
        public string City { get; set; }
        public string StateProvinceName { get; set; }
        public string PostalCode { get; set; }
        public string CountryRegionName { get; set; }
        public string GroupName { get; set; }
        public DateTime BirthDate { get; set; }
        public DateTime HireDate { get; set; }
        public string Gender { get; set; }
        public string MaritalStatus { get; set; }
        public string Title { get; set; }
        public byte[] ImageData { get; set; }
    }
}

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

View Model Implementation

Column Templates and Selector

Customizing the WPF DXGrid

Examples