# Binding to a Collection of Fields | WPF Controls | DevExpress Documentation When engineering a WPF application using the Model View ViewModel (MVVM) architectural pattern, you may be required to describe fields in a Model or ViewModel. The Pivot Grid can be bound to a collection of objects containing field settings, described in a Model or ViewModel, thus minimizing the need for ‘code-behind’. ## View Model Implementation Note In this tutorial PivotGrid is bound to the Sales Person view of the Northwind database. You can find it at *C:\Users\Public\Documents\DevExpress Demos 26.1\Components\Data\nwind.mdb*. Create a view model. In this tutorial the view model includes the following classes: - *ViewModel* - the Sales Person view model. - *Field* - describes the Pivot Grid fields. This class provides properties that correspond to settings common to all Pivot Grid fields. - *FieldTemplateSelector* - describes the Pivot Grid template selector. This class allows you to choose the required template based on the specified condition. - C# 
using System.Windows;
using System.Windows.Controls;
using System.Collections.ObjectModel;
using DevExpress.Xpf.PivotGrid;

namespace Model{
  public class ViewModel {

    // The collection of Pivot Grid fields.
    public ObservableCollection<Field> Fields { get; private set; }

    // The view model that contains the field settings.
    public ViewModel() {
      Fields = new ObservableCollection<Field>() {
        new Field() { FieldName="CategoryName", AreaIndex=0, FieldArea = FieldArea.RowArea, UniqueName="fieldCategory" },
        new Field() { FieldName="Country", AreaIndex=0, FieldArea = FieldArea.ColumnArea, UniqueName="fieldCountry" },
        new Field() { FieldName="Sales Person", AreaIndex=1, FieldArea = FieldArea.ColumnArea, UniqueName="fieldSalesPerson" },
        new Field() { FieldName="OrderDate", AreaIndex=0, FieldArea = FieldArea.FilterArea, UniqueName="fieldOrderYear",
            Interval = FieldGroupInterval.DateYear, FieldCaption = "Year", GroupName="groupYearMonth", GroupIndex=0 },
        new Field() { FieldName="Extended Price", AreaIndex=0, FieldArea = FieldArea.DataArea, UniqueName="fieldPrice" },
      };            
    }
  }

  public class Field {
    public string FieldName { get; set; }
    public string UniqueName { get; set; }
    public string FieldCaption { get; set; }
    public FieldArea FieldArea { get; set; }
    public int AreaIndex { get; set; }
    public FieldGroupInterval Interval { get; set; }
    public string GroupName { get; set; }
    public int GroupIndex { get; set; }
  }

