Question

是否可以将CarouselView包装到ListView？我尝试使用分组功能来做到这一点，但列表始终为空...

在xaml中，它应该看起来像这样。更详细一些：每个任务有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>

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

Answer 1

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

其中图像可以扩展到超出其包含的堆栈布局的限制，而CarouselView可以扩展到超出其包含的StackLayout的边界。

所以我认为您的CarouselView正在发生，并且其中的图像可能会使列表项模糊。

尝试删除包裹CarouselView和图片的StackLayout：

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

您不需要它们，因为它们只包装一个元素。

Xamarin CarouselView在ListView中

1 个答案: