forms - 将图像添加到列表视图 xamarin 表单中的轮播
问题描述
首先让我解释一下我想做什么。我有一个显示一些产品的列表视图。当我单击一个项目时,会弹出一个窗口,其中包含该产品的详细信息。现在,在这些细节中,我想展示更多带有轮播幻灯片功能的产品图片,在这些图片下方,我想展示细节和其他内容。这是我到目前为止所做的,但图像不会显示。
<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>
在我的 .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 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; }
}
我想我需要添加一些额外的数组来添加图像,但不知何故轮播没有获得图像的绑定。有人知道我在做什么错吗?谢谢!
解决方案
您没有设置的ItemsSource。CarouselView
在xml中
<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);
}
}
推荐阅读
- angular8 - 在服务器给出的角度 8 中设置 href 字符串
- python-3.x - 如何从“旧式”类实现“新式”Python AsyncIO 迭代器函数?
- ios - 无法在 Swift 中使用来自 Firebase 的数据立即加载 UIImageView 和 UILabel
- python - 你如何删除编码的字符
- javascript - React/Redux 变量在生产中返回 HTML
- r - R从先知的每周季节性分析中删除周六和周日
- batch-file - 批处理多个 m3u 文件
- c++ - 我没有得到匹配的功能来调用等等
- c# - WPF TreeView 不显示可观察集合中的项目
- python - 带有 PySide 2 和 QtDesigner 的 pyqtgraph