为什么这个 ListView 不与 ObservableCollection 元素绑定？答案

【问题标题】：Why this ListView is not binding with ObservableCollection elements?为什么这个 ListView 不与 ObservableCollection 元素绑定？
【发布时间】：2020-01-20 20:12:49
【问题描述】：

我正在尝试将 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)

【问题讨论】：

您只能绑定到公共属性。 ListaProfissionais 不是公共财产
您确定ListaProfissionais 不为空吗？我从未见过有人直接反序列化为 ObservableCollection
@jason 是的，我可以看到它的元素。我也用 foreach 测试了每个元素，它们按预期存在。
您仍然需要将其设为公共属性才能绑定它。您需要查看堆栈跟踪以找出InvalidCastException 的根本原因是什么
您可以稍后标记您的答案，它将帮助更多有相同问题的人:)。

标签： c# visual-studio listview xamarin observablecollection

【解决方案1】：

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

【讨论】：

啊哈。 ListView 模板只能包含单元格类型。 CollectionView 已移除该限制

【解决方案2】：

更新 - 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);
        }
    }
}

这里，如您所见，Class 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}'}"

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

将 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);
    }
}

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

希望对你有帮助。

【讨论】：

我做了一些更改，只是用新代码和堆栈跟踪编辑了问题。请看一看。
你能放一个你的 JSON 样本，这样我就可以追踪发生了什么？
@SandroBenevides 我知道你发现了你的问题（直到我自己尝试过才注意到）。虽然，我添加了您可能喜欢的答案的更新版本。最好的问候。

【解决方案3】：

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

【讨论】：

这不是 WPF
过失。被忽视了。对不起