[Xamarin.Forms]Custom control in ListView

Question

I have a problem to use a custom control in a Listview using the Binding. I give you my code to make it more concrete.

My custom control (FridgeControl)

Xaml:

<ContentView.Content>
  <StackLayout>
     <Label x:Name="LabelName" Text="{Binding Source={x:Reference FridgeView}, Path=NameFridge }" />
  </StackLayout>
</ContentView.Content>    

Cs:

public partial class FridgeControl : ContentView
{       
    public string NameFridge { get; set; }

    public static readonly BindableProperty NameFridgeProperty = BindableProperty.Create(
                                                     propertyName: "NameFridge",
                                                     returnType: typeof(string),
                                                     declaringType: typeof(FridgeControl),
                                                     defaultValue: "");

    public FridgeControl ()
    {
        InitializeComponent ();
    }
}

My page (FridgePage)

Xaml:

 <ContentPage.Content>
    <StackLayout>
        <ListView x:Name="ListFridges"
                  ItemsSource="{Binding Fridges}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <c:FridgeControl NameFridge="{Binding Name}"></c:FridgeControl>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
 </ContentPage.Content>

Cs:

public partial class FridgesPages : ContentPage
{
    public ObservableCollection<Fridge> Fridges { get; private set; }

    public FridgesPages()
    {
        InitializeComponent();

        this.Fridges = new ObservableCollection<Fridge>()
        {
            new Fridge
            {
                Id = 1,
                Name = "Garage",
                Foods = new List<Food>()
                {
                    new Food
                    {
                        Id = 14,
                        Name = "Tomatoes",
                        Type = Models.Enum.TypeFoodEnum.Vegetal,
                        MaxDate = new DateTime(2021, 01, 20)
                    },
                    new Food
                    {
                        Id = 6,
                        Name = "Chicken",
                        Type = Models.Enum.TypeFoodEnum.Meat,
                        MaxDate = new DateTime(2021, 01, 15)
                    },
                    new Food
                    {
                        Id = 44,
                        Name = "Water",
                        Type = Models.Enum.TypeFoodEnum.Drink,
                    },
                }
            },
            new Fridge
            {
                Id = 1,
                Name = "Kitchen",
                Foods = new List<Food>()
                {
                    new Food
                    {
                        Id = 14,
                        Name = "Salad",
                        Type = Models.Enum.TypeFoodEnum.Vegetal,
                        MaxDate = new DateTime(2021, 01, 20)
                    },
                    new Food
                    {
                        Id = 6,
                        Name = "Meat",
                        Type = Models.Enum.TypeFoodEnum.Meat,
                        MaxDate = new DateTime(2021, 01, 15)
                    },
                    new Food
                    {
                        Id = 44,
                        Name = "Juice",
                        Type = Models.Enum.TypeFoodEnum.Drink,
                    },
                }
            }
        };

        BindingContext = this;
    }
}

Object Fridge:

public class Fridge
{
    public int Id { get; set; }

    public string Name { get; set; }

    public List<Food> Foods { get; set; }

    public Fridge() { }
}

When i get to the FridgePAge page then i have a Cast Exception. What should i do so that i can use my custom control inside the ListView please?

Can you help me find out what i did wrong?

Thank you.

Answer 1

Change your content view code to this

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Jobu.Forms.Views.FridgeControl">
  <ContentView.Content>
      <StackLayout>
            <Label x:Name="LabelName" Text="{Binding Name}" />
      </StackLayout>
  </ContentView.Content>
</ContentView>

And change your code behind code to this

   public partial class FridgePage : ContentPage
    {

        public ObservableCollection<Fridge> Fridges { get; private set; }

        public FridgePage()
        {
            InitializeComponent();

            this.Fridges = new ObservableCollection<Fridge>(){
            new Fridge
            {
                Id = 1,
                Name = "Garage",
                Foods = new List<Food>()
                {
                    new Food
                    {
                        Id = 14,
                        Name = "Tomatoes",
                        Type = Models.Enum.TypeFoodEnum.Vegetal,
                        MaxDate = new DateTime(2021, 01, 20)
                    },
                    new Food
                    {
                        Id = 6,
                        Name = "Chicken",
                        Type = Models.Enum.TypeFoodEnum.Meat,
                        MaxDate = new DateTime(2021, 01, 15)
                    },
                    new Food
                    {
                        Id = 44,
                        Name = "Water",
                        Type = Models.Enum.TypeFoodEnum.Drink,
                    },
                }
            }
        };

        BindingContext = this;
        }
    }

Change your Content page code to this

    <ContentPage.Content>
        <StackLayout>
            <ListView x:Name="ListFridges"
                      ItemsSource="{Binding Fridges}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <c:FridgeControl NameFridge="{Binding Name}"></c:FridgeControl>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>