I am using collection view in Xamarin and I don't know what reason the scrolling is not smooth. I implemented compiled binding and increased the Garbage collector size in android. I would like any recommendation on how to optimize the collection view, or point out what the problem is.
<CollectionView x:DataType="viewmodels:PageViewModel" ItemsSource="{Binding ItemList}" >
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:Item">
<StackLayout>
<BoxView HorizontalOptions="FillAndExpand" HeightRequest="5" Color="Silver"/>
<Grid RowSpacing="0" ColumnSpacing="0" Padding="15,10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.ColumnSpan="2" Grid.Column="0" Orientation="Horizontal">
<ff:CachedImage Source="Image.jpg" HeightRequest="50" WidthRequest="50" HorizontalOptions="Start">
<ff:CachedImage.Transformations>
<ffTrans:CircleTransformation />
</ff:CachedImage.Transformations>
</ff:CachedImage>
<StackLayout HorizontalOptions="FillAndExpand" Padding="10,0,0,0">
<Label Text="{Binding Name}" FontSize="Small"/>
<Label Text="{Binding Date, StringFormat='{0:dd MMM yyyy}'}" FontSize="Small"/>
</StackLayout>
</StackLayout>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" IsVisible="True" Source="Icon.png" WidthRequest="30" HorizontalOptions="End">
<ImageButton.Triggers>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="True" >
<Setter Property="IsVisible" Value="False" />
</DataTrigger>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="False" >
<Setter Property="IsVisible" Value="False" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" IsVisible="False" Source="Icon.png" WidthRequest="30" HorizontalOptions="End">
<ImageButton.Triggers>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="True" >
<Setter Property="IsVisible" Value="True" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" IsVisible="False" Source="img.png" WidthRequest="30" HorizontalOptions="End">
<ImageButton.Triggers>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="False" >
<Setter Property="IsVisible" Value="True" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" Source="Icon.png" WidthRequest="20" HorizontalOptions="Center"/>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Text="{Binding Text}" Margin="0,10"/>
<mediavideoplayer:VideoPlayer x:Name="mediaelement" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" IsEnabled="{Binding Attachments, Converter={StaticResource VideoVisibilityConverter}}" IsVisible="{Binding Attachments ,Converter={StaticResource VideoVisibilityConverter}}" DisplayControls="False" FillMode="ResizeAspectFill" HeightRequest="350" AutoPlay="True" Repeat="True">
<mediavideoplayer:VideoPlayer.Source>
<MultiBinding Converter="{StaticResource VideoUrlConverter}">
<Binding Path="Attachments.Path" />
<Binding Path="Attachments" />
</MultiBinding>
</mediavideoplayer:VideoPlayer.Source>
</mediavideoplayer:VideoPlayer>
<Image IsVisible="{Binding Attachments, Converter={StaticResource ImageVisibilityConverter}}" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Aspect="AspectFill" Style="{StaticResource StCommentPicture}">
<Image.Source>
<MultiBinding Converter="{StaticResource UrlConverter}">
<Binding Path="Attachments.path" />
<Binding Path="Attachments" />
</MultiBinding>
</Image.Source>
</Image>
<StackLayout Grid.Row="3" Grid.Column="0" >
<Label Text="👍" />
<Label Text="😍" />
<Label Text="😂" />
<Label x:Name="LikesCount" Grid.Row="5" Grid.Column="1" Text="{Binding likes}" />
</StackLayout>
<Label Grid.Row="3" Grid.Column="2" HorizontalOptions="End" Text="{Binding Comments, StringFormat='{0} Comments'}" Margin="0,6"/>
<BoxView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" VerticalOptions="EndAndExpand" HeightRequest="1" Color="LightGray" Margin ="0,5"/>
<Frame Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" x:Name="likeArea" Opacity="0" Padding="0" HasShadow="true" OutlineColor="#EEEEEE" CornerRadius="70">
<Grid x:Name="GridlikeArea" Padding="5,0" BackgroundColor="Transparent" ColumnDefinitions="*,*,*,*,*" VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<ImageButton x:Uid="Like" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="0" Aspect="AspectFit" Source="Like.png" Clicked="LikeFrame_Clicked" ></ImageButton>
<ImageButton x:Name="Laugh" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="1" Aspect="AspectFit" Source="Laugh.png" Clicked="LikeFrame_Clicked"></ImageButton>
<ImageButton x:Name="Love" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="2" Aspect="AspectFit" Source="love.png" Clicked="LikeFrame_Clicked"></ImageButton>
<ImageButton x:Name="Sad" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="3" Aspect="AspectFit" Source="sad.png" Clicked="LikeFrame_Clicked"></ImageButton>
<ImageButton x:Name="Hate" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="4" Aspect="AspectFit" Source="angry.png" Clicked="LikeFrame_Clicked"></ImageButton>
</Grid>
</Frame>
<Button x:Name="LikeButton" HeightRequest="40" BackgroundColor="{Binding Reactions,Converter={StaticResource ReactionColorConverter}}"
CornerRadius="50" Grid.Row="5" Grid.Column="0" ImageSource="{Binding Reactions, Converter={StaticResource ReactionImageConverter}}" Text="Like" Clicked="LikeButton_Clicked" HorizontalOptions="StartAndExpand"/>
</Grid>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.Footer>
<StackLayout HorizontalOptions="CenterAndExpand" Padding="0">
<Button BackgroundColor="Transparent" HorizontalOptions="CenterAndExpand" TextColor="#529dff" FontAttributes="Bold" Text="Load More..." Command="{Binding LoadMoreCommand}" Clicked="loadmorebutton_Clicked"/>
</StackLayout>
</CollectionView.Footer>
</CollectionView>
**Note: deleting the mediavideoplayer:VideoPlayer control wont make any difference **
The Issue is solved by the nuget Glidex. glidex.forms is small library we can use to improve Xamarin.Forms image performance on Android by taking a dependency on Glide. See my post on the topic here.