  public class FieldTemplateSelector : DataTemplateSelector {
    public override DataTemplate SelectTemplate(object item, DependencyObject container) {
      Field field = (Field)item;
        if(field.Interval == FieldGroupInterval.DateYear) {
          return (DataTemplate)((Control)container).FindResource("IntervalFieldTemplate");
        }
      return (DataTemplate)((Control)container).FindResource("DefaultFieldTemplate");
    }
  }
}
Note If the Fields collection might be changed after it has been assigned to the Pivot Grid control, it should implement the [INotifyCollectionChanged](https://docs.microsoft.com/en-us/dotnet/api/system.collections.specialized.inotifycollectionchanged) interface, so that changes made within a View Model are automatically reflected by the Pivot Grid. ## Field Templates and Selector The Pivot Grid Control generates fields based on field templates. Using a template, you can create an unlimited number of fields in an unlimited number of Pivot Grid controls. In this example, there are two field templates: *DefaultFieldTemplate* and *ComboColumnTemplate*. To avoid performance issues when binding to field 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="DefaultFieldTemplate">
      <ContentControl>
        <dxpg:PivotGridField FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"
                   Area="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldArea, RelativeSource={RelativeSource Self}}"
                   AreaIndex="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).AreaIndex, RelativeSource={RelativeSource Self}}"
                   Caption="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldCaption, RelativeSource={RelativeSource Self}}"
                   dx:XamlHelper.Name="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).UniqueName, RelativeSource={RelativeSource Self}}"
                   >
        </dxpg:PivotGridField>
      </ContentControl>
    </DataTemplate>
To choose the required template based on the specified condition, use the Template Selector. In this example, the template selector is represented by the **FieldTemplateSelector** class: - XAML - C# 
<Window x:Class="WpfPivotTestExample.MainWindow"
        x:Name="Form1" Title="MainWindow" Height="362" Width="627"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfPivotTestExample"
        xmlns:dxpg="http://schemas.devexpress.com/winfx/2008/xaml/pivotgrid" 
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
        xmlns:dxci="http://schemas.devexpress.com/winfx/2008/xaml/core/internal"
        xmlns:nwindDataSetTableAdapters="clr-namespace:WpfPivotTestExample.nwindDataSetTableAdapters" 
        xmlns:model="clr-namespace:Model" 
        xmlns:view="clr-namespace:View">
    <Window.DataContext>
        <local:ViewModel />
    </Window.DataContext>
    <Window.Resources>
        <local:FieldTemplateSelector x:Key="FieldTemplateSelector" />
        <dx:TypedSimpleSource x:Key="TypedSimpleSource" AdapterType="{x:Type nwindDataSetTableAdapters:SalesPersonTableAdapter}" 
                              ContextType="{x:Type local:nwindDataSet}" Path="SalesPerson" />
        <DataTemplate x:Key="DefaultFieldTemplate">
            <ContentControl>
                <dxpg:PivotGridField FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"
                                     Area="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldArea, RelativeSource={RelativeSource Self}}"
                                     AreaIndex="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).AreaIndex, RelativeSource={RelativeSource Self}}"
                                     Caption="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldCaption, RelativeSource={RelativeSource Self}}"
                                     dx:XamlHelper.Name="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).UniqueName, RelativeSource={RelativeSource Self}}"
                                     >
                </dxpg:PivotGridField>
            </ContentControl>
        </DataTemplate>
        <DataTemplate x:Key="IntervalFieldTemplate">
            <ContentControl>
                <dxpg:PivotGridField FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"
                                     Area="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldArea, RelativeSource={RelativeSource Self}}"
                                     AreaIndex="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).AreaIndex, RelativeSource={RelativeSource Self}}"
                                     Caption="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldCaption, RelativeSource={RelativeSource Self}}"
                                     dx:XamlHelper.Name="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).UniqueName, RelativeSource={RelativeSource Self}}"
                                     GroupInterval="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).Interval, RelativeSource={RelativeSource Self}}"
                                     HeaderImage="{dx:DXImage Image=Calendar_16x16.png}">                                     
                </dxpg:PivotGridField>
            </ContentControl>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <!-- -->
    </Grid>
</Window>
If all Pivot Grid fields can be described using a single template, you have no need to create a field template selector. Instead, assign this template to the Pivot Grid’s [PivotGridControl.FieldGeneratorTemplate](/WPF/DevExpress.Xpf.PivotGrid.PivotGridControl.FieldGeneratorTemplate) property. You can create a style to specify settings common to all fields generated using different templates. You can specify bindings to ViewModel properties within a style. This style should be assigned to the [PivotGridControl.FieldGeneratorStyle](/WPF/DevExpress.Xpf.PivotGrid.PivotGridControl.FieldGeneratorStyle) property. ## Customizing the WPF DXPivotGrid Finally, specify the Pivot Grid’s [PivotGridControl.DataSource](/WPF/DevExpress.Xpf.PivotGrid.PivotGridControl.DataSource), [PivotGridControl.FieldsSource](/WPF/DevExpress.Xpf.PivotGrid.PivotGridControl.FieldsSource) and [PivotGridControl.FieldGeneratorTemplateSelector](/WPF/DevExpress.Xpf.PivotGrid.PivotGridControl.FieldGeneratorTemplateSelector). | Member | Description | | --- | --- | | [PivotGridControl.DataSource](/WPF/DevExpress.Xpf.PivotGrid.PivotGridControl.DataSource) | Specifies the Pivot Grid’s data source. | | [PivotGridControl.FieldsSource](/WPF/DevExpress.Xpf.PivotGrid.PivotGridControl.FieldsSource) | Specifies the source from which the Pivot Grid generates fields. | | [PivotGridControl.FieldGeneratorTemplateSelector](/WPF/DevExpress.Xpf.PivotGrid.PivotGridControl.FieldGeneratorTemplateSelector) | Specifies the field template selector, which returns a template for each field based on the specified condition. | The following code shows how to configure the Pivot Grid control using the ViewModel. - XAML 
<Grid>
        <dxpg:PivotGridControl x:Name="pivotGridControl1" 
                               DataSource="{Binding Data, Source={StaticResource TypedSimpleSource}}"
                               FieldsSource="{Binding Fields }" 
                               FieldGeneratorTemplateSelector="{StaticResource FieldTemplateSelector}"                               
        </dxpg:PivotGridControl>
    </Grid>
The image below shows the result. As you can see, the *OrderDate* field has a Calendar icon in its [field header](/WPF/7993/controls-and-libraries/pivot-grid/ui-elements/field-header). ![pivot-field-template](/WPF/images/pivot-field-template128861.png) ## Example [How to: Bind the Pivot Grid to Fields and Groups specified in ViewModel](/WPF/118813/controls-and-libraries/pivot-grid/examples/binding-to-data/how-to-bind-the-pivot-grid-to-fields-and-groups-specified-in-viewmodel) See Also [Binding to a Collection of Groups](/WPF/115407/controls-and-libraries/pivot-grid/mvvm-enhancements/binding-to-a-collection-of-groups)