Skip to main content
All docs
V24.1

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Bind the WPF Data Grid to a Local Collection

  • 6 minutes to read

This topic demonstrates how to bind the GridControl to a local collection:

Bind to Collection - Result

#Add a Data Model

Create a data model with a collection of the Customer class:

using System;
using System.Collections.ObjectModel;

namespace BindToLocalCollection {
    public class Customer {
        public string Name { get; set; }
        public string City { get; set; }
        public int Visits { get; set; }
        public DateTime? Birthday { get; set; }
    }
    public class CustomerDataModel {
        public ObservableCollection<Customer> GetCustomers() {
            ObservableCollection<Customer> people = new ObservableCollection<Customer>();
            people.Add(new Customer() { Name = "Gregory S. Price", City = "Hong Kong", Visits = 4, Birthday = new DateTime(1980, 1, 1) });
            people.Add(new Customer() { Name = "Irma R. Marshall", City = "Madrid", Visits = 2, Birthday = new DateTime(1966, 4, 15) });
            people.Add(new Customer() { Name = "John C. Powell", City = "Los Angeles", Visits = 6, Birthday = new DateTime(1982, 3, 11) });
            people.Add(new Customer() { Name = "Christian P. Laclair", City = "London", Visits = 11, Birthday = new DateTime(1977, 12, 5) });
            people.Add(new Customer() { Name = "Karen J. Kelly", City = "Hong Kong", Visits = 8, Birthday = new DateTime(1956, 9, 5) });
            people.Add(new Customer() { Name = "Brian C. Cowling", City = "Los Angeles", Visits = 5, Birthday = new DateTime(1990, 2, 27) });
            people.Add(new Customer() { Name = "Thomas C. Dawson", City = "Madrid", Visits = 21, Birthday = new DateTime(1965, 5, 5) });
            people.Add(new Customer() { Name = "Angel M. Wilson", City = "Los Angeles", Visits = 8, Birthday = new DateTime(1987, 11, 9) });
            people.Add(new Customer() { Name = "Winston C. Smith", City = "London", Visits = 1, Birthday = new DateTime(1949, 6, 18) });
            people.Add(new Customer() { Name = "Harold S. Brandes", City = "Bangkok", Visits = 3, Birthday = new DateTime(1989, 1, 8) });
            people.Add(new Customer() { Name = "Michael S. Blevins", City = "Hong Kong", Visits = 4, Birthday = new DateTime(1972, 9, 14) });
            people.Add(new Customer() { Name = "Jan K. Sisk", City = "Bangkok", Visits = 6, Birthday = new DateTime(1989, 5, 7) });
            people.Add(new Customer() { Name = "Sidney L. Holder", City = "London", Visits = 19, Birthday = new DateTime(1971, 10, 3) });
            return people;
        }
    }
}

#Add a View Model

Create a View Model class that receives data from the CustomerDataModel:

using DevExpress.Mvvm;
using System.Collections.ObjectModel;

namespace BindToLocalCollection {
    public class ViewModel : ViewModelBase {
        public ViewModel() {
            Source = CustomerDataModel.GetCustomers();
        }
        public ObservableCollection<Customer> Source { get; }
    }
}

#Bind the GridControl to Data

  1. Build the solution to make the ViewModel class visible in the window’s Quick Actions.
  2. Open the window’s Quick Actions and specify the window’s data context:

    Bind to Collection - Data Context

    You can also define the window’s data context in code:

    <Window
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:BindToLocalCollection"
            xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" 
            x:Class="BindToLocalCollection.MainWindow"
            mc:Ignorable="d"
            Title="MainWindow" Height="450" Width="800">
        <Window.DataContext>
            <local:ViewModel/>
        </Window.DataContext>
        <Grid>
            <dxg:GridControl AutoGenerateColumns="AddNew" 
                             EnableSmartColumnsGeneration="True">
                <dxg:GridControl.View>
                    <dxg:TableView/>
                </dxg:GridControl.View>
            </dxg:GridControl>
        </Grid>
    </Window>
    
  3. Open the GridControl‘s Quick Actions and specify the ItemsSource:

    Bind to Collection - Items Source

    To bind the GridControl to data in code, specify the DataControlBase.ItemsSource property:

    <Window
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:BindToLocalCollection"
            xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" 
            x:Class="BindToLocalCollection.MainWindow"
            mc:Ignorable="d"
            Title="MainWindow" Height="450" Width="800">
        <Window.DataContext>
            <local:ViewModel/>
        </Window.DataContext>
        <Grid>
            <dxg:GridControl AutoGenerateColumns="AddNew" 
                             EnableSmartColumnsGeneration="True" 
                             ItemsSource="{Binding Source}">
                <dxg:GridControl.View>
                    <dxg:TableView/>
                </dxg:GridControl.View>
            </dxg:GridControl>
        </Grid>
    </Window>
    
  4. Run the project. The GridControl generates columns for all fields from a bound data source.

    Bind to Collection - Result

#More Examples

The following example shows how to bind the WPF Data Grid to different data sources.

View Example: Bind the WPF Data Grid to Data

This example includes multiple solutions that demonstrate:

  • How to bind the Data Grid to Entity Framework, EF Core, and XPO.
  • Different binding mechanisms: virtual sources, server mode sources, and local data.
  • MVVM and code-behind patterns.

After you bind the Data Grid to a database, you can implement CRUD operations (create, read update, delete). Refer to the following topic for more information: CRUD Operations in a Data-Bound Grid.

View Example: Implement CRUD Operations in the WPF Data Grid

See Also