.NET MAUI中如何在XAML ContentPage展示DataTable查询结果的条目

嘿，我来帮你搞定在MAUI的XAML页面里展示DataTable查询结果的问题！看你之前贴的XAML代码没写完，我给你一套完整的实操方案，一步步来肯定能成～

第一步：把DataTable转成强类型可绑定集合 #

MAUI的数据绑定对强类型集合更友好，直接用DataTable绑控件会有不少坑，所以咱们先把查询出来的DataTable转成对应产品的强类型集合。

首先先定义一个Product类，对应你DataTable里的字段，比如你的产品有ID、名称、价格、库存这些，就这么写：

public class Product
{
    public int ProductId { get; set; }
    public string ProductName { get; set; }
    public decimal Price { get; set; }
    public int StockQuantity { get; set; }
    // 这里根据你实际的DataTable列，把所有要展示的字段都加上
}

然后写个转换方法，把DataTable的每一行转成Product对象，再放到ObservableCollection里（这个集合自带通知UI更新的能力）：

private ObservableCollection<Product> ConvertDataTableToProducts(DataTable dataTable)
{
    var productList = new ObservableCollection<Product>();
    foreach (DataRow row in dataTable.Rows)
    {
        productList.Add(new Product
        {
            ProductId = Convert.ToInt32(row["ProductId"]),
            ProductName = row["ProductName"].ToString(),
            Price = Convert.ToDecimal(row["Price"]),
            StockQuantity = Convert.ToInt32(row["StockQuantity"])
            // 这里的键名要和你DataTable里的列名完全对应哦
        });
    }
    return productList;
}

第二步：在页面里准备好数据源 #

接下来在你的DettagliProdotto页面的后台代码（或者ViewModel里，用MVVM的话更推荐）里，把转换好的集合设为绑定源：

如果用代码-behind（快速上手）： #

using System.Collections.ObjectModel;
using System.Data;

namespace TestAppMagazzino;

public partial class DettagliProdotto : ContentPage
{
    // 定义可绑定的产品集合
    public ObservableCollection<Product> Products { get; set; }

    public DettagliProdotto()
    {
        InitializeComponent();
        // 这里替换成你实际查询DataTable的代码
        DataTable productTable = GetProductDataFromQuery();
        // 转成可绑定集合
        Products = ConvertDataTableToProducts(productTable);
        // 把当前页面设为绑定上下文
        BindingContext = this;
    }

    // 模拟你的数据查询方法，实际换成你自己的逻辑
    private DataTable GetProductDataFromQuery()
    {
        var dt = new DataTable();
        dt.Columns.Add("ProductId", typeof(int));
        dt.Columns.Add("ProductName", typeof(string));
        dt.Columns.Add("Price", typeof(decimal));
        dt.Columns.Add("StockQuantity", typeof(int));
        // 加测试数据，实际替换成你的查询结果
        dt.Rows.Add(1, "无线蓝牙耳机", 199.99, 50);
        dt.Rows.Add(2, "快充充电头", 69.9, 200);
        return dt;
    }
}

要是用MVVM模式（更规范）： #

记得让ViewModel实现INotifyPropertyChanged接口，把Products集合放到ViewModel里，然后把ViewModel设为页面的BindingContext，这样数据更新时UI会自动同步，新手可以先从代码-behind入手，熟练了再转MVVM～

第三步：写XAML的展示控件 #

最后就是在你的XAML页面里，用CollectionView（MAUI里推荐用这个，比ListView更灵活）来展示每个产品的信息：

<?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"
             x:Class="TestAppMagazzino.DettagliProdotto"
             Title="DettagliProdotto">

    <!-- CollectionView绑定我们定义的Products集合 -->
    <CollectionView ItemsSource="{Binding Products}">
        <!-- 每个产品的展示模板 -->
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <!-- 用Frame给每个产品加个卡片样式，看着更美观 -->
                <Frame Margin="10" Padding="15" CornerRadius="8" ShadowOpacity="0.3">
                    <VerticalStackLayout>
                        <Label Text="{Binding ProductName}" FontSize="Large" FontAttributes="Bold" />
                        <Label Text="产品ID：{Binding ProductId}" FontSize="Small" TextColor="Gray" Margin="0,2,0,0"/>
                        <Label Text="价格：{Binding Price, StringFormat='{0:C}'}" Margin="0,5,0,0"/>
                        <Label Text="库存：{Binding StockQuantity} 件" Margin="0,5,0,0"/>
                        <!-- 这里可以继续添加你要展示的其他产品字段，对应Product类的属性就行 -->
                    </VerticalStackLayout>
                </Frame>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

一些小提示 #

• 要是你的DataTable列特别多，手动写转换方法麻烦，可以用反射来自动映射字段，不过手动写的话出错概率更低，适合新手
• 要是想给列表加下拉刷新、上拉加载，直接给CollectionView加RefreshView就行，这个是MAUI自带的功能
• 要是需要展示更复杂的布局，比如多列网格，把ItemTemplate里的VerticalStackLayout换成Grid就行

备注：内容来源于stack exchange，提问作者DigioMatthy