能否在.NET MAUI中实现DataGrid行详情展示功能？

要在.NET MAUI的DataGrid里展示主数据并展开显示关联详情，你可以用CommunityToolkit.Maui.DataGrid控件来实现，下面是具体步骤：

1. 安装必要的NuGet包 #

需要安装两个核心包：

• CommunityToolkit.Maui：MAUI社区工具包核心组件
• CommunityToolkit.Maui.DataGrid：DataGrid专用控件

可以通过NuGet包管理器搜索安装，或者在Package Manager Console执行命令：

Install-Package CommunityToolkit.Maui
Install-Package CommunityToolkit.Maui.DataGrid

2. 初始化社区工具包 #

在项目的MauiProgram.cs中添加工具包初始化代码，确保控件能正常工作：

using CommunityToolkit.Maui;

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    .UseMauiCommunityToolkit() // 初始化社区工具包
    .ConfigureFonts(fonts =>
    {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    });

return builder.Build();

3. 创建数据模型 #

定义主数据模型和关联详情模型，示例用订单和订单明细：

using CommunityToolkit.Mvvm.ComponentModel;

// 主数据模型：订单
public partial class Order : ObservableObject
{
    [ObservableProperty]
    int id;

    [ObservableProperty]
    string customerName;

    [ObservableProperty]
    DateTime orderDate;

    // 关联的订单明细数据
    public List<OrderDetail> OrderDetails { get; set; } = new();
}

// 详情模型：订单明细
public class OrderDetail
{
    public string ProductName { get; set; }
    public int Quantity { get; set; }
    public decimal Price { get; set; }
}

4. 创建ViewModel #

基于ObservableObject实现ViewModel，提供数据源和测试数据：

using CommunityToolkit.Mvvm.ComponentModel;
using System.Collections.ObjectModel;

public partial class OrderViewModel : ObservableObject
{
    public ObservableCollection<Order> Orders { get; set; } = new();

    public OrderViewModel()
    {
        // 初始化测试数据
        Orders.Add(new Order
        {
            Id = 1,
            CustomerName = "张三",
            OrderDate = new DateTime(2024, 5, 1),
            OrderDetails = new List<OrderDetail>
            {
                new() { ProductName = "手机", Quantity = 1, Price = 3999 },
                new() { ProductName = "耳机", Quantity = 2, Price = 299 }
            }
        });

        Orders.Add(new Order
        {
            Id = 2,
            CustomerName = "李四",
            OrderDate = new DateTime(2024, 5, 2),
            OrderDetails = new List<OrderDetail>
            {
                new() { ProductName = "笔记本", Quantity = 1, Price = 6999 },
                new() { ProductName = "鼠标", Quantity = 1, Price = 199 }
            }
        });
    }
}

5. 编写XAML布局 #

在页面XAML中配置DataGrid，添加行详情模板：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:local="clr-namespace:YourNamespace"
             x:Class="YourNamespace.OrderPage"
             Title="订单列表">

    <ContentPage.BindingContext>
        <local:OrderViewModel />
    </ContentPage.BindingContext>

    <toolkit:DataGrid ItemsSource="{Binding Orders}"
                      RowHeight="70"
                      IsRowDetailsVisibleTap="True"> <!-- 点击行切换详情展开/收起 -->

        <!-- 定义DataGrid列 -->
        <toolkit:DataGrid.Columns>
            <toolkit:DataGridTextColumn Header="订单ID"
                                        Binding="{Binding Id}"
                                        Width="0.2*" />
            <toolkit:DataGridTextColumn Header="客户名称"
                                        Binding="{Binding CustomerName}"
                                        Width="0.3*" />
            <toolkit:DataGridTextColumn Header="下单日期"
                                        Binding="{Binding OrderDate, StringFormat='{0:yyyy-MM-dd}'}"
                                        Width="0.3*" />
        </toolkit:DataGrid.Columns>

        <!-- 行详情模板：展示关联的订单明细 -->
        <toolkit:DataGrid.RowDetailsTemplate>
            <DataTemplate>
                <CollectionView ItemsSource="{Binding OrderDetails}"
                                Margin="10"
                                BackgroundColor="#F5F5F5">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Grid ColumnDefinitions="0.4*,0.2*,0.4*"
                                  Padding="5">
                                <Label Grid.Column="0"
                                       Text="{Binding ProductName}" />
                                <Label Grid.Column="1"
                                       Text="{Binding Quantity}"
                                       HorizontalTextAlignment="Center" />
                                <Label Grid.Column="2"
                                       Text="{Binding Price, StringFormat='￥{0:F2}'}"
                                       HorizontalTextAlignment="End" />
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </DataTemplate>
        </toolkit:DataGrid.RowDetailsTemplate>

    </toolkit:DataGrid>
</ContentPage>

关键说明 #

• IsRowDetailsVisibleTap="True"：开启点击行切换详情展开/收起的交互
• RowDetailsTemplate：自定义行展开后显示的内容，这里用CollectionView渲染关联明细
• 数据绑定：主数据的OrderDetails属性直接绑定到详情区域的数据源，自动关联展示对应数据

运行项目后，点击DataGrid的任意行即可展开显示关联详情，和你提供的参考效果一致。

内容的提问来源于stack exchange，提问作者HeisenbergsMeth