为什么这个 ListView 没有绑定 ObservableCollection 元素？

Question

我正在尝试将 ListView 与可观察的集合数据绑定，但它仍然是空的。 我有一些断点，可以看到 ListaProfissionais(Observable collection) 已正确填充。 下面你可以看到我的 .cs 和 .xaml 代码（重要的部分）。 有没有人看到这里有什么问题？

using System.ComponentModel;

public class Profissionais : INotifyPropertyChanged
{
    private string id;
    public string Id
    {
        get { return this.id; }
        set
        {
            if (this.id != value)
            {
                this.id = value;
                this.NotifyPropertyChanged("Id");
            }
        }
    }

    private string categoria;
    public string Categoria
    {
        get { return this.categoria; }
        set
        {
            if (this.categoria != value)
            {
                this.categoria = value;
                this.NotifyPropertyChanged("Categoria");
            }
        }
    }

    private string titulo;
    public string Titulo
    {
        get { return this.titulo; }
        set
        {
            if (this.titulo != value)
            {
                this.titulo = value;
                this.NotifyPropertyChanged("Titulo");
            }
        }
    }

    private string fotoperfil;
    public string FotoPerfil
    {
        get { return this.fotoperfil; }
        set
        {
            if (this.fotoperfil != value)
            {
                this.fotoperfil = value;
                this.NotifyPropertyChanged("FotoPerfil");
            }
        }
    }

    private string endereco;
    public string Endereco
    {
        get { return this.endereco; }
        set
        {
            if (this.endereco != value)
            {
                this.endereco = value;
                this.NotifyPropertyChanged("Endereco");
            }
        }
    }

    private string distancia;
    public string Distancia
    {
        get { return this.distancia; }
        set
        {
            if (this.distancia != value)
            {
                this.distancia = value;
                this.NotifyPropertyChanged("Distancia");
            }
        }
    }

    private string sexo;
    public string Sexo
    {
        get { return this.sexo; }
        set
        {
            if (this.sexo != value)
            {
                this.sexo = value;
                this.NotifyPropertyChanged("Sexo");
            }
        }
    }


    public event PropertyChangedEventHandler PropertyChanged;

    public void NotifyPropertyChanged(string propName)
    {
        if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(propName));
    }

}



public static ObservableCollection<Profissionais> ListaProfissionais = new ObservableCollection<Profissionais>();


try
{
   using (WebClient client = new WebClient())
   {
      Uri uri = new Uri("xxxx.xxxxx.php");
      byte[] retorno = await client.UploadValuesTaskAsync(uri, DataSend);
      string resultado = System.Text.Encoding.UTF8.GetString(retorno);
      ListaProfissionais = JsonConvert.DeserializeObject<ObservableCollection<Profissionais>>(resultado);

   }
}
catch
{
  throw;
}
finally
{
  ListViewProfissionais.ItemsSource = ListaProfissionais; 
  // crashes here but I can see that ItemsSource has the 4 elements as expected
}

我的 XAML：

<ListView x:Name="ListViewProfissionais" x:FieldModifier="public static" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never" BackgroundColor="Transparent" SeparatorColor="Transparent">
      <ListView.ItemTemplate>
         <DataTemplate>
            <Frame HasShadow="True" CornerRadius="5" HeightRequest="215" Margin="8" Padding="4" BackgroundColor="White">
               <Grid>
                 <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                 </Grid.ColumnDefinitions>

                 <Grid.RowDefinitions>
                    <RowDefinition Height="15"></RowDefinition>
                    <RowDefinition Height="25"></RowDefinition>
                    <RowDefinition Height="105"></RowDefinition>
                    <RowDefinition Height="25"></RowDefinition>
                    <RowDefinition Height="25"></RowDefinition>
                 </Grid.RowDefinitions>

                 <Label Text="{Binding Categoria}" TextColor="#8e8e8e" FontSize="10" Grid.Column="0" Grid.Row="0" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Margin="2,0,0,0"></Label>
                 <Label Text="{Binding Titulo}" FontAttributes="Bold" TextColor="#337760" FontSize="14" Grid.Column="0" Grid.Row="1" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Margin="2,0,0,0"></Label>

                <Frame Grid.Column="0" Grid.Row="2" BackgroundColor="Transparent" CornerRadius="4" Padding="0" Margin="0">
                <Image Source="{Binding FotoPerfil}" HorizontalOptions="FillAndExpand" Aspect="AspectFill" VerticalOptions="FillAndExpand" />
                 </Frame>

                 <Label Text="{Binding Endereco}" TextColor="#8e8e8e" FontSize="10" Grid.Column="0" Grid.Row="3" VerticalOptions="EndAndExpand" HorizontalOptions="StartAndExpand"></Label>
                  <Label Text="&#xf3c5;" Grid.Column="0" Grid.Row="4" FontSize="10" HorizontalOptions="StartAndExpand" TextColor="#ff9000" Padding="0,6,0,0">
                   <Label.FontFamily>
                     <OnPlatform x:TypeArguments="x:String" Android="Font-Awesome-Free-Solid.otf#FontAwesome5Free-Solid" iOS="FontAwesome5Free-Solid" />
                   </Label.FontFamily>
                  </Label>
                  <Label Text="{Binding Distancia}" TextColor="#ff9000" FontSize="10" Grid.Column="0" Grid.Row="4" VerticalOptions="Center" HorizontalOptions="StartAndExpand" Margin="10,0,0,0"></Label>
               </Grid>
            </Frame>
         </DataTemplate>
       </ListView.ItemTemplate>
  </ListView>

