使用MVVM将ListView绑定到ObservableCollection

Question

我正在开发一个毛伊岛应用程序。我使用 MVVM 结构和 MVVM 社区工具包来更轻松地生活。现在，我在显示绑定到我的 Viewmodel 中的 ObservableCollection 的 ListView 时遇到了问题。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WaiterEval.Views.UserList"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:vm="clr-namespace:WaiterEval.ViewModels"
             x:DataType="vm:UserList_ViewModel">
    
    <VerticalStackLayout>
        <ListView x:Name="userList" ItemsSource="{Binding Users}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.5*" />
                                <ColumnDefinition Width="0.25*" />
                                <ColumnDefinition Width="0.25*" />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Row="0" Grid.Column="0" Text="{Binding }" />
                            <Label
                        Grid.Row="0"
                        Grid.Column="1"
                        Text="{Binding Test}" />
                            <Label
                        Grid.Row="0"
                        Grid.Column="2"
                        Text="Edited" />


                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>
    </VerticalStackLayout>
</ContentPage>

namespace WaiterEval.ViewModels
{
    public partial class UserList_ViewModel : ObservableObject
    {
        [ObservableProperty]
        public ObservableCollection<User> users = new ObservableCollection<User>();

        private readonly MyDbContext _dbContext;
        public UserList_ViewModel(MyDbContext dbContext)
        {
            _dbContext = dbContext;
            addUsers();
        }

        public async void addUsers()
        {
            try
            {
                Users = new ObservableCollection<User>(await _dbContext.Users.OfType<User>().ToListAsync());
            }
            catch (Exception ex)
            {
                throw new Exception(ex.Message);
            }
        }
    }
}

退出构造函数后，集合将填充数据。

namespace WaiterEval.Views;

public partial class UserList : ContentPage
{
    public UserList(UserList_ViewModel vm)
    {
        InitializeComponent();
        BindingContext = vm;

    }
}

当尝试绑定 ListCell 中的某些内容时，Datacontext 是 ViewModel，而不是应有的 List。我无法访问用户的任何属性。我哪里错了？

Answer 1

x:DataType="vm:UserList_ViewModel"

中的

<ContentPage>

将使ContentPage和子视图绑定到UserList_ViewModel的类型。

您可以为 ListView 的项目 DataTemplate 声明数据类型，以使项目绑定到 User 的类型：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="WaiterEval.Views.UserList"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:vm="clr-namespace:WaiterEval.ViewModels"
             xmlns:models="clr-namespace:WaiterEval.Models" 
             x:DataType="vm:UserList_ViewModel">
    
    <VerticalStackLayout>
        <ListView x:Name="userList" ItemsSource="{Binding Users}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="models:User">
                    ....
                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>
    </VerticalStackLayout>
</ContentPage>