Lesson 1 - Add a GridControl to a Project

• Mar 18, 2020
• 5 minutes to read

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

Add a Data Model

Add a data model (the Customer class) to the MainWindow.xaml.cs / MainWindow.xaml.vb file:

MainWindow.xaml.cs

namespace DxGridGettingStarted {
    public partial class MainWindow : Window { ... }

    public class Customer {
        public string Name { get; set; }
        public string City { get; set; }
        public int Visits { get; set; }
        public DateTime? Birthday { get; set; }
    }
}

MainWindow.xaml.vb

Namespace DxGridGettingStarted
    Public Partial Class MainWindow
        Inherits Window
    End Class

    Public Class Customer
        Public Property Name As String
        Public Property City As String
        Public Property Visits As Integer
        Public Property Birthday As DateTime?
    End Class
End Namespace

Add a View Model

1. Create a View Model class to expose the Customers field:

   MainWindow.xaml.cs

   ...
   using System.ComponentModel;
   
   namespace DxGridGettingStarted {
       public partial class MainWindow : Window { ... }
   
       public class Customer { ... }
   
       public class MainWindowViewModel : INotifyPropertyChanged {
           public MainWindowViewModel() {
               List<Customer> people = new List<Customer>();
               people.Add(new Customer() { Name = "Gregory S. Price", City = "Hong Kong", Visits = 4, Birthday = new DateTime(1980, 1, 1) });
               people.Add(new Customer() { Name = "Irma R. Marshall", City = "Madrid", Visits = 2, Birthday = new DateTime(1966, 4, 15) });
               people.Add(new Customer() { Name = "John C. Powell", City = "Los Angeles", Visits = 6, Birthday = new DateTime(1982, 3, 11) });
               people.Add(new Customer() { Name = "Christian P. Laclair", City = "London", Visits = 11, Birthday = new DateTime(1977, 12, 5) });
               people.Add(new Customer() { Name = "Karen J. Kelly", City = "Hong Kong", Visits = 8, Birthday = new DateTime(1956, 9, 5) });
               people.Add(new Customer() { Name = "Brian C. Cowling", City = "Los Angeles", Visits = 5, Birthday = new DateTime(1990, 2, 27) });
               people.Add(new Customer() { Name = "Thomas C. Dawson", City = "Madrid", Visits = 21, Birthday = new DateTime(1965, 5, 5) });
               people.Add(new Customer() { Name = "Angel M. Wilson", City = "Los Angeles", Visits = 8, Birthday = new DateTime(1987, 11, 9) });
               people.Add(new Customer() { Name = "Winston C. Smith", City = "London", Visits = 1, Birthday = new DateTime(1949, 6, 18) });
               people.Add(new Customer() { Name = "Harold S. Brandes", City = "Bangkok", Visits = 3, Birthday = new DateTime(1989, 1, 8) });
               people.Add(new Customer() { Name = "Michael S. Blevins", City = "Hong Kong", Visits = 4, Birthday = new DateTime(1972, 9, 14) });
               people.Add(new Customer() { Name = "Jan K. Sisk", City = "Bangkok", Visits = 6, Birthday = new DateTime(1989, 5, 7) });
               people.Add(new Customer() { Name = "Sidney L. Holder", City = "London", Visits = 19, Birthday = new DateTime(1971, 10, 3) });
               Customers = people;
           }
           public List<Customer> Customers { get; private set; }
           public event PropertyChangedEventHandler PropertyChanged;
       }
   }
   

   MainWindow.xaml.vb

   ...
   Imports System.ComponentModel
   
   Namespace DxGridGettingStarted
       Public Partial Class MainWindow
           Inherits Window
       End Class
   
       Public Class Customer
       End Class
   
       Public Class MainWindowViewModel
           Inherits INotifyPropertyChanged
   
           Public Sub New()
               Dim people As List(Of Customer) = New List(Of Customer)()
               people.Add(New Customer() With { .Name = "Gregory S. Price", .City = "Hong Kong", .Visits = 4, .Birthday = New DateTime(1980, 1, 1) })
               people.Add(New Customer() With { .Name = "Irma R. Marshall", .City = "Madrid", .Visits = 2, .Birthday = New DateTime(1966, 4, 15) })
               people.Add(New Customer() With { .Name = "John C. Powell", .City = "Los Angeles", .Visits = 6, .Birthday = New DateTime(1982, 3, 11) })
               people.Add(New Customer() With { .Name = "Christian P. Laclair", .City = "London", .Visits = 11, .Birthday = New DateTime(1977, 12, 5) })
               people.Add(New Customer() With { .Name = "Karen J. Kelly", .City = "Hong Kong", .Visits = 8, .Birthday = New DateTime(1956, 9, 5) })
               people.Add(New Customer() With { .Name = "Brian C. Cowling", .City = "Los Angeles", .Visits = 5, .Birthday = New DateTime(1990, 2, 27) })
               people.Add(New Customer() With { .Name = "Thomas C. Dawson", .City = "Madrid", .Visits = 21, .Birthday = New DateTime(1965, 5, 5) })
               people.Add(New Customer() With { .Name = "Angel M. Wilson", .City = "Los Angeles", .Visits = 8, .Birthday = New DateTime(1987, 11, 9) })
               people.Add(New Customer() With { .Name = "Winston C. Smith", .City = "London", .Visits = 1, .Birthday = New DateTime(1949, 6, 18) })
               people.Add(New Customer() With { .Name = "Harold S. Brandes", .City = "Bangkok", .Visits = 3, .Birthday = New DateTime(1989, 1, 8) })
               people.Add(New Customer() With { .Name = "Michael S. Blevins", .City = "Hong Kong", .Visits = 4, .Birthday = New DateTime(1972, 9, 14) })
               people.Add(New Customer() With { .Name = "Jan K. Sisk", .City = "Bangkok", .Visits = 6, .Birthday = New DateTime(1989, 5, 7) })
               people.Add(New Customer() With { .Name = "Sidney L. Holder", .City = "London", .Visits = 19, .Birthday = New DateTime(1971, 10, 3) })
               Customers = people
           End Sub
   
           Public Property Customers As List(Of Customer)
           Public Event PropertyChanged As PropertyChangedEventHandler
       End Class
   End Namespace
   

2. Define the window’s data context to allow the window to work with the View Model:

   MainWindow.xaml

   <Window
       ... >
       <Window.DataContext>
           <local:MainWindowViewModel/>
       </Window.DataContext>
   

Add the GridControl to the View

1. Open the Visual Studio toolbox.
2. Expand the DX.19.2: Data & Analytics tab.

3. Double-click the GridControl toolbox item.

   

4. Add the GridControl to the project and bind it to data:

   MainWindow.xaml

   <Window
   ...
   xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid">
   <dxg:GridControl AutoGenerateColumns="AddNew"
                    ItemsSource="{Binding Customers}">
       <dxg:GridControl.View>
           <dxg:TableView />
       </dxg:GridControl.View>
   </dxg:GridControl>
   

5. Build the solution.