Lesson 1: Add a GridControl to your Project

• May 05, 2022
• 5 minutes to read

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

Before you proceed, review the following topics:

• Windows UI Library 3
• Get Started with WinUI 3 for Desktop Apps
• DevExpress WinUI Controls: Get Started

Create a Project

Create a new Blank App, Packaged with Windows Application Packaging Project (WinUI 3 in Desktop) project and add the DevExpress.WinUI NuGet package.

Refer to the following topic for more information on how to create a new project: DevExpress WinUI Controls: Get Started.

Add a Data Model

Create a data model with a collection of the Product class:

DataModel.cs

using System;
using System.Collections.ObjectModel;

namespace WinUIGetStarted {
    public class Product {
        public string ProductName { get; set; }
        public string Country { get; set; }
        public string City { get; set; }
        public double UnitPrice { get; set; }
        public int Quantity { get; set; }
        public DateTime OrderDate { get; set; }
    }
    public class ProductsDataModel {
        public static ObservableCollection<Product> GetProducts() {
            ObservableCollection<Product> products = new ObservableCollection<Product> {
                new Product() { 
                    ProductName = "Chang", Country = "UK", City = "Cowes", 
                    UnitPrice = 19, Quantity = 10, OrderDate = new DateTime(2021, 10, 23) 
                },
                new Product() { 
                    ProductName = "Gravad lax", Country = "Italy", City = "Reggio Emilia", 
                    UnitPrice = 12.5, Quantity = 16, OrderDate = new DateTime(2021, 10, 22) 
                },
                new Product() { 
                    ProductName = "Ravioli Angelo", Country = "Brazil", City = "Rio de Janeiro", 
                    UnitPrice = 19, Quantity = 12, OrderDate = new DateTime(2021, 10, 21) 
                },
                new Product() { 
                    ProductName = "Tarte au sucre", Country = "Germany", City = "Leipzig", 
                    UnitPrice = 22, Quantity = 50, OrderDate = new DateTime(2021, 10, 15) 
                },
                new Product() { 
                    ProductName = "Steeleye Stout", Country = "USA", City = "Denver", 
                    UnitPrice = 18, Quantity = 20, OrderDate = new DateTime(2021, 10, 8) 
                },
                new Product() { 
                    ProductName = "Pavlova", Country = "Austria", City = "Graz", 
                    UnitPrice = 21, Quantity = 52, OrderDate = new DateTime(2021, 10, 1) 
                },
                new Product() { 
                    ProductName = "Longlife Tofu", Country = "USA", City = "Boise", 
                    UnitPrice = 7.75, Quantity = 120, OrderDate = new DateTime(2021, 9, 17) 
                },
                new Product() { 
                    ProductName = "Alice Mutton", Country = "Mexico", City = "México D.F.", 
                    UnitPrice = 21, Quantity = 15, OrderDate = new DateTime(2021, 9, 25) 
                }
            };
            return products;
        }
    }
}

DataModel.vb

Imports System
Imports System.Collections.ObjectModel

Namespace WinUIGetStarted
    Public Class Product
        Public Property ProductName As String
        Public Property Country As String
        Public Property City As String
        Public Property UnitPrice As Double
        Public Property Quantity As Integer
        Public Property OrderDate As DateTime
    End Class

    Public Class ProductsDataModel
        Public Shared Function GetProducts() As ObservableCollection(Of Product)
            Dim products As ObservableCollection(Of Product) = New ObservableCollection(Of Product) From {
                New Product() With { 
                    .ProductName = "Chang", .Country = "UK", .City = "Cowes", 
                    .UnitPrice = 19, .Quantity = 10, .OrderDate = New DateTime(2021, 10, 23) 
                },
                New Product() With { 
                    .ProductName = "Gravad lax", .Country = "Italy", .City = "Reggio Emilia", 
                    .UnitPrice = 12.5, .Quantity = 16, .OrderDate = New DateTime(2021, 10, 22) 
                },
                New Product() With { 
                    .ProductName = "Ravioli Angelo", .Country = "Brazil", .City = "Rio de Janeiro", 
                    .UnitPrice = 19, .Quantity = 12, .OrderDate = New DateTime(2021, 10, 21) 
                },
                New Product() With { 
                    .ProductName = "Tarte au sucre", .Country = "Germany", .City = "Leipzig", 
                    .UnitPrice = 22, .Quantity = 50, .OrderDate = New DateTime(2021, 10, 15) 
                },
                New Product() With { 
                    .ProductName = "Steeleye Stout", .Country = "USA", .City = "Denver", 
                    .UnitPrice = 18, .Quantity = 20, .OrderDate = New DateTime(2021, 10, 8) 
                },
                New Product() With { 
                    .ProductName = "Pavlova", .Country = "Austria", .City = "Graz", 
                    .UnitPrice = 21, .Quantity = 52, .OrderDate = New DateTime(2021, 10, 1) 
                },
                New Product() With { 
                    .ProductName = "Longlife Tofu", .Country = "USA", .City = "Boise", 
                    .UnitPrice = 7.75, .Quantity = 120, .OrderDate = New DateTime(2021, 9, 17) 
                },
                New Product() With { 
                    .ProductName = "Alice Mutton", .Country = "Mexico", .City = "México D.F.", 
                    .UnitPrice = 21, .Quantity = 15, .OrderDate = New DateTime(2021, 9, 25) 
                }
            }
            Return products
        End Function
    End Class
End Namespace

Add a View Model

1. Create a View Model class that receives data from the ProductsDataModel:

   ViewModel.cs

   using DevExpress.Mvvm;
   using System.Collections.ObjectModel;
   
   namespace WinUIGetStarted {
       public class MainViewModel : ViewModelBase {
           public MainViewModel() {
               Source = ProductsDataModel.GetProducts();
           }
           public ObservableCollection<Product> Source { get; }
       }
   }
   

   ViewModel.vb

   Imports DevExpress.Mvvm
   Imports System.Collections.ObjectModel
   
   Namespace WinUIGetStarted
       Public Class MainViewModel
           Inherits ViewModelBase
   
           Public Sub New()
               Source = ProductsDataModel.GetProducts()
           End Sub
   
           Public ReadOnly Property Source As ObservableCollection(Of Product)
       End Class
   End Namespace
   

2. In the MainWindow class, create a new instance of the MainViewModel class:

   MainWindow.xaml.cs

   using Microsoft.UI.Xaml;
   
   namespace WinUIGetStarted {
       public sealed partial class MainWindow : Window {
           public MainViewModel ViewModel { get; } = new MainViewModel();
           public MainWindow() {
               this.InitializeComponent();
           }
       }
   }
   

   MainWindow.xaml.vb

   Imports Microsoft.UI.Xaml
   
   Namespace WinUIGetStarted
       Public NotInheritable Partial Class MainWindow
           Inherits Window
   
           Public ReadOnly Property ViewModel As MainViewModel = New MainViewModel()
   
           Public Sub New()
               Me.InitializeComponent()
           End Sub
       End Class
   End Namespace
   

Add the GridControl and Bind it to Data

1. Add the GridControl to the project.

2. Specify the DataControlBase.ItemsSource property to bind the GridControl to data.

   MainWindow.xaml

   <Window
       x:Class="WinUIGetStarted.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="using:WinUIGetStarted"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
       xmlns:dxg="using:DevExpress.WinUI.Grid"
       mc:Ignorable="d">
       <dxg:GridControl ItemsSource="{x:Bind ViewModel.Source}"/>
   </Window>
   

3. Run the project. The GridControl generates columns for all fields from a bound data source.