Syncfusion SfListView绑定ObservableCollection（Xamarin）问题求助

我在开发Xamarin移动端应用时，遇到Syncfusion SfListView控件绑定ObservableCollection的问题。已确认从WebAPI拉取数据的流程正常，但ListView无法显示数据。我不想使用ViewModel，尝试直接绑定集合，请问哪里出错了？

XAML 代码 #

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:nscMobileApp="clr-namespace:NSC_MobileApp;assembly=NSC_MobileApp"
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="NSC_MobileApp.Views.PracticeList">
    <syncfusion:SfListView x:Name="ListOfPractices" ItemsSource="{Binding Practices}">

    <syncfusion:SfListView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.4*" />
                    <RowDefinition Height="0.6*" />
                </Grid.RowDefinitions>
                <Label Text="{Binding Name}" FontAttributes="Bold" TextColor="Teal" FontSize="21" />
                <Label Grid.Row="1" Text="{Binding Address}" TextColor="Teal" FontSize="15"/>
            </Grid>
        </DataTemplate>
    </syncfusion:SfListView.ItemTemplate>

    </syncfusion:SfListView>
</ContentPage>

Model 代码 #

namespace NSC_MobileApp
{
    [Table("Practices")] //Table Name
    public class Practices
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public string ContactName { get; set; }
        public string ContactAddress { get; set; }
        public string ContactEmail { get; set; }

        public int? Milage { get; set; }
    }
}

View 代码 #

using Newtonsoft.Json;
using Syncfusion.ListView.XForms;
using Syncfusion.SfCalendar.XForms;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace NSC_MobileApp.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class PracticeList : ContentPage
    {
        private const string URL = "https://XXXXXX/Practices";
        private HttpClient _client = new HttpClient();
        public ObservableCollection<Practices> Opractices;

        public PracticeList()
        {
            InitializeComponent();
        }

        protected override async void OnAppearing()
        {
            var content = await _client.GetStringAsync(URL);
            var posts = JsonConvert.DeserializeObject<List<Practices>>(content);
            Opractices = new ObservableCollection<Practices>(posts);
        }
    }
}

解决方法 #

你遗漏了三个关键要点：

• 绑定名称不匹配+字段无法绑定：XAML中ItemsSource="{Binding Practices}"，但View里的集合是名为Opractices的字段，数据绑定只能访问公共属性，不能直接绑定字段。
• 未设置BindingContext：要让ListView绑定到页面自身的属性，需要在页面构造函数中添加BindingContext = this;，告诉控件去哪里找绑定的属性。
• 集合赋值需通知UI变更：如果后续会重新赋值集合，需要让属性实现INotifyPropertyChanged接口，确保UI能感知到集合的替换。

修改后的View代码如下：

using Newtonsoft.Json;
using Syncfusion.ListView.XForms;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Net.Http;
using System.Runtime.CompilerServices;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace NSC_MobileApp.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class PracticeList : ContentPage, INotifyPropertyChanged
    {
        private const string URL = "https://XXXXXX/Practices";
        private HttpClient _client = new HttpClient();
        
        private ObservableCollection<Practices> _practices;
        public ObservableCollection<Practices> Practices
        {
            get => _practices;
            set
            {
                _practices = value;
                OnPropertyChanged();
            }
        }

        public PracticeList()
        {
            InitializeComponent();
            BindingContext = this;
            Practices = new ObservableCollection<Practices>();
        }

        protected override async void OnAppearing()
        {
            base.OnAppearing();
            var content = await _client.GetStringAsync(URL);
            var posts = JsonConvert.DeserializeObject<List<Practices>>(content);
            
            Practices = new ObservableCollection<Practices>(posts);
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

内容的提问来源于stack exchange，提问作者Chris Smith