In one of my pages of my .NET MAUI 8 application, I provide a search functionality. At the top of the ContentPage, there are a few controls to set search parameters, followed by a button to do the actual search. At the bottom of the content page is a CollectionView with all search results.
The found items are grouped by date. This means that each search result displayed in the CollectionView has a title and their own collection of items. This leads to nested CollectionViews.
I redacted the code for the sake of simplicity. The content page looks roughly like this:
<!-- Main content -->
<ScrollView x:Name="ScrollView"
Grid.Row="2">
<Grid Margin="10,10,10,10"
RowSpacing="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Search options + Search button are here (row 0 to 5) -->
<!-- Search results -->
<Label Grid.Row="6"
Text="{Binding Path=SearchResultsCaption}"
TextColor="{StaticResource Key=AccentColor}"
TextTransform="Uppercase"
FontSize="16"
Margin="0,13,0,0" />
<CollectionView Grid.Row="7"
x:Name="SearchResultsCollectionView"
ItemsSource="{Binding Path=SearchResultGroups}"
ItemsLayout="VerticalGrid">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="redacted">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<controls:SectionHeader Grid.Row="0"
BindingContext="{Binding Path=Title}"
Margin="0,0,0,5" />
<CollectionView Grid.Row="1"
ItemsSource="{Binding Path=redacted}"
ItemsLayout="VerticalGrid">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="redacted">
<Border StrokeThickness="1"
Stroke="{StaticResource Key=BorderColor}"
Background="White"
Margin="0,0,0,5">
<!-- nice looking search result -->
</Border>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
</ScrollView>
The problem now occurs on my test iOS device, if I place my finger on the first search result and scroll. I do not scroll the entire page, but only the search results in the first CollectionView (which contains all search results).
What I want to achieve is that no matter where on the page I start scrolling everything is scrolled. I want a behavior as if I was using WPF and had ItemControls without scrolling options or as if the CollectionView behaved just liked repeated grids listing all the content vertically.
How can I achieve this in .NET MAUI? I did not find native alternatives to CollectionViews or properties in the CollectionView that disabled nested scrolling.
Button
. If you need selection of items, and have trouble getting buttons to do what you need, start a new question with code as far as you can get it.