maui: CollectionView within a CollectionView is very slow when loading items
Description
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
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 21 (6 by maintainers)
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?