Listview not smoothly scrolling lacking. when scroll fast.

REJAH

Listview not smoothly scrolling. Listview contain.


<ViewCell>

<Grid BackgroundColor="{DynamicResource PageBackgroundColor}" Padding="5,-6,5,2" >

<StackLayout BackgroundColor="{DynamicResource PrimaryColor}" Padding="0" Margin="0,5,0,5">


<!--standard List-->
<StackLayout Padding="1" Margin="0,0,0,0" BackgroundColor="{DynamicResource PrimaryColor}" >


<StackLayout.Triggers >

<DataTrigger TargetType="StackLayout"
Binding="{Binding id}"
Value="quiz" >
<Setter Property="IsVisible" Value="False" />
<Setter Property="HeightRequest" Value="0" />



</DataTrigger>



<DataTrigger TargetType="StackLayout"
Binding="{Binding id}"
Value="special" >
<Setter Property="IsVisible" Value="False" />
<Setter Property="HeightRequest" Value="0" />


</DataTrigger>



<DataTrigger TargetType="StackLayout"
Binding="{Binding id}"
Value="cell" >
<Setter Property="IsVisible" Value="False" />
<Setter Property="HeightRequest" Value="0" />


</DataTrigger>



</StackLayout.Triggers>

<Grid>


<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<ffimageloading:CachedImage Aspect="AspectFill" Grid.RowSpan="2" FadeAnimationDuration="100" DownsampleHeight="4444" CacheType="All"
DownsampleUseDipUnits="False" DownsampleToViewSize="False" FadeAnimationEnabled="True" FadeAnimationForCachedImages="True" CacheDuration= "0"


HeightRequest="200" Source="{Binding media}" HorizontalOptions="FillAndExpand">



</ffimageloading:CachedImage>



<customcontrols:GradientColorStack StartColor="Transparent" EndColor="#000000" Opacity=".9" Margin="0,-40,0,0" Grid.Row="1">



</customcontrols:GradientColorStack>

<Label Margin="8" Grid.Row="1" Text="{Binding title}" FontFamily="libre_bold.ttf#libre_bold" TextType="Html" FontSize="19" TextColor="White" FontAttributes="Bold" >

</Label>

</Grid>


<Label Text="{Binding excerpt }" FontFamily="roboto_regular.ttf#roboto_regular" CharacterSpacing="1"
IsVisible="True" FontSize="15" Margin="4,6,4,2" TextType="Html" TextColor="{DynamicResource ExcerptTextColor}" VerticalOptions="StartAndExpand" />


<StackLayout Margin="0,-5,0,0" HeightRequest="60" VerticalOptions="End" HorizontalOptions="FillAndExpand" >


<Grid HorizontalOptions="FillAndExpand" RowSpacing="0" HeightRequest="60">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>
<Label Text="{Binding date}" Grid.Row="0" Grid.Column="0" HorizontalOptions="StartAndExpand" Margin="5,0,0,0" WidthRequest="150" TextColor="Gray" FontSize="11" VerticalTextAlignment="Center" />
<Label Text="Read more..." Grid.Row="0" Grid.Column="3" Margin="0,5,4,0" HorizontalOptions="End" TextColor="Gray" FontSize="11" />


<Image x:Name="imgLike1" Source="heart" Grid.Row="1" Grid.Column="0" HeightRequest="18" WidthRequest="18" BackgroundColor="Transparent" Margin="12,0,0,0" HorizontalOptions="Start">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Like_Tapped"/>
</Image.GestureRecognizers>
</Image>
<Label Grid.Row="2" Grid.Column="0" WidthRequest="100" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Start" Margin="5,0,0,0" >

<Label.FormattedText>
<FormattedString>
<Span x:Name="lblLike" Text="{Binding post_data.likes ,Mode=TwoWay}" FontSize="11" TextColor="Gray" />
<Span Text=" Likes" TextColor="Gray" FontSize="11" />

</FormattedString>
</Label.FormattedText>



</Label>



<Image Source="eye" Grid.Row="1" Grid.Column="1" HeightRequest="22" WidthRequest="22" BackgroundColor="Transparent" HorizontalOptions="Start" Margin="7,0,0,0" />

<Label Grid.Row="2" Grid.Column="1" HorizontalOptions="StartAndExpand" WidthRequest="100" VerticalTextAlignment="Center" Margin="0,-2,0,0" >

<Label.FormattedText>
<FormattedString>
<Span Text="{Binding post_data.views ,Mode=TwoWay}" FontSize="11" TextColor="Gray" />
<Span Text=" Views" TextColor="Gray" FontSize="11" />
</FormattedString>
</Label.FormattedText>



</Label>



<Image Grid.Row="1" Grid.Column="2" Source="sr" BackgroundColor="Transparent" HorizontalOptions="Start" HeightRequest="18" WidthRequest="18" Margin="7,0,0,0" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="ImageButton_Clicked_ShareItem" />
</Image.GestureRecognizers>
</Image>

<Label TextColor="Gray" Grid.Row="2" Grid.Column="2" FontSize="Small" Margin="0,0,0,0">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding post_data.shares}" FontSize="11" TextColor="Gray" />
<Span Text=" Shares" TextColor="Gray" FontSize="11" />

</FormattedString>
</Label.FormattedText>
</Label>


<Image Source="bm" Grid.Row="1" Grid.Column="3" Grid.RowSpan="2" WidthRequest="21" Margin="0,-4,10,0" BackgroundColor="Transparent" HorizontalOptions="Center" VerticalOptions="Center" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="ImageButton_Clicked_SaveItem" />
</Image.GestureRecognizers>
</Image>


