Xamarin Forms中ListView绑定英雄名称与图片无显示问题求助

问题 #

在Xamarin Forms项目中，尝试将UserChamp类的ChampName和ChampImage属性绑定到ListView以展示英雄名称和对应图片，但绑定后页面无内容显示。已确认ListView的数据源champList数据存储正确，通过主页面点击召唤师图标，使用Navigation.PushAsync导航到Champions页面，相关代码如下：

实体类代码 #

public class UserChamp
{
    [JsonProperty("championId")]
    public int champID { get; set; }
    [JsonProperty("championPoints")]
    public int points { get; set; }
    public string ChampName { get; set; }
    public string ChampImage { get; set; }
}

数据源构建代码 #

List<UserChamp> champList;

for (int i = 0; i < userChamps.Length; i++)
{
    if (userChamps[i].champID == Convert.ToInt32(championDTO.data.Aatrox.key))
    {
        UserChamp user = new UserChamp {
            ChampName = championDTO.data.Aatrox.name,
            ChampImage = "http://ddragon.leagueoflegends.com/cdn/12.23.1/img/champion/Atrox.png"
        };
        champList.Add(user);
    }
    if (userChamps[i].champID == Convert.ToInt32(championDTO.data.Ahri.key))
    {
        UserChamp user = new UserChamp
        {
            ChampName = championDTO.data.Ahri.name,
            ChampImage = "http://ddragon.leagueoflegends.com/cdn/12.23.1/img/champion/Ahri.png"
        };
        champList.Add(user);
    } 
    // 其他英雄判断逻辑...
champLv.ItemsSource = champList;  // champLv是ListView

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"
             x:Class="FinalProject.Champions">
    <ContentPage.Content>
        <StackLayout>
            <ListView x:Name="champLv">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal">
                                <Image Source="{Binding ChampImage}" HeightRequest="100" WidthRequest="100" />
                                <Label Text="{Binding ChampName}" />
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

导航代码 #

private async void Clicked(object sender, ItemTappedEventArgs e)
{
    champ = new Champions();
    await Navigation.PushAsync(champ, true);    
}

期望页面能显示英雄图片和名称，请求排查问题。

解决方案 #

• 初始化champList实例：代码中仅声明了List<UserChamp> champList;但未实例化，直接调用champList.Add(user)会触发空引用异常，导致绑定流程中断。修改为：

  List<UserChamp> champList = new List<UserChamp>();
  

• 确认数据源赋值时机：确保champLv.ItemsSource = champList;在champList数据填充完成后执行，可通过断点或日志确认champList.Count大于0，且代码未被异常中断。

• 实现属性变更通知：UserChamp类未实现INotifyPropertyChanged接口，虽当前为一次性赋值，但会影响后续数据更新的UI同步，同时保证绑定属性名称大小写完全匹配（Xamarin绑定默认区分大小写）。修改实体类：

  public class UserChamp : INotifyPropertyChanged
  {
      [JsonProperty("championId")]
      private int _champID;
      public int champID 
      { 
          get => _champID; 
          set 
          { 
              _champID = value; 
              OnPropertyChanged(nameof(champID)); 
          } 
      }
  
      [JsonProperty("championPoints")]
      private int _points;
      public int points 
      { 
          get => _points; 
          set 
          { 
              _points = value; 
              OnPropertyChanged(nameof(points)); 
          } 
      }
  
      private string _champName;
      public string ChampName 
      { 
          get => _champName; 
          set 
          { 
              _champName = value; 
              OnPropertyChanged(nameof(ChampName)); 
          } 
      }
  
      private string _champImage;
      public string ChampImage 
      { 
          get => _champImage; 
          set 
          { 
              _champImage = value; 
              OnPropertyChanged(nameof(ChampImage)); 
          } 
      }
  
      public event PropertyChangedEventHandler PropertyChanged;
      protected virtual void OnPropertyChanged(string propertyName)
      {
          PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
      }
  }
  

• 排查图片加载问题：若图片URL无效或未配置网络权限，图片会显示空白，但名称应正常显示。可先替换ChampImage为本地资源测试，同时确保Android项目的AndroidManifest.xml添加网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

内容的提问来源于stack exchange，提问作者Sean Moon