Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
CollectionView within a CollectionView is very slow when loading items
See original GitHub issueDescription
CollectionView within a CollectionView is very slow when loading items
https://user-images.githubusercontent.com/6544051/170470317-e2fed6cc-86bf-4874-bd11-bdcddb4648b4.mp4
Steps to Reproduce
<ContentPage x:Class="FitNote.Pages.HomePage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:db="clr-namespace:FitNote.DatabaseModels;assembly=FitNote.DatabaseModels"
xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:models="clr-namespace:FitNote.Models"
xmlns:vm="clr-namespace:FitNote.ViewModels"
x:DataType="vm:HomeViewModel"
BackgroundColor="{DynamicResource BackgroundColourPrimary}"
NavigationPage.HasNavigationBar="false">
<ContentPage.Resources>
<ResourceDictionary>
<mct:IsNotNullConverter x:Key="IsNotNullConverter" />
<mct:IsEqualConverter x:Key="IsEqualConverter" />
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<Grid RowDefinitions="*,auto">
<ScrollView x:Name="sc" Grid.Row="0">
<VerticalStackLayout>
<Border Grid.Column="0"
Margin="0"
Padding="0"
BackgroundColor="{DynamicResource BackgroundColourSecondary}"
HeightRequest="230"
Stroke="{DynamicResource BackgroundColourSecondary}"
StrokeThickness="0">
<Border.StrokeShape>
<RoundRectangle CornerRadius="0,0,20,20" />
</Border.StrokeShape>
<VerticalStackLayout Padding="0,30,0,0" Spacing="0">
<Label Margin="0,0,20,0"
FontFamily="LASolid"
FontSize="30"
HorizontalOptions="End"
Text=""
TextColor="{DynamicResource TextColourPrimary}">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="OnSettings_Tapped" />
</Label.GestureRecognizers>
</Label>
<Label Margin="25,5,0,15"
FontAttributes="Bold"
FontSize="20"
Text="{Binding SelectedDiary.Date, StringFormat='{0:MMMM yyyy}'}"
TextColor="{DynamicResource TextColourPrimary}" />
<CollectionView FlowDirection="RightToLeft"
ItemSizingStrategy="MeasureFirstItem"
ItemsLayout="HorizontalList"
ItemsSource="{Binding Dates}"
SelectedItem="{Binding SelectedDiary}"
SelectionMode="Single">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10"
x:DataType="models:DiaryHomePageModel"
BackgroundColor="Transparent"
RowDefinitions="70, 30">
<Border Grid.Row="0"
Padding="0"
BackgroundColor="{DynamicResource BlueLightColour}"
HeightRequest="70"
Stroke="Transparent"
StrokeThickness="5">
<Border.StrokeShape>
<RoundRectangle CornerRadius="200" />
</Border.StrokeShape>
<Border.Triggers>
<DataTrigger Binding="{Binding IsSelected}"
TargetType="Border"
Value="true">
<Setter Property="BackgroundColor" Value="{DynamicResource PurpleLightColour}" />
<Setter Property="Stroke" Value="{DynamicResource PurpleDarkColour}" />
</DataTrigger>
</Border.Triggers>
<VerticalStackLayout Padding="10">
<Label HorizontalTextAlignment="Center"
Text="{Binding DayOfTheWeekLetter}"
TextColor="{DynamicResource BlueDarkColour}" />
<Label HorizontalTextAlignment="Center"
Text="{Binding Date, StringFormat='{0:dd}'}"
TextColor="Black" />
</VerticalStackLayout>
</Border>
<Ellipse Grid.Row="1"
Margin="0,10"
Fill="Transparent"
HeightRequest="10"
WidthRequest="10">
<Ellipse.Triggers>
<DataTrigger Binding="{Binding IsSelected}"
TargetType="Ellipse"
Value="true">
<Setter Property="Fill" Value="#4E16FF" />
</DataTrigger>
</Ellipse.Triggers>
</Ellipse>
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Transparent" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</VerticalStackLayout>
</Border>
<Grid Margin="0,20" ColumnDefinitions="*,3,*">
<Label Grid.Column="0" HorizontalOptions="Center">
<Label.FormattedText>
<FormattedString>
<FormattedString.Spans>
<Span FontFamily="LASolid"
FontSize="20"
Text=""
TextColor="{DynamicResource TextColourPrimary}" />
<Span FontSize="15"
Text="12m"
TextColor="{DynamicResource TextColourPrimary}" />
</FormattedString.Spans>
</FormattedString>
</Label.FormattedText>
</Label>
<BoxView Grid.Column="1"
BackgroundColor="{DynamicResource BackgroundColourSecondary}"
CornerRadius="1.5"
IsVisible="{Binding SelectedDiary.TotalWeight, Converter={StaticResource IsNotNullConverter}}"
WidthRequest="3" />
<Label Grid.Column="2"
HorizontalOptions="Center"
IsVisible="{Binding SelectedDiary.TotalWeight, Converter={StaticResource IsNotNullConverter}}">
<Label.FormattedText>
<FormattedString>
<FormattedString.Spans>
<Span FontFamily="LASolid"
FontSize="20"
Text=""
TextColor="{DynamicResource TextColourPrimary}" />
<Span FontSize="15"
Text="{Binding SelectedDiary.TotalWeight, StringFormat='{0}Kg'}"
TextColor="{DynamicResource TextColourPrimary}" />
</FormattedString.Spans>
</FormattedString>
</Label.FormattedText>
</Label>
</Grid>
<CollectionView Grid.Column="2"
Margin="15,0,15,80"
ItemsSource="{Binding SelectedDiary.GroupedWorkouts}"
SelectionMode="None">
<CollectionView.EmptyView>
<Label FontSize="30"
HorizontalTextAlignment="Center"
Text="No logs" />
</CollectionView.EmptyView>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame Margin="10,0,10,10"
x:DataType="models:GroupedWorkoutsModel"
BackgroundColor="{DynamicResource BackgroundColourSecondary}"
CornerRadius="10"
HasShadow="False">
<VerticalStackLayout>
<Label FontSize="20"
Text="{Binding Key}"
TextColor="{DynamicResource TextColourPrimary}" />
<Label Margin="0,0,00,10"
Text="Back, Chest"
TextColor="{DynamicResource TextColourSecondary}" />
<BoxView BackgroundColor="{DynamicResource BackgroundColourPrimary}"
CornerRadius="1"
HeightRequest="2" />
<CollectionView ItemsSource="{Binding Items}">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="db:LogTbl">
<Label>
<Label.FormattedText>
<FormattedString>
<FormattedString.Spans>
<Span Text="{Binding Weight}" TextColor="{DynamicResource TextColourPrimary}" />
<Span Text=" kg" TextColor="{DynamicResource TextColourPrimary}" />
<Span Text="{Binding Reps}" TextColor="{DynamicResource TextColourPrimary}" />
<Span Text=" reps" TextColor="{DynamicResource TextColourPrimary}" />
</FormattedString.Spans>
</FormattedString>
</Label.FormattedText>
</Label>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</VerticalStackLayout>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</VerticalStackLayout>
</ScrollView>
<Border Grid.Row="0"
Margin="20"
Padding="0"
HeightRequest="50"
HorizontalOptions="Center"
Stroke="Transparent"
StrokeThickness="5"
VerticalOptions="End">
<Border.StrokeShape>
<RoundRectangle CornerRadius="30" />
</Border.StrokeShape>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Offset="0.0" Color="#0ED473" />
<GradientStop Offset="1.0" Color="#17CC54" />
</LinearGradientBrush>
</Border.Background>
<Border.Shadow>
<Shadow Brush="#0ED473"
Opacity="0.5"
Radius="70"
Offset="0,0" />
</Border.Shadow>
<HorizontalStackLayout>
<Label Grid.Column="1"
Margin="10"
FontFamily="LASolid"
FontSize="30"
HeightRequest="30"
HorizontalTextAlignment="Center"
Text=""
TextColor="White"
WidthRequest="50" />
<Label Grid.Column="1"
Margin="10"
FontFamily="LASolid"
FontSize="30"
HeightRequest="30"
HorizontalTextAlignment="Center"
Text=""
TextColor="White"
WidthRequest="50">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="AddExcersie_Tapped" />
</Label.GestureRecognizers>
</Label>
</HorizontalStackLayout>
</Border>
<Grid Grid.Row="1"
BackgroundColor="{DynamicResource BackgroundColourSecondary}"
ColumnDefinitions="*,*"
HeightRequest="75">
<Grid.Shadow>
<Shadow Brush="#cdd2e6"
Opacity="1"
Radius="100"
Offset="0,0" />
</Grid.Shadow>
<Label Grid.Column="0"
FontFamily="LASolid"
FontSize="30"
HorizontalTextAlignment="Center"
Text=""
TextColor="{DynamicResource TextColourPrimary}"
VerticalTextAlignment="Center" />
<Label Grid.Column="1"
FontFamily="LASolid"
FontSize="30"
HorizontalTextAlignment="Center"
Text=""
TextColor="{DynamicResource TextColourPrimary}"
VerticalTextAlignment="Center" />
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage>
Version with bug
6.0 (current)
Last version that worked well
Unknown/Other
Affected platforms
Android, I was not able test on other platforms
Affected platform versions
android 11
Did you find any workaround?
No response
Relevant log output
No response
Issue Analytics
- State:
- Created a year ago
- Comments:21 (6 by maintainers)
Top Results From Across the Web
UICollectionView so much slow to load
The instance I've successfully called the images from array JSON returned object the UICollection is very slow to load especially if it has...
Read more >Populate a CollectionView with Data - .NET MAUI
A .NET MAUI CollectionView is populated with data by setting its ItemsSource property to any collection that implements IEnumerable.
Read more >Delete items in collection view with custom layout
I have a collection view with a simple custom layout (each cell is a simple image) and am getting errors when tryig to...
Read more >Jean-Marie Alfonsi
The collection view doesn't magically optimize all of your bloated views, you have to follow some basic rules if you want a slick...
Read more >Pro iOS Table Views and Collection Views
If your collection view uses these items, you need to figure out which are visible in the CGRect and return their attributes. In...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I marked duplicate to apply any activity/votes here to the other issue, thanks.
@ToolmakerSteve : is there any other way to have a virtualized horizontal list view in a DataTemplate than the CollectionView?