如何访问 ObservableCollection 模型属性以在 shell 弹出窗口中进行数据绑定？

Question

我正在创建我的第一个 MAUI 应用程序，它是一个术语跟踪器（带有社区工具包 MVVM）。我已手动向数据库添加了一些术语，并且正在尝试让它们以飞出方式显示。我已经能够让它们显示在飞出中，但我在将术语名称获取到数据绑定时遇到问题，并且收到错误：

绑定：在 TermTracker.ViewModel.TermViewModel 上找不到属性“名称”

这是我所有的相关文件。

使用 SQLite 的术语模型。

using SQLite;


namespace TermTracker.Model;

[Table("Terms")]
public class Term
{
    [PrimaryKey, AutoIncrement]
    public int Id { get; set; }
    public string? Name { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
}

获取术语并将术语模型放入 ObservableCollection 中并返回它

using System;
using System.Collections.ObjectModel;
using System.Threading.Tasks;

namespace TermTracker.Model
{
    public static class TermRepository
    {
        public static async Task<ObservableCollection<Term>> GetTerms()
        {
            var db = LocalDatabase.GetConnection();
            var terms = new ObservableCollection<Term>();

            var queryResult = await db.QueryAsync<Term>("SELECT * FROM Terms");

            foreach (var term in queryResult)
            {
                terms.Add(new Term
                {
                    Name = term.Name,
                    StartDate = term.StartDate,
                    EndDate = term.EndDate
                });
            }

            return terms;
        }
    }
}

添加DI相关项目

using Microsoft.Extensions.Logging;
using TermTracker.Model;
using TermTracker.View;
using TermTracker.ViewModel;

namespace TermTracker
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                });

            builder.Services.AddTransient<AppShell>();
            builder.Services.AddTransient<TermViewModel>();

#if DEBUG
            builder.Logging.AddDebug();
#endif

            return builder.Build();
        }
    }
}

将绑定上下文设置为 TermViewModel

using TermTracker.Model;
using TermTracker.View;
using TermTracker.ViewModel;

namespace TermTracker
{
    public partial class AppShell : Shell
    {
        public AppShell(TermViewModel viewModel)
        {
            InitializeComponent();
            BindingContext = viewModel;
            Routing.RegisterRoute(nameof(AddTermPage), typeof(AddTermPage));
        }
    }
}

添加视图模型、数据类型并设置我的弹出菜单。

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="TermTracker.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TermTracker"
    xmlns:view="clr-namespace:TermTracker.View"
    xmlns:viewModel="clr-namespace:TermTracker.ViewModel"
    x:DataType="viewModel:TermViewModel"
    Shell.FlyoutBehavior="Flyout"
    Title="TermTracker">

    <Shell.Resources>
        <DataTemplate x:Key="FlyoutTermTemplate">
            <TextCell Text="{Binding Name}"/> 

This is where the problem is. Terms.Name doesn't work either. I want the text of the flyout item to be the name of the term model in the observable collection.

Oddly, when I do Binding Name when the app is running and it hotloads, it works but when I stop/try to restart my app I get the error. 

        </DataTemplate>
    </Shell.Resources>

    <Shell.FlyoutContentTemplate>
        <DataTemplate>
            <ListView 
                ItemsSource="{Binding Terms}" 
                ItemTemplate="{StaticResource FlyoutTermTemplate}"/>
        </DataTemplate>
    </Shell.FlyoutContentTemplate>

    <ShellContent Title="Home"
                  ContentTemplate="{DataTemplate view:MainPage}"
                  Route="MainPage"/>

</Shell>

感谢您查看我的问题。这是我的第一篇文章！

我尝试设置相对路径、祖先，尝试访问可观察集合中的术语属性。似乎无法让它工作。

Answer 1

您可以尝试为DataTemplate设置

x:DataType

。如：

<Shell
    x:Class="TermTracker.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TermTracker"
    xmlns:view="clr-namespace:TermTracker.View" 
    xmlns:model="clr-namespace:TermTracker.Model" 
    xmlns:viewModel="clr-namespace:TermTracker.ViewModel"
    x:DataType="viewModel:TermViewModel"
    Shell.FlyoutBehavior="Flyout"
    Title="TermTracker">

    <Shell.Resources>
        <DataTemplate x:DataType="model:Term" x:Key="FlyoutTermTemplate">
            <TextCell Text="{Binding Name}"/>