在列表视图 xamarin 表单中将图像添加到轮播

Question

首先让我解释一下我想做什么。我有一个显示一些产品的列表视图。当我单击某个项目时，会弹出 window，其中包含该产品的详细信息。现在，在这些细节中，我想展示更多带有轮播幻灯片功能的产品图片，在这些图片下方，我想展示细节和其他内容。这是我到目前为止所做的，但图像不会显示。

<ContentPage.Content>
        <StackLayout Padding="5,5,5,5">
            <ListView ItemsSource="{Binding productDetail}" HasUnevenRows="True"
                      x:Name="lstProductDetail">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid x:Name="productDetailsGrid"
                          Padding="5, 5, 5, 5">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Label Text="{Binding productHeader}" Grid.Column="0" Grid.Row="0"
                                        TextColor="#FFFFFF"
                                        FontSize="25"
                                       BackgroundColor="Blue"
                                        FontAttributes="Bold"></Label>
                                <CarouselView Grid.Column="0" Grid.Row="1">
                                    <CarouselView.ItemTemplate>
                                        <DataTemplate>
                                            <StackLayout HorizontalOptions="Center">
                                                <Image Source="{Binding productImage}"/>
                                            </StackLayout>
                                        </DataTemplate>
                                    </CarouselView.ItemTemplate>
                                </CarouselView>
                                <Label Text="{Binding productPrice}" 
                                        FontSize="24"
                                        FontAttributes="Bold"
                                        TextColor="Red"
                                        Grid.Column="0"
                                        Grid.Row="2"/>
                                <Label Text="{Binding productDescription}" 
                                   FontSize="Medium" 
                                   TextColor="#000000"
                                   Grid.Column="0"
                                   Grid.Row="3"/>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>

在我的 .CS 文件中：

public IList<productDetails> productDetail { get; set; }
        private CultureInfo nfi = new CultureInfo("nl-NL", false);
        private int product_id;

        public Item Item { get; set; }
        public int productID {
            get { return product_id; }
            set { product_id = value; } 
        }
        public NewItemPage(int productId, string itemName)
        {
            InitializeComponent();
            productDetail = new List<productDetails>();
            productDetail.Add(new productDetails { productHeader = "Test ding", productDescription = "Desc", productImage = "https://www.electronicabalie.nl/105297-large_default/philips-ce600n-2-din-autoradio-met.jpg", productManufacturer = "Manufacturer", productPrice = "129,95" });
            
            //loadProductDetail(productId);
            /*product_id = productId;
            Item = new Item
            {
                Text = itemName + " " + product_id.ToString(),
                Description = "This is description.",
                Id = product_id.ToString()
            };*/
            BindingContext = this;
        }

Public class 部分：

public class productDetails
        {
            public string productHeader { get; set; }
            public string productImage { get; set; }
            public string productManufacturer { get; set; }
            public string productPrice { get; set; }
            public string productDescription { get; set; }
        }

我想我需要添加一些额外的数组来添加图像，但不知何故轮播没有获得图像的绑定。有人知道我做错了什么吗？谢谢！

Answer 1

您没有设置 CarouselView 的 ItemsSource。

在xaml

<CarouselView Grid.Column="0" Grid.Row="1" ItemsSource="{Binding ImageList}">
       <CarouselView.ItemTemplate>
            <DataTemplate>
                 <StackLayout HorizontalOptions="Center">
                      <Image Source="{Binding .}"/>
                 </StackLayout>
             </DataTemplate>
       </CarouselView.ItemTemplate>
</CarouselView>

模型中

public class productDetails
{
    public string productHeader { get; set; }
    public IList<string> ImageList { get; set; }
    public string productManufacturer { get; set; }
    public string productPrice { get; set; }
    public string productDescription { get; set; }
}

在 ViewModel 中

 public ObservableCollection<productDetails> productDetail { get; set; }

public ViewModel()
        {

            productDetail = new ObservableCollection<productDetails>();

            for(int i = 0;i<5;i++)
            {
                var item = new productDetails()
                {
                    productHeader = "header",
                    productPrice = "0.00",
                    productDescription = "Product Details",
                    productManufacturer = "xxx",
                    ImageList = new List<string>() {"test.png","test.png", "test.png" },

                };

                productDetail.Add(item);
            }          
        }

在列表视图 xamarin 表单中将图像添加到轮播

Add images to carousel within a listview xamarin forms

forms

listview

carousel

xamarin

在xaml

模型中

在 ViewModel 中