[Xamarin.Forms]ListView中的自定义控件

Question

我在使用 Binding 在 Listview 中使用自定义控件时遇到问题。 我给你我的代码，让它更具体。

我的自定义控件 (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 ();
    }
}

我的页面 (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 冰箱：

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

    public string Name { get; set; }

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

    public Fridge() { }
}

当我到达 FridgePAge 页面时，我有一个 Cast Exception。 我应该怎么做才能在 ListView 中使用我的自定义控件？

你能帮我找出我做错了什么吗？

谢谢你。

Answer 1

将您的内容视图代码更改为此

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

并将代码后面的代码更改为此

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

将您的内容页面代码更改为此

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