将图像添加到列表视图中的轮播 xamarin forms

Question

Firts let me explain what I want to do. I have a listview which shows some products. When I click on a item, a window pops up with the details of that product. Now, in those details I want to show more pictures of that product with a carousel slide function and below those images I want to show the details and other stuff. This is what I made so far but the images won't show.

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

And in my.CSfile:

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

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

I think I need to add some extra array to add the images but somehow the carousel doesn't get the Binding for the images. Someone knows what I'm doing wrong? Thanks!

Answer 1

You didn't set the ItemsSource of CarouselView .

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

in model

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

in 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 = "$200.00",
                    productDescription = "Product Details",
                    productManufacturer = "xxx",
                    ImageList = new List<string>() {"test.png","test.png", "test.png" },

                };

                productDetail.Add(item);
            }          
        }