Is there a way to have 2 different objects following one another in a CollectionView in Xamarin.Forms?

Question

I have a CollectionView that shows a list of Categories object like so:

And I'd like to have a list of SubCategories to be listed right after it as if it was the same list.

I know CollectionView only takes one item but I wanted to know if there was a way to have two lists that can behave as one when you scroll

Thank you for your help

Option 1: use a [bindable layout](https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/bindable-layouts) nested in your collection view (I assume nested collection view not recommended). Option 2: transform your model data into a flat list in your view model and bind. — Shaw, Jun 17 '21 at 21:37
Thank you @Shaw but is there a tutorial for option 2 you might share a link for as I’m new to Xamarin.Forms ans I’m kind of confused about what you’ve said ? The first option is what I’ve done for the Category list with ItemsSource but it seems the second option might be the right one — Jimmy, Jun 17 '21 at 23:36
Option 1 suits a bit more to those lists with multi-level UI. Post your code of model data or some example about your nested lists, then I can try. Linq is a mighty tool. — Shaw, Jun 18 '21 at 01:32

score 1 · Accepted Answer · answered Jun 18 '21 at 07:38

you can use 2 StackLayout right after each other and set BindableLayout like this :

<StackLayout Orientation="Horizontal">
      <StackLayout Orientation="Horizontal" BindableLayout.ItemsSource="{Binding CategoryItemSource}">
          <BindableLayout.ItemTemplate>
              <DataTemplate>
                    <!--CategoryItemTemplate-->
                </DataTemplate>
          </BindableLayout.ItemTemplate>
      </StackLayout>
      <StackLayout Orientation="Horizontal" BindableLayout.ItemsSource="{Binding SubCategoryItemSource}">
          <BindableLayout.ItemTemplate>
              <DataTemplate>
                  <!--SubCategoryItemTemplate-->
              </DataTemplate>
          </BindableLayout.ItemTemplate>
      </StackLayout>
    </StackLayout>

in this case first stacklayout show you category items and second stacklayout show subcategory just right after that

I tried but it didn't work, it put both of them on top of one another not on the same line — Jimmy, Jun 18 '21 at 21:42
you sure that you set "Orientation" of parent stacklayout to "Horizontal" and other stacklayout too — Amir Hossein Khademi, Jun 19 '21 at 07:12
It works ! I just had to put it into a ScrollView. Thank you so much — Jimmy, Jun 19 '21 at 07:59

score 0 · Answer 2 · answered Jun 18 '21 at 07:43

two possible solutions :

1- Use inheritance to make both Category and SubCategory share a commune Parent then build an index where you make sure that each element is listed after his parent.

2- use a nested collection view to display subcategories for each category.

Is there a way to have 2 different objects following one another in a CollectionView in Xamarin.Forms?

2 Answers2