在CarouselView中绑定NewGames类属性遇‘Member not found’错误

我尝试将NewGames类的ImageSource属性绑定到CarouselView中Image控件的Source属性，但始终收到“Member not found in data context”错误。目前CarouselView已成功加载，但NewGames类的所有属性均未正常绑定生效。

NewGames类代码 #

namespace FYP.ViewModels
{
    public class NewGames
    {
        public int Id { get; set; }
        public string GameTitle { get; set; }
        public double Rating { get; set; }
        public string ImageSource { set; get; }
    }
}

NewReleasesViewModel视图模型代码 #

using System.ComponentModel;
using System.Collections.ObjectModel;

namespace FYP.ViewModels
{
    public class NewReleasesViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private ObservableCollection<NewGames> NewGames;

        public ObservableCollection<NewGames> Games
        {
            get { return NewGames; }
            set 
            { 
                NewGames = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Games"));
            }
        }

        public NewReleasesViewModel() 
        {
            Games = new ObservableCollection<NewGames>();
            AddData();
        }
        
        private void AddData()
        {
            Games.Add(new NewGames
            {
                Id = 0,
                GameTitle = "The Elder Scrolls Online",
                Rating = 4.9,
                ImageSource= "https://assets-prd.ignimgs.com/2022/01/05/elderscrollsonline-1641413357689.jpg"
            });
            Games.Add(new NewGames
            {
                Id = 1,
                GameTitle = "World Of Warcraft",
                Rating = 4.9,
                ImageSource = "https://assets-prd.ignimgs.com/2021/12/10/wow-1639126324635.jpg"
            });
            Games.Add(new NewGames
            {
                Id = 2,
                GameTitle = "Star Wars: The Old Republic",
                Rating = 4.9,
                ImageSource = "https://assets-prd.ignimgs.com/2022/01/27/swotor-sq1-1643302998212.jpg"
            });
        }
    }
}

XAML代码片段 #

<CarouselView.ItemTemplate>
    <DataTemplate>
        <StackLayout>
            <Frame HeightRequest="300" 
                 WidthRequest="180" 
                 BackgroundColor="white" 
                 Padding="0" 
                 CornerRadius="10"
                 HasShadow="True" 
                 Margin="15"
                 HorizontalOptions="CenterAndExpand">

                <Grid>
                    <StackLayout BackgroundColor="DimGray">
                    <Image Source="{Binding ImageSource}" Aspect="AspectFill"></Image>
                    </StackLayout>

                    <StackLayout Margin="-5">
                    <Label Text="{Binding GameTitle}" 
                            TextColor="PaleGoldenrod"
                            FontSize="18" 
                            FontAttributes="Bold"
                            Margin="15"
                            VerticalOptions="EndAndExpand"/>
                    </StackLayout>
                </Grid>
            </Frame>
        </StackLayout>
    </DataTemplate>
</CarouselView.ItemTemplate>

问题分析与解决方法 #

出现这个错误的核心原因是CarouselView的绑定上下文未正确关联到数据源，具体需要检查以下两点：

• 设置页面的BindingContext为ViewModel实例
  确保页面的BindingContext指向NewReleasesViewModel的实例，可通过两种方式实现：

  • XAML方式（需先引入命名空间）：

    <ContentPage xmlns:viewmodels="clr-namespace:FYP.ViewModels"
                 ...>
        <ContentPage.BindingContext>
            <viewmodels:NewReleasesViewModel />
        </ContentPage.BindingContext>
    </ContentPage>
    

  • 代码后台方式：

    public YourPageName()
    {
        InitializeComponent();
        BindingContext = new NewReleasesViewModel();
    }
    

• 为CarouselView设置ItemsSource绑定
  确保CarouselView的ItemsSource绑定到ViewModel中的Games集合，完整的CarouselView标签应包含：

  <CarouselView ItemsSource="{Binding Games}">
      <!-- 你的ItemTemplate代码 -->
  </CarouselView>
  

完成以上两步后，CarouselView就能正确遍历Games集合中的NewGames对象，绑定的ImageSource和GameTitle属性也会正常生效。

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