如何动态地将项目添加到基于XAML列表的ListView ?

Question

我试图创建一个<ListView>与XAML。该列表应该显示Task类列表的内容。

taskView.ItemsSource = company.tasks;

我使用的XAML版本是MAUI上考虑的版本，因此大多数教程显示的元素都不包括在所使用的XAML版本中。

我试着这样做:

<ListView x:Name="taskView"
Margin="120,0,0,60"
ItemsSource="{Binding tasks}"
ItemSelected="taskView_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding name}"/>
<TextCell Text="{Binding status}"/>
<TextCell Text="{Binding dedaline}"/>
<TextCell Text="{Binding description}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

但它没有工作。它既不会打开应用程序，也不会抛出异常。

如果我只留下一个<TextCell>，它打开并显示(只有名称)。我怎样才能显示更多的细节?

这是Task类:

public class Task
{
public Task(string name, List<string> departments, Status status, DateOnly deadline, string description)
{
this.name = name;
this.departments = departments;
this.status = status;
this.deadline = deadline;
this.description = description;
}
public string name { get; private set; }
public List<string> departments { get; private set; } = new List<string>();
public Status status { get; private set; }
public DateOnly deadline { get; private set; }
public Employee? author { get; set; }
public string description { get; private set; }
public List<Employee> employees { get; private set; } = new List<Employee>();
}

我对XAML相当陌生，坦率地感谢您的帮助。谢谢你。

Answer 1

先说一件无关紧要的事。课程"任务"可能会导致问题，因为您已经在。net中使用了System.Threading.Task。

你不应该像@Jason说的那样，为了同样的目的，将ListView(或CollectionView)绑定两次。

XAML文件

<ContentPage
x:Class="MauiApp.MainPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:models="clr-namespace:MauiApp.Models"
xmlns:views="clr-namespace:MauiApp.Views"
x:DataType="views:MainPage">
<CollectionView            
ItemsSource="{Binding Tasks}">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:Task">
<VerticalStackLayout Margin="15">
<Entry Text="{Binding name}" />
<Entry Text="{Binding status}" />
<Entry Text="{Binding deadline}" />
<Entry Text="{Binding description}" />
</VerticalStackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ContentPage>

检查XML名称空间(xmlns)。我假设你在"模型"中有你的任务模型。文件夹和你的视图在" views "文件夹中。您需要此导入，因为您的内容页的数据类型与MainPage绑定，但您的CollectionView与Task类绑定。

在DataTemplate中你只能有一个项目。因此，您应该选择一个容器项，如本答案中的VerticalStackLayout。

类文件

public partial class MainPage : ContentPage
{
public ObservableCollection<Task> Tasks { get; set; } = new ObservableCollection<Task>();
public MainPage()
{
InitializeComponent();
BindingContext = this;
Tasks.Add(new Task("task 1", new List<string>() { "dep1", "dep2" }, "status 1", DateOnly.MinValue, "description 1"));
Tasks.Add(new Task("task 2", new List<string>() { "dep3", "dep4" }, "status 2", DateOnly.MinValue, "description 2"));
}
}

在你的类中，你可以使用ObservableCollection，你必须绑定上下文与BindingContext = this;

如果你正在使用MVVM，那么你可以将它绑定到你的ViewModel。

这应该工作如预期，虽然你可能需要类OnPropertyChanged如果需要。

Answer 2

ListView的DataTemplate只能包含单个子元素。如果你想有多个数据元素，使用ViewCell而不是TextCell，并构建自己的自定义布局

<ViewCell>
<StackLayout BackgroundColor="#eee"
Orientation="Vertical">
<StackLayout Orientation="Horizontal">
<Image Source="{Binding image}" />
<Label Text="{Binding title}"
TextColor="#f35e20" />
<Label Text="{Binding subtitle}" HorizontalOptions="EndAndExpand"
TextColor="#503026" />
</StackLayout>
</StackLayout>
</ViewCell>