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:
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
- Build the solution to make the ViewModel class visible in the window’s Quick Actions.
Open the window’s Quick Actions and specify the window’s 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>Open the GridControl‘s Quick Actions and specify the ItemsSource:
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>Run the project. The GridControl generates columns for all fields from a bound data source.
More Examples
The following example shows how to bind the WPF Data Grid to different data sources.
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.
See Also