Lesson 1 - Add a GridControl to a Project

• Sep 28, 2021
• 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 DevExpress.Mvvm;
   using System.Collections.ObjectModel;
   using System.Data.Entity;
   
   namespace WPFBlankAppWithDatabase {
       public class ViewModel : ViewModelBase {
           NorthwindEntities northwindDBContext;
   
           public ObservableCollection<Order> Orders {
               get => GetValue<ObservableCollection<Order>>();
               private set => SetValue(value);
           }
   
           public ViewModel() {
               northwindDBContext = new NorthwindEntities();
   
               if(IsInDesignMode) {
                   Orders = new ObservableCollection<Order>();
               } else {
                   northwindDBContext.Orders.Load();
                   Orders = northwindDBContext.Orders.Local;
               }
           }
       }
   }
   

   ViewModel.vb

   Imports DevExpress.Mvvm
   Imports System.Collections.ObjectModel
   Imports System.Data.Entity
   
   Namespace WPFBlankAppWithDatabase
       Public Class ViewModel
           Inherits ViewModelBase
   
           Private northwindDBContext As NorthwindEntities
   
           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
   
           Public Sub New()
               northwindDBContext = New NorthwindEntities()
   
               If IsInDesignMode Then
                   Orders = New ObservableCollection(Of Order)()
               Else
                   northwindDBContext.Orders.Load()
                   Orders = northwindDBContext.Orders.Local
               End If
           End Sub
       End Class
   End Namespace
   

   Note

   To use the Order object’s properties at design time without a direct database connection, add an empty Orders collection to the ViewModel.

3. Add the GridControl toolbox item to your project:

   

   Visual Studio performs the following actions:

   • Adds the following references to the project:

     • DevExpress.Data.Desktop.v21.2
     • DevExpress.Data.v21.2
     • DevExpress.Mvvm.v21.2
     • DevExpress.Printing.v21.2.Core
     • DevExpress.Xpf.Core.v21.2
     • DevExpress.Xpf.Grid.v21.2
     • DevExpress.Xpf.Grid.v21.2.Core

   • Generates the code below:

     MainWindow.xaml

     <dx:ThemedWindow
         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" 
         x:Class="WPFBlankAppWithDatabase.MainWindow"
         Title="MainWindow" Height="450" Width="800">
         <dxg:GridControl AutoGenerateColumns="AddNew" EnableSmartColumnsGeneration="True">
             <dxg:GridControl.View>
                 <dxg:TableView/>
             </dxg:GridControl.View>
         </dxg:GridControl>
     </dx:ThemedWindow>
     

4. Build the solution to make the ViewModel class visible in the window’s Quick Actions.

5. Open the ThemedWindow‘s Quick Actions and specify the window’s data context:

   Tip

   You can use the Document Outline Window to select an element for which to invoke Quick Actions.

   

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

   MainWindow.xaml

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

6. Open the GridControl‘s Quick Actions. Click the rectangular button next to the ItemsSource property and select Create Data Binding. Specify the binding:

   

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

   MainWindow.xaml

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

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