I’m using CollectionView to display the list of data in a table format, similar to a structured table. The table must be both horizontally and vertically scrollable. In the MAUI collection view, I’m facing two issues.
-
In order to scroll the CollectionView both horizontally and vertically, I’m placing the CollectionView inside the scroll view. The scrollview makes the collectionview horizontally scrollable, and the collectionview itself is vertically scrollable. When using a CollectionView along with a scrollview, the process of binding the data takes longer. When the scrollview is not present, the rendering process occurs as quickly as possible. Is it possible to make the CollectionView scrollable both horizontally and vertically without the scrollview?
-
The scrolling performance of the CollectionView is poor & laggy in MAUI. It works fine in Xamarin. The same UI works well in Xamarin.
<ScrollView
Padding="0"
Orientation="Horizontal">
<Grid
ColumnSpacing="0"
RowDefinitions="27,auto"
RowSpacing="1.5"
WidthRequest="{Binding DorLinesTableWidth}">
<---- Table Header binding ----->
<CollectionView
Grid.Row="0"
ItemsSource="{Binding TableHeaders}"
HeightRequest="25"
BackgroundColor="{StaticResource Primary}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Label
FontAttributes="Bold"
LineBreakMode="TailTruncation"
Text="{Binding Name}"
WidthRequest="{Binding Width}" />
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" ItemSpacing="0" />
</CollectionView.ItemsLayout>
</CollectionView>
<---- Table Content binding ----->
<CollectionView
x:Name="ColumnData"
Grid.Row="1"
ItemsSource="{Binding TableCellDetails}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0">
<CollectionView
x:Name="Item"
ItemsSource="{Binding CellDetails}"
HeightRequest="22">
<CollectionView.ItemTemplate>
<DataTemplate>
<Label
LineBreakMode="TailTruncation"
Text="{Binding Name}"
WidthRequest="{Binding Width}">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={x:Reference Dispatch}, Path=BindingContext.SelectedItem}" CommandParameter="{Binding .}" />
</Label.GestureRecognizers>
</Label>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" ItemSpacing="0" />
</CollectionView.ItemsLayout>
</CollectionView>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="2" />
</CollectionView.ItemsLayout>
</CollectionView>
</Grid>
</ScrollView>
I’m looking for a solution for the above issues. Thanks in advance.