Forum Xamarin.Forms

Listview not smoothly scrolling lacking. when scroll fast.

REJAHREJAH Member ✭✭✭
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>
Tagged:

Answers

  • REJAHREJAH Member ✭✭✭
    I am using CacheStrategy=RetainElement.
  • YelinzhYelinzh Member, Xamarin Team Xamurai

    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

  • REJAHREJAH Member ✭✭✭

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

  • REJAHREJAH Member ✭✭✭

    How to imlement CacheStrategy=RecycleElement on OnElementChanged in codebehind.

  • NMackayNMackay GBInsider, University admin
    edited February 2020

    @REJAH said:
    I am using CacheStrategy=RetainElement.

    And you wonder why performance is bad... :o, 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.

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    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; }
        ...
    }
    
  • REJAHREJAH Member ✭✭✭

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

               System.Reflection.TargetInvocationException: 'Exception has been thrown by the target of an invocation.'
    
  • YelinzhYelinzh Member, Xamarin Team Xamurai

    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

Sign In or Register to comment.