Bindable Layouts > Binding: Property X not found on ViewModel - xamarin

Question

I have simple XAML page with code like this:
<StackLayout BindableLayout.ItemsSource="{Binding Data}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label BackgroundColor="{Binding Color}"
Text="{Binding Text}"
FontAttributes="Italic"
FontSize="20"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
HeightRequest="105"
Margin="25" />
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
In the view page code behind I have:
public partial class DataView
{
public DataView()
{
InitializeComponent();
BindingContext = new ViewModel();
}
...
}
Data is:
public class ViewModel
{
public ViewModel()
{
Data = new ObservableCollection()<Model> {
new Model { Text = "Pink", Color = Color.DeepPink },
new Model { Text = "Crimson", Color = Color.Crimson },
new Model { Text = "Aqua", Color = Color.Aqua },
new Model { Text = "Blue", Color = Color.DeepSkyBlue },
new Model { Text = "BurlyWood", Color = Color.BurlyWood }, };
}
public ObservableCollection<Model> Data { get; set; }
}
public class Model
{
public Color Color { get; set; }
public string Text { get; set; }
}
However, on compile, I get:
Binding: Property "Color" not found on "MyComp.ViewModel".
Seems like its searching for Color in ViewModel instead of parent (Data).
I'm using the latest Xamarin.Forms 4.8.0, .NET Standard 2.0 and Visual Studio 2019 16.7.4.

Answer 1

I tested the xaml code, it still works fine.Check the gif: https://us.v-cdn.net/5019960/uploads/editor/pd/aa0fp5pwnvkl.gif
Here is the related code, you could refer to it.
Page.xaml
<StackLayout x:Name="expanderLayout" BindableLayout.ItemsSource="{Binding Data}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Expander>
<Expander.Header>
<Grid>
<Label BackgroundColor="{Binding Color}"/>
</Grid>
</Expander.Header>
<Expander.ContentTemplate>
<DataTemplate>
<Label
Text="{Binding Text}"
FontAttributes="Italic"
FontSize="20"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
HeightRequest="105"
Margin="25" />
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
Page.xaml.cs
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
BindingContext = new ViewModel();
}
}
Model class and ViewModel class
public class ViewModel
{
public ViewModel()
{
Data = new System.Collections.ObjectModel.ObservableCollection<Model>() {
new Model { Text = "Pink", Color = Color.DeepPink },
new Model { Text = "Crimson", Color = Color.Crimson },
new Model { Text = "Aqua", Color = Color.Aqua },
new Model { Text = "Blue", Color = Color.DeepSkyBlue },
new Model { Text = "BurlyWood", Color = Color.BurlyWood }, };
}
public ObservableCollection<Model> Data { get; set; }
}
public class Model
{
public Color Color { get; set; }
public string Text { get; set; }
}

Answer 2

I tried run your code and see nothing wrong with it
Apart from some slight typo in your question, I have it as this
public ViewModel()
{
Data = new ObservableCollection<Model>
{
new Model {Text = "Pink", Color = Color.DeepPink},
new Model {Text = "Crimson", Color = Color.Crimson},
new Model {Text = "Aqua", Color = Color.Aqua},
new Model {Text = "Blue", Color = Color.DeepSkyBlue},
new Model {Text = "BurlyWood", Color = Color.BurlyWood},
};
}
, maybe try clean/rebuild solution and run again?