.NET MAUI Outer CollectionView with another collectionView inside doesn't scroll vertically

Question

I'd like to make a gallery of photos. Data looks like this ("Data": null is byte[] in real situation):

PhotographGroup: [
    {
        "Name": "Exterior",
        "Photographs": [
            {
                "Id": 561,
                "Data": null,
                "Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/DetailsPhotoSeries_e0968fd0-4b72-4291-94e9-eaa3c7ef31fd/0"
            },
            {
                "Id": 562,
                "Data": null,
                "Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/DetailsPhotoSeries_e0968fd0-4b72-4291-94e9-eaa3c7ef31fd/1"
            },
            {
                "Id": 563,
                "Data": null,
                "Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/DetailsPhotoSeries_e0968fd0-4b72-4291-94e9-eaa3c7ef31fd/2"
            }
        ]
    },
    {
        "Name": "Interior",
        "Photographs": [
            {
                "Id": 564,
                "Data": null,
                "Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/ManualExterior_f01c8614-c365-4d5c-abe1-399e3dba49f8/0"
            },
            {
                "Id": 565,
                "Data": null,
                "Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/ManualExterior_f01c8614-c365-4d5c-abe1-399e3dba49f8/1"
            },
            {
                "Id": 566,
                "Data": null,
                "Description": "20230804_115619_f98fa7c9-24f2-45c7-9bba-5119073822a0/ManualExterior_f01c8614-c365-4d5c-abe1-399e3dba49f8/2"
            }
        ]
    }
]

The best way to present it I figured out so far is this way:

    <StackLayout Orientation="Vertical" Grid.Row="1" Margin="15, 0">
      <CollectionView ItemsSource="{Binding Photographs}" ItemsLayout="VerticalList">
         <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:PhotographGroup">
               <StackLayout Orientation="Vertical">
                 <Label Text="{Binding Name}" FontAttributes="Bold" />
                   <CollectionView ItemsSource="{Binding Photographs}"
                     ItemsLayout="HorizontalList">
                     <CollectionView.ItemTemplate>
                         <DataTemplate x:DataType="models:Photograph">
                            <Image
                              Source="{Binding Data, Mode=OneWay, Converter={StaticResource ByteArrayToImageSourceConverter}}" 
                              WidthRequest="400"
                              HeightRequest="300" />
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                 </CollectionView>
              </StackLayout>
            </DataTemplate>
         </CollectionView.ItemTemplate>
       </CollectionView>
    </StackLayout>

Two scrollViews is a walkaround for scrollView not moving in both direction that I wanted to try out (based on another stackOverflow question that is pretty similar to this one, but that doesn't provide workable answer).

Have already used grid, ScrollView in the ScrollView which generates a maui error. Basically I want to see gallery where objects in the main list are positioned one above another and pictures in every object (section) are displayed horizontally.

Answer 1

Here's the solution.

Basically I tried every possible solution from most StackOverflow and GitHub/Maui questions. The CollectionView has to be nested in another Grid that allows to expand the view. Then you have to add ScrollView to make it scrollable, even though it's not recommended and shouldn't be used (MS Docs).

<!-- Here are my other elements nested in parent grid -->
<Grid Grid.Row="2">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <ScrollView Grid.Row="0">
        <CollectionView ItemsSource="{Binding Photographs}">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:PhotographGroup">
                    <StackLayout Orientation="Vertical">
                        <Label Text="{Binding Name}" FontAttributes="Bold" />

                        <CollectionView ItemsSource="{Binding Photographs}" ItemsLayout="HorizontalList">
                            <CollectionView.ItemTemplate>
                                <DataTemplate x:DataType="models:Photograph">
                                    <Image Source="{Binding Data, Mode=OneWay, Converter={StaticResource ByteArrayToImageSourceConverter}}" 
                                           WidthRequest="400"
                                           HeightRequest="300" />
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                        </CollectionView>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ScrollView>
</Grid>
<!-- Here are my other elements nested in parent grid -->