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 ViewModel() {
                if (IsInDesignMode) {
                    Orders = new ObservableCollection<Order>();
                } 
                else {
                    northwindDBContext = new NorthwindEntities();
    
                    northwindDBContext.Orders.Load();
                    Orders = northwindDBContext.Orders.Local;
                }
            }
            public ObservableCollection<Order> Orders {
                get => GetValue<ObservableCollection<Order>>();
                private set => SetValue(value);
            }
        }
    }
    

    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:

    GridControl Tutorial Toolbox

    Visual Studio performs the following actions:

    • Adds the following references to the project:

      • DevExpress.Data.Desktop.v21.1
      • DevExpress.Data.v21.1
      • DevExpress.Mvvm.v21.1
      • DevExpress.Printing.v21.1.Core
      • DevExpress.Xpf.Core.v21.1
      • DevExpress.Xpf.Grid.v21.1
      • DevExpress.Xpf.Grid.v21.1.Core
    • Generates the code below:

      <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" 
                           HorizontalAlignment="Left" 
                           VerticalAlignment="Top">
              <dxg:GridControl.View>
                  <dxg:TableView ShowTotalSummary="True"/>
              </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.

    GridControl Tutorial Data

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

    <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:

    GridControl Tutorial ItemsSource

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

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

    GridControl Tutorial Result

See Also