CODEWITHSUNDEEP
xamarinxamarin.formsbinding
Milan M.
Milan M.

Reputation: 1036

Bindable Layouts > Binding: Property X not found on ViewModel

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.

Upvotes: 2

Views: 1015

Answers (3)

pdschuller
pdschuller

Reputation: 584

To close the loop here ... as @MilanM commented on 10-17-20, he got it to work by removing this from the xaml

x:DataType="local:ViewModel"

I think that other people are saying that the code runs fine because they never had that line in their xaml. @MilanM never showed it until his comment.

I removed 2 lines from my xaml and everything then worked.

xmlns:viewModel="clr-namespace:MauiApp1.ViewModels"
x:DataType="viewModel:MainViewModel"

NOTE: I set the BindingContext in the codebehind with this:

public MainPage(MainViewModel _vm)
{
    InitializeComponent();
    BindingContext = _vm;
}

HTH

Upvotes: 1

Jarvan Zhang
Jarvan Zhang

Reputation: 1013

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

Upvotes: 2

Visual Sharp
Visual Sharp

Reputation: 3986

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?

enter image description here

Upvotes: 0

Related Questions