Member not found in data context - xamarin.forms

Question

I am trying to bind the ImageSource property of the NewGames class to the Source property of an Image control in a CarouselView but i keep getting the same error. Here is my code.
New Game Class
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; }
}
}
This is my view model
using System.ComponentModel;
using System.Text;
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"
});
}
}
}
And this is where i am trying to bind it to
<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>
It seems i am binding the NewGames class correcly because the carouselView is getting populated but for some reason none of the properties of the class go through and i don't know why. Hopefully this helps you guys understand was i am trying to do.

Answer 1

You're using compiled bindings when you're using the x:DataType property.
In order to make your bindings work like you expect, you need to explicitly set the x:DataType whenever the context changes. This is usually the case when you're using a DataTemplate.
In your case this would be something like this:
<CarouselView ItemsSource={Binding Games}>
<CarouselView.ItemTemplate>
<DataTemplate
x:DataType="local:NewGames">
<StackLayout>
<!-- ... -->
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
Where it says "local:NewGames" you need to put the correct namespace and class name.