Xamarin CarouselView inside ListView

Question

Is it possible to wrap my CarouselView to the ListView? I tried to do this with Grouping feature, but list is always empty...

In the xaml it should look something like this. 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?

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

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

can you please send me your complete code sample?I need to implement the same and no luck yet.Thanks in Advance. — ghanshyam shah, Jul 22 '20 at 04:24

score 0 · Answer 1 · answered Oct 18 '18 at 20:50

I think you are hitting this issue: 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.

So what I think is happening is your CarouselView and the image in it are possibly obscuring the list items.

Try removing the StackLayouts that are wrapping your CarouselView and Image:

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

Its possible to use carouselview inside headertemplate? On my project I need to use but the main stacklayout inside of my carouselview is much bigger than i need — Luiz Negrini, Oct 22 '19 at 17:53

Xamarin CarouselView inside ListView

1 Answers1