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:

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

  2. Create a ViewModel:

    using DevExpress.Mvvm;
    using System.Collections.ObjectModel;
    using System.Data.Entity;
    namespace WPFBlankAppWithDatabase {
        public class ViewModel : ViewModelBase {
            NorthwindEntities northwindDBContext;
            public ViewModel() {
                if (IsInDesignMode) {
                    Orders = new ObservableCollection<Order>();
                else {
                    northwindDBContext = new NorthwindEntities();
                    Orders = northwindDBContext.Orders.Local;
            public ObservableCollection<Order> Orders {
                get => GetValue<ObservableCollection<Order>>();
                private set => SetValue(value);

    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.v20.1
      • DevExpress.Data.v20.1
      • DevExpress.Mvvm.v20.1
      • DevExpress.Printing.v20.1.Core
      • DevExpress.Xpf.Core.v20.1
      • DevExpress.Xpf.Grid.v20.1
      • DevExpress.Xpf.Grid.v20.1.Core
    • Generates the code below:

          Title="MainWindow" Height="450" Width="800">
          <dxg:GridControl AutoGenerateColumns="AddNew" 
                  <dxg:TableView ShowTotalSummary="True"/>
  4. Right-click the GridControl and select Layout - Reset All to make it fill the entire window:

  5. Build the solution to make the ViewModel class visible in the window's smart tag DataContext menu.

  6. Open the ThemedWindow's smart tag menu and define the window's data context:

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

  7. Open the GridControl's smart tag menu and specify the ItemsSource:

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

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

See Also