WinUI 3 CommunityToolkit Datagrid 在使用 CommunityToolkit.Mvvm 時顯示來自兩個模型的數據

Question

我的數據訪問層中有兩個模型：Table1 和 Table2。

我想使用 CommunityToolkit 中的 WinUI 3 DataGrid 來顯示每個表中的兩列：Table1.ColumnA、Table1.ColumnB、Table2.ColumnC、Table2.ColumnD

我的想法是在我的 ViewModel class 中使用 linq 來加入每個 model 的可枚舉：

IEnumerable<Table1> table1 = unitOfWorkDbGlobal.Table1.GetAll().ToList();
IEnumerable<Table2> table2 = unitOfWorkDbGlobal.Table2.GetAll().ToList();

                var JoinedTables = (from t1 in table1
                                join t2 in table2 on t1.TestGuid equals t2.TestGuid
                                select new
                                { t1.ColumnA, t1.ColumnB, 
                                t2.ColumnC, t2.ColumnD });

這種方法出現的問題是，我可以根據需要使用 table1 或 table2 創建 CommunityToolkit.Mvvm [ObservableProperty] ，但我無法使用 join 創建可觀察屬性，因為我使用的是 var 類型。 當我使用JoinedTables.GetType().Name來確定顯式類型時，它返回一個Enumerable<JoinIterator>d__122 4類型，這似乎是計算機官話無法用作屬性類型。

[ObservableProperty]
private ObservableCollection<Table1>? _table1Collection; //this works

[ObservableProperty]
private Enumerable<JoinIterator> d__122`4 _joinedTables; //Errors

如何將聯接表制作成可以在 XAML 中綁定到 CommunityToolkit DataGrid 的 ObservableProperty。

這是我想使用的 XAML 的示例（注意ViewModel在代碼隱藏中分配為 class 以及我在上面添加的代碼）：

        <controls:DataGrid x:Name="MyDataGrid"
        AutoGenerateColumns="False"
        ItemsSource="{x:Bind ViewModel.JoinedTables, Mode=OneWay}">
            <controls:DataGrid.Columns>
                <controls:DataGridTextColumn 
                Header="Column A" 
                Width="250"
                Binding="{Binding ColumnA}" 
                FontSize="14" />
                <controls:DataGridTextColumn 
                Header="Column B" 
                Width="250"
                Binding="{Binding ColumnB}" 
                FontSize="14" />
                <controls:DataGridTextColumn 
                Header="Column C" 
                Width="250"
                Binding="{Binding ColumnC}" 
                FontSize="14" />
                <controls:DataGridTextColumn 
                Header="Column D" 
                Width="250"
                Binding="{Binding ColumnD}" 
                FontSize="14" />
            </controls:DataGrid.Columns>
        </controls:DataGrid>

Answer 1

您需要為連接的表創建一個類型。 像這樣的東西。

ViewModel.cs

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

namespace DataGridTests;

public class Table1
{
    public int Id { get; set; }
    public string ColumnA { get; set; } = string.Empty;
    public string ColumnB { get; set; } = string.Empty;
}

public class Table2
{
    public int Id { get; set; }
    public string ColumnC { get; set; } = string.Empty;
    public string ColumnD { get; set; } = string.Empty;
}

public partial class JoinedTable : ObservableObject
{
    [ObservableProperty]
    private string columnA = string.Empty;

    partial void OnColumnAChanged(string value)
    {
        // Update database.
    }

    public string ColumnB { get; set; } = string.Empty;

    public string ColumnC { get; set; } = string.Empty;
    public string ColumnD { get; set; } = string.Empty;
}

public partial class MainWindowViewModel : ObservableObject
{
    [ObservableProperty]
    private ObservableCollection<JoinedTable> joinedTables = new();

    public MainWindowViewModel()
    {
        IEnumerable<JoinedTable> joinedTablesSource = Table1.Join(
            Table2,
            table1 => table1.Id,
            table2 => table2.Id,
            (table1, table2) => new JoinedTable()
            {
                ColumnA = table1.ColumnA,
                ColumnB = table1.ColumnB,
                ColumnC = table2.ColumnC,
                ColumnD = table2.ColumnD,
            });

        JoinedTables = new ObservableCollection<JoinedTable>(joinedTablesSource);
    }

    private ObservableCollection<Table1> Table1 { get; set; } = new()
    {
        {new Table1() { Id = 1, ColumnA="Table1-A-1", ColumnB="Table1-B-1" } },
        {new Table1() { Id = 2, ColumnA="Table1-A-2", ColumnB="Table1-B-2" } },
        {new Table1() { Id = 3, ColumnA="Table1-A-3", ColumnB="Table1-B-3" } },
    };

    private ObservableCollection<Table2> Table2 { get; set; } = new()
    {
        {new Table2() { Id = 1, ColumnC="Table2-C-1", ColumnD="Table2-D-1" } },
        {new Table2() { Id = 20, ColumnC="Table2-C-2", ColumnD="Table2-D-2" } },
        {new Table2() { Id = 3, ColumnC="Table2-C-3", ColumnD="Table2-D-3" } },
    };
}

.xaml

<toolkit:DataGrid ItemsSource="{x:Bind ViewModel.JoinedTables, Mode=OneWay}">
    <toolkit:DataGrid.Columns>
        <toolkit:DataGridTextColumn
            Binding="{Binding ColumnA, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
            Header="A"
            IsReadOnly="False" />
        <toolkit:DataGridTextColumn
            Binding="{Binding ColumnB}"
            Header="B" />
        <toolkit:DataGridTextColumn
            Binding="{Binding ColumnC}"
            Header="C" />
        <toolkit:DataGridTextColumn
            Binding="{Binding ColumnD}"
            Header="D" />
    </toolkit:DataGrid.Columns>
</toolkit:DataGrid>