1

是否可以将我的 CarouselView 包装到 ListView？我试图用分组功能做到这一点，但列表总是空的......

在 xaml 中，它应该看起来像这样。更多细节：每个任务我有 3-5 张照片，其中还有标题、子标题等其他道具。那么，如果我不能创建这样的结构，那么如何才能做到这一点？

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

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

1 回答 1

0

我认为您遇到了这个问题： https ://bugzilla.xamarin.com/show_bug.cgi?id=32290

其中图像可以超出其包含堆栈布局的限制，CarouselView 可以超出包含堆栈布局的范围。

所以我认为正在发生的是您的 CarouselView 和其中的图像可能会遮挡列表项。

尝试删除包装 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>

你不应该需要它们，因为它们只包含一个元素。

于 2018-10-18T20:50:54.493 回答