Lesson 1 - Add a GridControl to a Project and Bind it to Data

• Jun 06, 2023
• 2 minutes to read

This tutorial demonstrates how to add a GridControl to your project and bind the control to a database:

Tip

The following tutorials demonstrate how to bind the GridControl to different data sources:

• Bind the WPF Data Grid to a Local Collection
• Bind the WPF Data Grid to any Data Source with Virtual Sources
• Bind the WPF Data Grid to Data (Various Sources and Techniques)

1. Download the following blank sample project with a pre-configured database connection:

   View Example: Blank .NET 6 App with the Northwind Database

   The example description includes steps to create the project.

2. Create a View Model that implements ViewModelBase:

   MainViewModel.cs

   using DevExpress.Mvvm;
   using Microsoft.EntityFrameworkCore;
   using System.Collections.Generic;
   using WPFBlankDotNETAppWithNorthwindDatabase.Models;
   
   namespace WPFBlankDotNETAppWithNorthwindDatabase {
       public class ViewModel : ViewModelBase {
           NorthwindEntities northwindDBContext;
   
           public ICollection<Order> Orders {
               get => GetValue<ICollection<Order>>();
               private set => SetValue(value);
           }
   
           public ViewModel() {
               northwindDBContext = new NorthwindEntities();
   
               northwindDBContext.Orders.Load();
               Orders = northwindDBContext.Orders.Local;
           }
       }
   }
   

   MainViewModel.vb

   Imports DevExpress.Mvvm
   Imports Microsoft.EntityFrameworkCore
   Imports System.Collections.Generic
   Imports WPFBlankDotNETAppWithNorthwindDatabase.Models
   
   Namespace WPFBlankDotNETAppWithNorthwindDatabase
       Public Class ViewModel
           Inherits ViewModelBase
   
           Private northwindDBContext As NorthwindEntities
   
           Public Property Orders As ICollection(Of Order)
               Get
                   Return GetValue(Of ICollection(Of Order))()
               End Get
               Private Set(ByVal value As ICollection(Of Order))
                   Return SetValue(value)
               End Set
           End Property
   
           Public Sub New()
               northwindDBContext = New NorthwindEntities()
               northwindDBContext.Orders.Load()
               Orders = northwindDBContext.Orders.Local
           End Sub
       End Class
   End Namespace
   

3. Add the GridControl to the project:

   • Add the DevExpress.Wpf.Grid.Core NuGet package to the .NET project.

   • Add the following references if you use a .NET Framework project:

     • DevExpress.Data.Desktop.v23.2
     • DevExpress.Data.v23.2
     • DevExpress.Drawing.v23.2
     • DevExpress.Mvvm.v23.2
     • DevExpress.Printing.v23.2.Core
     • DevExpress.Xpf.Core.v23.2
     • DevExpress.Xpf.Grid.v23.2
     • DevExpress.Xpf.Grid.v23.2.Core

   • Add the GridControl to the MainView:

     MainView.xaml

     <UserControl
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" 
         xmlns:ViewModels="clr-namespace:WPFBlankDotNETAppWithNorthwindDatabase.ViewModels"
         xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" 
         x:Class="WPFBlankDotNETAppWithNorthwindDatabase.Views.MainView"
         mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300">
         <UserControl.DataContext>
             <ViewModels:MainViewModel/>
         </UserControl.DataContext>
         <Grid>
             <dxg:GridControl AutoGenerateColumns="AddNew" EnableSmartColumnsGeneration="True">
                 <dxg:GridControl.View>
                     <dxg:TableView/>
                 </dxg:GridControl.View>
             </dxg:GridControl>
         </Grid>
     </UserControl>
     

4. Specify the DataControlBase.ItemsSource property to bind the GridControl to data:

   MainView.xaml

   <dxg:GridControl AutoGenerateColumns="AddNew" 
                    EnableSmartColumnsGeneration="True" 
                    ItemsSource="{Binding Orders}">
       <dxg:GridControl.View>
           <dxg:TableView/>
       </dxg:GridControl.View>
   </dxg:GridControl>
   

5. Run the project. The GridControl generates columns for all fields from the bound data source: