Lesson 1: Add a GridControl to your Project
- 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:
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;
}
}
}
#Add a View Model
Create a View Model class that receives data from the ProductsDataModel:
using DevExpress.Mvvm; using System.Collections.ObjectModel; namespace WinUIGetStarted { public class MainViewModel : ViewModelBase { public MainViewModel() { Source = ProductsDataModel.GetProducts(); } public ObservableCollection<Product> Source { get; } } }
In the MainWindow class, create a new instance of the MainViewModel class:
using Microsoft.UI.Xaml; namespace WinUIGetStarted { public sealed partial class MainWindow : Window { public MainViewModel ViewModel { get; } = new MainViewModel(); public MainWindow() { this.InitializeComponent(); } } }
#Add the GridControl and Bind it to Data
Add the GridControl to the project.
Specify the DataControlBase.ItemsSource property to bind the GridControl to data.
<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>
Run the project. The GridControl generates columns for all fields from a bound data source.