WinUI 3 DataGrid 示範

在 WinUI 3 中並沒有內建 DataGrid 套件，需要使用社群開發的套件(在 .NET 基金會 名下)，不過最近一次更新是 2021-11-18 ，這應該可以算是很重要的功能了，希望 WinUI 3 可以發展更快一點...

安裝套件

先使用 NuGet 安裝 CommunityToolkit.WinUI.UI.Controls.DataGrid 套件，或是使用 .NET CLI 執行以下指令安裝

	
dotnet add package CommunityToolkit.WinUI.UI.Controls.DataGrid
    

測試資料

建立 StudentDto 物件用來儲存範例資料

    
public class StudentDto
{
    public int Id { get; set; }
    public string Name { get; set; }
}
    

在 MainWindow.xaml.cs 中直接建立全域變數存放假資料

    
    public List<StudentDto> Items = new()
    {
        new() { Id = 1, Name = "小明" },
        new() { Id = 2, Name = "大頭" },
        new() { Id = 3, Name = "阿偉" },
        new() { Id = 4, Name = "小花" },
        new() { Id = 5, Name = "小美" },
        new() { Id = 6, Name = "大強" },
        new() { Id = 6, Name = "老王" },
    };
    

xaml 示範

    
<?xml version="1.0" encoding="utf-8"?>

<Window
    x:Class="App1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">

        <controls:DataGrid x:Name="DataGrid" Height="600" Width="600" />

    </StackPanel>
</Window>
    

然後將 DataGrid 綁定資料即可：

    
    public MainWindow()
    {
        this.InitializeComponent();
        
        DataGrid.ItemsSource = Items;
    }
    

執行結果：

C# 動態產生 DataGrid

xaml 是什麼鬼？有夠麻煩，當然也可以直接使用 C# 動態產生 DataGrid

    
    public MainWindow()
    {
        this.InitializeComponent();

        DataGrid dataGrid = new();
        dataGrid.ItemsSource = Items;
        dataGrid.Height = 600;
        dataGrid.Width = 400;
        this.Content = dataGrid;
    }

    

使用起來非常方便，並且資料一修改 List 的資料也會更新。

自訂欄位名稱

通常在程式碼中屬性並不會使用中文，但是在介面上會給使用者看，名稱可能會不一樣，那可以自訂欄位嗎？

只要設定不自動產生欄位，並且一一加入欄位即可，資料也會綁定、自動更新：

    
using CommunityToolkit.WinUI.UI.Controls;
using Microsoft.UI.Xaml.Data;


DataGrid.AutoGenerateColumns = false; // 不要自動產生欄位
DataGrid.Columns.Add(new DataGridTextColumn
{
    Header = "編號",
    Binding = new Binding { Path = new PropertyPath(nameof(StudentDto.Id)) }
});
DataGrid.Columns.Add(new DataGridTextColumn
{
    Header = "姓名",
    Binding = new Binding { Path = new PropertyPath(nameof(StudentDto.Name)) }
});
    

格線

    
DataGrid.GridLinesVisibility = DataGridGridLinesVisibility.None; // 不要顯示格線
    

其他格線樣式顯示範例:

其他常用屬性

    
DataGrid.IsReadOnly = true; // 禁止編輯
    

參考資料：
GitHub - CommunityToolkit/WindowsCommunityToolkit
GitHub - CommunityToolkit/Windows
Microsoft.Learn - How to - Customize the DataGrid control through UI formatting options