</Grid>




</StackLayout>

</StackLayout>




<!-- quiz List-->
<Grid BackgroundColor="{DynamicResource PrimaryColor}" Padding="4,2,4,2" IsVisible="False" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

<Grid.Triggers >

<DataTrigger TargetType="Grid"
Binding="{Binding id}"
Value="quiz" >
<Setter Property="IsVisible" Value="True" />

</DataTrigger>



</Grid.Triggers>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="6*"/>


</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Label VerticalTextAlignment="Center" TextColor="Black" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" >


<Label.FormattedText>
<FormattedString >

<Span Text="Q : " TextColor="{DynamicResource PrimaryTextColor}" FontSize="18" FontAttributes="Bold" />
<Span x:Name="lblQuestion" FontFamily="roboto_regular.ttf#roboto_regular" FontSize="16" TextColor="{DynamicResource PrimaryTextColor}" Text="{Binding question}" />


</FormattedString>
</Label.FormattedText>

</Label>

<Button x:Name="btn1" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Clicked="Button_Clicked" BorderWidth="1" CommandParameter="option1" Text="{Binding option1}" TextColor="{DynamicResource SecondaryTextColor}" BackgroundColor="{DynamicResource SettingsCellColor}" BorderColor="{DynamicResource ButtonBcolor}" CornerRadius="20" HeightRequest="40" Margin="5,0,5,0" />
<Button x:Name="btn2" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Clicked="Button_Clicked" BorderWidth="1" CommandParameter="option2" Text="{Binding option2}" TextColor="{DynamicResource SecondaryTextColor}" BackgroundColor="{DynamicResource SettingsCellColor}" BorderColor="{DynamicResource ButtonBcolor}" CornerRadius="20" HeightRequest="40" Margin="5,0,5,0"/>
<Button x:Name="btn3" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Clicked="Button_Clicked" BorderWidth="1" CommandParameter="option3" Text="{Binding option3}" TextColor="{DynamicResource SecondaryTextColor}" BackgroundColor="{DynamicResource SettingsCellColor}" BorderColor="{DynamicResource ButtonBcolor}" CornerRadius="20" HeightRequest="40" Margin="5,0,5,0"/>
<Button x:Name="btn4" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Clicked="Button_Clicked" BorderWidth="1" CommandParameter="option4" Text="{Binding option4}" TextColor="{DynamicResource SecondaryTextColor}" BackgroundColor="{DynamicResource SettingsCellColor}" BorderColor="{DynamicResource ButtonBcolor}" CornerRadius="20" HeightRequest="40" Margin="5,0,5,0">
<Button.Triggers >

<DataTrigger TargetType="Button"
Binding="{Binding option4}"
Value="" >
<Setter Property="IsVisible" Value="False" />

</DataTrigger>



</Button.Triggers>
</Button>
<Button x:Name="btn5" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" Clicked="Button_Clicked" BorderWidth="1" CommandParameter="option5" Text="{Binding option5}" TextColor="{DynamicResource SecondaryTextColor}" BackgroundColor="{DynamicResource QuizButtonColor}" CornerRadius="20" HeightRequest="40" BorderColor="Silver" Margin="5,0,5,0" >

<Button.Triggers >

<DataTrigger TargetType="Button"
Binding="{Binding option5}"
Value="" >
<Setter Property="IsVisible" Value="False" />

</DataTrigger>



</Button.Triggers>

</Button>



</Grid>

REJAH

I am using CacheStrategy=RetainElement.

Yelinzh

I am using CacheStrategy=RetainElement.

Please change CacheStrategy to RecycleElement and try again. For memory and performance reasons, app developers should specify RecycleElement when constructing a new ListView.

Tutorial:
https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.listviewcachingstrategy?view=xamarin-forms

REJAH

@Jarvan when trying CacheStrategy=RecycleElement then listview working very smoothly but its datatemplate recyle/ override on each other cell frequently.

REJAH

How to imlement CacheStrategy=RecycleElement on OnElementChanged in codebehind.

NMackay

@REJAH said:
I am using CacheStrategy=RetainElement.

And you wonder why performance is bad... , honestly if your using Retain element you have to question if the listview is the container control you should be using, seen this approach go badly wrong in another app.

Yelinzh

How to imlement CacheStrategy=RecycleElement on OnElementChanged in codebehind.

ListView doesn't provide a method to set a value for ListView.CachingStrategy directly. To solve this, you can set binding to the property and change the value in viewModel class.

<ListView x:Name="listview" ItemsSource="{Binding models}" CachingStrategy="{Binding cachingStrategy}">
    <ListView.ItemTemplate>
        ...
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

ViewModel class

public class ViewModel_1
{
    public ListViewCachingStrategy cachingStrategy { get; set; }
    ...
}

REJAH

@Jarvan when i binding CacheStrategy then bellow error has been occurred.

           System.Reflection.TargetInvocationException: 'Exception has been thrown by the target of an invocation.'

Yelinzh

Sorry for my mistake, ListView.CachingStrategy is not a bindable property but a constructor argument. The property should be specify at initialization and cannot be changed at run-time.

Set the CachingStrategy property of ListView.

<ListView x:Name="listview" CachingStrategy="{Binding cachingStrategy}" ...>

or

ListView listview = new ListView(ListViewCachingStrategy.RecycleElement);

Check the link:
https://stackoverflow.com/questions/46610449/using-cachingstrategy-on-listviewrenderer-causes-property-error