[英]Xamarin CarouselView inside ListView
Is it possible to wrap my CarouselView to the ListView? 是否可以将我的CarouselView包装到ListView? I tried to do this with Grouping feature, but list is always empty... 我尝试使用分组功能来做到这一点,但列表始终为空...
In the xaml it should look something like this. 在xaml中,它应该看起来像这样。 Some more detail: I have 3-5 photo per quest, which has another props like Title, SubTitle, etc. So, if I can't create such a structure, how can this be done otherwise? 更详细一些:每个任务有3-5张照片,其中还有另一个道具,例如Title,SubTitle等。那么,如果我不能创建这样的结构,那么该如何做?
<ListView x:Name="questsHistoryDetailList"
HasUnevenRows="True"
IsGroupingEnabled="True"
SeparatorVisibility="None"
ItemsSource="{Binding Data}" >
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<cv:CarouselViewControl
x:Name="carouselView"
ItemsSource="{Binding DetailPhotoCollection}"
ShowIndicators="true"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<cv:CarouselViewControl.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Image Source="{Binding Photo, Converter = {StaticResource ImageSourceConverter}}"/>
</StackLayout>
</DataTemplate>
</cv:CarouselViewControl.ItemTemplate>
</cv:CarouselViewControl>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<Label Text="{Binding Key.Title}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In C# 在C#中
public DetailHistoryViewModel(List<Indication> indications)
{
Data = new ObservableCollection<Grouping<Indication, DetailPhoto>>();
indications.ForEach(indication => {
new photoWrapper = new ObservableCollection<DetailPhoto>(
indication.Photo.Split(',').ToList().ConvertAll(p => new DetailPhoto(p)));
Data.Add(new Grouping<Indication, DetailPhoto>(
indication,
photoWrapper
));
});
}
public class DetailPhotoWrapper
{
public List<DetailPhoto> DetailPhotoCollection { get; set; }
}
public class DetailPhoto
{
public string Photo { get; set; }
public DetailPhoto(string photo)
{
Photo = photo;
}
}
public class Grouping<K, T> : ObservableCollection<T>
{
public K Key { get; private set; }
public Grouping(K key, IEnumerable<T> items)
{
Key = key;
foreach (var item in items)
this.Items.Add(item);
}
}
I think you are hitting this issue: https://bugzilla.xamarin.com/show_bug.cgi?id=32290 我认为您遇到了这个问题: https : //bugzilla.xamarin.com/show_bug.cgi?id=32290
where an image can extend beyond the limits of its containing stack layout, the CarouselView that can extend beyond the bounds of the containing StackLayout. 如果图片可以扩展到超出其包含的堆栈布局的限制,则CarouselView可以扩展到超出包含的StackLayout的边界。
So what I think is happening is your CarouselView and the image in it are possibly obscuring the list items. 因此,我认为正在发生的是您的CarouselView,其中的图像可能会使列表项模糊。
Try removing the StackLayouts that are wrapping your CarouselView and Image: 尝试删除包裹CarouselView和Image的StackLayouts:
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<!-- REMOVE --><StackLayout>
<cv:CarouselViewControl
x:Name="carouselView"
ItemsSource="{Binding DetailPhotoCollection}"
ShowIndicators="true"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<cv:CarouselViewControl.ItemTemplate>
<DataTemplate>
<!-- REMOVE --><StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Image Source="{Binding Photo, Converter = {StaticResource ImageSourceConverter}}"/>
<!-- REMOVE --></StackLayout>
</DataTemplate>
</cv:CarouselViewControl.ItemTemplate>
</cv:CarouselViewControl>
<!-- REMOVE --></StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
You should not need them as they only wrap one element. 您不需要它们,因为它们只包装一个元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.