All docs
V20.1
20.2 (EAP/Beta)
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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 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);
            }
        }
    }
    
    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:

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

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

See Also