它崩溃并显示消息“System.InvalidCastException: Specified cast is not valid.”。 见下文：

System.InvalidCastException: Specified cast is not valid.
  at at (wrapper castclass) System.Object.__castclass_with_cache(object,intptr,intptr)
  at Xamarin.Forms.Internals.TemplatedItemsList`2[TView,TItem].ActivateContent (System.Int32 index, System.Object item) [0x00000] in D:\a\1\s\Xamarin.Forms.Core\TemplatedItemsList.cs:534
  at Xamarin.Forms.Internals.TemplatedItemsList`2[TView,TItem].CreateContent (System.Int32 index, System.Object item, System.Boolean insert) [0x00000] in D:\a\1\s\Xamarin.Forms.Core\TemplatedItemsList.cs:543
  at Xamarin.Forms.Internals.TemplatedItemsList`2[TView,TItem].GetOrCreateContent (System.Int32 index, System.Object item) [0x00023] in D:\a\1\s\Xamarin.Forms.Core\TemplatedItemsList.cs:602
  at Xamarin.Forms.Internals.TemplatedItemsList`2[TView,TItem].get_Item (System.Int32 index) [0x00000] in D:\a\1\s\Xamarin.Forms.Core\TemplatedItemsList.cs:337
  at Xamarin.Forms.Platform.Android.ListViewAdapter.GetCellsFromPosition (System.Int32 position, System.Int32 take) [0x0003b] in D:\a\1\s\Xamarin.Forms.Platform.Android\Renderers\ListViewAdapter.cs:539
  at Xamarin.Forms.Platform.Android.ListViewAdapter.GetCellForPosition (System.Int32 position) [0x00000] in D:\a\1\s\Xamarin.Forms.Platform.Android\Renderers\ListViewAdapter.cs:454
  at Xamarin.Forms.Platform.Android.ListViewAdapter.GetView (System.Int32 position, Android.Views.View convertView, Android.Views.ViewGroup parent) [0x0006d] in D:\a\1\s\Xamarin.Forms.Platform.Android\Renderers\ListViewAdapter.cs:225
  at Android.Widget.BaseAdapter.n_GetView_ILandroid_view_View_Landroid_view_ViewGroup_ (System.IntPtr jnienv, System.IntPtr native__this, System.Int32 position, System.IntPtr native_convertView, System.IntPtr native_parent) [0x0001a] in <11f101b564894ca7af6c482ddc51c698>:0
  at at (wrapper dynamic-method) Android.Runtime.DynamicMethodNameCounter.74(intptr,intptr,int,intptr,intptr)

Answer 1

更新 - 2020 年 1 月 25 日

我有时间再次检查您的代码并发现您将模板直接放在 DataTemplate 中（这在 ListView 中是不可能的）。 你已经发布了你自己找到的（干得好！）。

我将要使用的修复程序留在这里，请您指出以下几点：

XAML

<?xml version="1.0" encoding="utf-8"?>
<ContentPage
    x:Name="myPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="Playground.MainPage">
    <ListView
        ItemsSource="{Binding ListaProfissionais, Source={x:Reference myPage}}"
        x:Name="ListViewProfissionais" HorizontalOptions="FillAndExpand"
        HasUnevenRows="True"
        VerticalOptions="FillAndExpand"
        VerticalScrollBarVisibility="Never"
        HorizontalScrollBarVisibility="Never"
        BackgroundColor="Transparent"
        SeparatorColor="Transparent">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <Frame HasShadow="True" CornerRadius="5" HeightRequest="215" Margin="8" Padding="4" BackgroundColor="White">
              <Grid>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                  <RowDefinition Height="15"></RowDefinition>
                  <RowDefinition Height="25"></RowDefinition>
                  <RowDefinition Height="105"></RowDefinition>
                  <RowDefinition Height="25"></RowDefinition>
                  <RowDefinition Height="25"></RowDefinition>
                </Grid.RowDefinitions>
                <Label Text="{Binding Categoria}" TextColor="#8e8e8e" FontSize="10" Grid.Column="0" Grid.Row="0" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Margin="2,0,0,0"></Label>
                <Label Text="{Binding Titulo}" FontAttributes="Bold" TextColor="#337760" FontSize="14" Grid.Column="0" Grid.Row="1" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" Margin="2,0,0,0"></Label>
                <Frame Grid.Column="0" Grid.Row="2" BackgroundColor="Transparent" CornerRadius="4" Padding="0" Margin="0">
                    <Image Source="{Binding FotoPerfil}" HorizontalOptions="FillAndExpand" Aspect="AspectFill" VerticalOptions="FillAndExpand" />
                </Frame>

                <Label Text="{Binding Endereco}" TextColor="#8e8e8e" FontSize="10" Grid.Column="0" Grid.Row="3" VerticalOptions="EndAndExpand" HorizontalOptions="StartAndExpand"></Label>
                <Label Text="&#xf3c5;" Grid.Column="0" Grid.Row="4" FontSize="10" HorizontalOptions="StartAndExpand" TextColor="#ff9000" Padding="0,6,0,0">
                  <Label.FontFamily>
                    <OnPlatform x:TypeArguments="x:String" Android="Font-Awesome-Free-Solid.otf#FontAwesome5Free-Solid" iOS="FontAwesome5Free-Solid" />
                  </Label.FontFamily>
                </Label>
                <Label Text="{Binding Distancia}" TextColor="#ff9000" FontSize="10" Grid.Column="0" Grid.Row="4" VerticalOptions="Center" HorizontalOptions="StartAndExpand" Margin="10,0,0,0"></Label>
               </Grid>
            </Frame>
          </ViewCell>
         </DataTemplate>
       </ListView.ItemTemplate>
  </ListView>
