Lesson 1 - Add a GridControl to a Project

• Oct 12, 2020
• 2 minutes to read

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

1. Download the following blank sample project with an adjusted database connection:

   View Example

2. Create a ViewModel:

   ViewModel.cs

   using System.Collections.ObjectModel;
   using Microsoft.EntityFrameworkCore;
   using DevExpress.Mvvm;
   using DevExpress.Mvvm.Native;
   using WPFBlankDotNETCoreAppWithNorthwindDatabase.Models;
   
   namespace WPFBlankDotNETCoreAppWithNorthwindDatabase {
       public class ViewModel : ViewModelBase {
           NorthwindEntities northwindDBContext;
           public ViewModel() {
               if (IsInDesignMode) {
                   Orders = new ObservableCollection<Order>();
               }
               else {
                   northwindDBContext = new NorthwindEntities();
   
                   northwindDBContext.Orders.Load();
                   Orders = northwindDBContext.Orders.ToObservableCollection();
               }
           }
           public ObservableCollection<Order> Orders {
               get => GetValue<ObservableCollection<Order>>();
               private set => SetValue(value);
           }
       }
   }
   

   ViewModel.vb

   Imports System.Collections.ObjectModel
   Imports Microsoft.EntityFrameworkCore
   Imports DevExpress.Mvvm
   Imports DevExpress.Mvvm.Native
   Imports WPFBlankDotNETCoreAppWithNorthwindDatabase.Models
   
   Namespace WPFBlankDotNETCoreAppWithNorthwindDatabase
       Public Class ViewModel
           Inherits ViewModelBase
   
           Private northwindDBContext As NorthwindEntities
   
           Public Sub New()
               If IsInDesignMode Then
                   Orders = New ObservableCollection(Of Order)()
               Else
                   northwindDBContext = New NorthwindEntities()
                   northwindDBContext.Orders.Load()
                   Orders = northwindDBContext.Orders.ToObservableCollection()
               End If
           End Sub
   
           Public Property Orders As ObservableCollection(Of Order)
               Get
                   Return GetValue(Of ObservableCollection(Of Order))()
               End Get
               Private Set(ByVal value As ObservableCollection(Of Order))
                   Return SetValue(value)
               End Set
           End Property
       End Class
   End Namespace
   

   Note

   The GridControl in .NET Core loads records from the database in the XAML Designer. To load records on the application startup only, add an empty Orders collection at design time.

3. Define the window’s data context to allow the window to use ViewModel data:

   MainWindow.xaml

   <dx:ThemedWindow
       ...
       xmlns:local="clr-namespace:WPFBlankDotNETCoreAppWithNorthwindDatabase">
       <dx:ThemedWindow.DataContext>
           <local:ViewModel/>
       </dx:ThemedWindow.DataContext>
   

4. Add the GridControl to a project.

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

   MainWindow.xaml

   <dx:ThemedWindow 
       x:Class="WPFBlankDotNETCoreAppWithNorthwindDatabase.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:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
       xmlns:local="clr-namespace:WPFBlankDotNETCoreAppWithNorthwindDatabase"
       Title="MainWindow" Height="450" Width="800">
       <dx:ThemedWindow.DataContext>
           <local:ViewModel/>
       </dx:ThemedWindow.DataContext>
       <dxg:GridControl AutoGenerateColumns="AddNew"
                        EnableSmartColumnsGeneration="True"
                        ItemsSource="{Binding Orders}">
           <dxg:GridControl.View>
               <dxg:TableView />
           </dxg:GridControl.View>
       </dxg:GridControl>
   </dx:ThemedWindow>
   

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