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

如何解决在列表视图 xamarin 表单中将图像添加到轮播 在 xaml 中在模型中在视图模型中

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="response"></div>
<input type="text" id="trackingId"/>
<button type="button" id="submit">Submit</button>

在我的 .CSfile 中：

<ContentPage.Content>
        <StackLayout Padding="5,5,5">
            <ListView ItemsSource="{Binding productDetail}" HasUnevenRows="True"
                      x:Name="lstProductDetail">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid x:Name="productDetailsGrid"
                          Padding="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>

公开课部分：

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

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

解决方法

您没有设置 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; }
}

在视图模型中

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