</ContentPage>

背后的代码：

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace Playground
{
    // Learn more about making custom code visible in the Xamarin.Forms previewer
    // by visiting https://aka.ms/xamarinforms-previewer
    [DesignTimeVisible(false)]
    public partial class MainPage : ContentPage
    {
        public class Profissionais
        {
            public string Id { get; set; }

            public string Categoria { get; set; }

            public string Titulo { get; set; }

            public string FotoPerfil { get; set; }

            public string Endereco { get; set; }

            public string Distancia { get; set; }

            public string Sexo { get; set; }

        }

        private ObservableCollection<Profissionais> _listaProfissionais;
        public ObservableCollection<Profissionais> ListaProfissionais
        {
            get => _listaProfissionais;
            set
            {
                _listaProfissionais = value;
                OnPropertyChanged(nameof(ListaProfissionais));
            }
        }

        public MainPage()
        {
            InitializeComponent();
            ListaProfissionais = new ObservableCollection<Profissionais>();
        }

        private async Task Call()
        {
            // Simulating a call to the "API" and add a new element each 2 seconds
            for (int i = 0; i < 10; i++)
            {
                ListaProfissionais.Add(new Profissionais { Titulo = $"Professional {i}" });
                await Task.Delay(2000);
            }

        }

        protected override void OnAppearing()
        {
            base.OnAppearing();
            // Call the "API" when everything is ready
            Task.Factory.StartNew(Call);
        }
    }
}

在这里，如您所见，Professionais 类不需要从 INotifyPropertyChanged 继承。 您需要通知绑定引擎的唯一属性是您的集合。 ContentPage 已经有一个您可以使用的 OnPropertyChanged 方法。 之后，每次添加新元素时，您的 ListView 不仅会侦听来自属性的更改，还会侦听集合本身。

希望能帮助到你！

老的

假设您试图从后面的代码中绑定属性ListaProfissionais ：

方法 1（不是一个好习惯）：

您必须将ListaProfissionais添加到类的BindingContext属性。 您可以按以下方式处理此问题：

... assuming you already called your API ...
ListaProfissionais = JsonConvert.DeserializeObject<ObservableCollection<Profissionais>>(resultado);
BindingContext = ListaProfissionais;

在您的 XAML 而不是ItemsSource="{Binding ListaProfissionais}"使用ItemSource="{Binding BindingContext}"

方法 2（更好的方法）：

在您的 XAML 页面中为该类设置一个名称 (Name="listPage")。 在您的 ListView 中，您可以执行以下操作：

ItemsSource="{Binding ListaProfissionais, Source='{x:Reference listPage}'}"

注意：我稍后会对此进行测试。

2. 将 INotifyPropertyChanged 接口添加到您的 cs 文件并实现其方法。

将 ListaProfissionais 更改为这样的属性：

private ObservableCollection<Profissionais> _listaProfissionais;

public ObservableCollection<Profissionais> ListaProfissionais
{
    get => _listaProfissionais;
    set 
    {
        _listaProfissionais = value;
        // This should be the method implemented by INotifyPropertyChanged.
        OnPropertyChanged(nameof(ListaProfissionais);
    }
}

注意：如果您不通知 Binding 引擎该属性已更改，则列表将不会通知 ListView。 有了这个，我们确保 ListView 的绑定上下文正在监听来自 ListProfessionais 的属性更改。

希望能帮助到你。

Answer 2

我认为您必须通知属性已更改，例如为您的类实现 INotifyPropertyChanged 接口。 此外，我看不到 DataContext 是否已设置。 不错的简单示例https://www.wpf-tutorial.com/data-binding/responding-to-changes/

Answer 3

有找到问题的根源。 它是在 xaml 中，我不知道为什么但是标签 Grid 不能直接在 DataTemplate 内，它必须在 ViewCell 标签内，我只添加了一个 ViewCell，现在它运行良好。