Lesson 1 - Add a GridControl to a Project

  • 2 minutes to read

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

GridControl Tutorial Result

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

    View Example

  2. Create a ViewModel:

    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 {
                    Orders = northwindDBContext.Orders.Local;


    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:

    GridControl Tutorial Toolbox

    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:

          Title="MainWindow" Height="450" Width="800">
          <dxg:GridControl AutoGenerateColumns="AddNew" EnableSmartColumnsGeneration="True">
  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:


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

    GridControl Tutorial Data

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

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

    GridControl Tutorial ItemsSource

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

    <dxg:GridControl AutoGenerateColumns="AddNew"
                     ItemsSource="{Binding Orders}">
  7. Run the project. The GridControl generates columns for all fields from a bound data source:

    GridControl Tutorial Result

See Also