1. Home
  2. Forum
  3. Xamarin.Forms
  4. Bug: Showing of item not refreshed and duplicated

Bug: Showing of item not refreshed and duplicated

Hi,

I have a bug I can't explain. I think it's related to the SfListView.

I added a video and a reproduction code.

The video is in the zip file:



Please help because I am completely stuck on it.

Thanks,

Attachment: XForms_e86218e4.zip

5 Replies
LN Lakshmi Natarajan Syncfusion Team December 7, 2020 11:57 AM UTC

Hi Alexis, 
 
Thank you for using Syncfusion products. 
 
We have checked the reported query “Showing of item not refreshed and duplicated” from our end.  
 
We would like to inform you that the SfListView is completely developed with UI Virtualization(Item recycling) concept and it only creates the element only which are in view on initial loading. While scrolling, we have cache the created elements and recycled it by updating only the BindingContext of the SfListView item. 
 
The reported issue occurs since the the ListViewItem has no binding, hence the item is data value for the item is recycled. We suggest you to use MVVM concept to update the item data while reusing. Please refer the following documentation to use MVVM in SfListView, 
 
We have modified your sample using MVVM concept and you can refer from the following link, 
 
Please let us know if you need further assistance. 
 
Regards, 
Lakshmi Natarajan 


AL Alexis December 10, 2020 01:17 AM UTC

Ok I am sorry but I really struggle on this.
I need to unblur an image when I tap on it.
So in my xaml I have this:
WidthRequest="300" HeightRequest="300"
DownsampleToViewSize="true"
Source = "xxxx.jpg">
And in my code I do this:
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
++((sender as SfBorder).BindingContext as ListModel).ScoreValue;
BlurredTransformation bt = img.Transformations[0] as BlurredTransformation;
if (bt.Radius == 20)
bt.Radius = 0.1;
else bt.Radius = 0.1;
try
{
img.ReloadImage();
}
catch
{
}
}
I can't bind the radius because it's not a binding property.
then how can I change this?
I added the project.
Thanks,

Attachment: XForms_7e3be111.zip

LN Lakshmi Natarajan Syncfusion Team December 10, 2020 12:15 PM UTC

Hi Alexis, 
 
Thank you for the update. 
 
We have checked the reported query “How to UnBlur the FFImage when tapping the item’ from our side. We would like to inform you that you can bind the Transformation for the CachedImage and change the Radius on tapping the item. Please find the following code snippets for more reference, 
 
ListModel.cs: Create a List to bind to the Transformations property.  
    public class ListModel : INotifyPropertyChanged 
    { 
        private int scoreValue; 
        private List<ITransformation> transformations; 
 
        public ListModel() 
        { 
            Tranformations = new List<ITransformation>(); 
        } 
 
        public int ScoreValue 
        { 
            get { return scoreValue; } 
            set { scoreValue = value; this.OnPropertyChanged("ScoreValue"); } 
        } 
 
        public List<ITransformation> Tranformations 
        { 
            get { return transformations; } 
            set { transformations = value; this.OnPropertyChanged("Tranformations"); } 
        } 
    } 
 
Add transformation collection when populating the item. 
public partial class MainPage : ContentPage 
{ 
    public MainPage() 
    { 
        InitializeComponent(); 
    } 
 
    private void ContentPage_Appearing(object sender, EventArgs e) 
    { 
        var specialities = new ObservableCollection<ListModel>(); 
 
        for (int i = 0; i < 20; i++) 
        { 
            var item = new ListModel() { ScoreValue = i }; 
            item.Tranformations.Add(new BlurredTransformation() { Radius = 20 }); 
 
            specialities.Add(item); 
        } 
 
        speBubbles.ItemsSource = specialities; 
    } 
} 
 
RateElementTemplate.Xaml: Bind the Transformations collection to the CachedImage.Transformation bindable property. 
<border:SfBorder x:Name="border" BorderColor="Blue" HeightRequest="{ Binding Source={ x:Reference Root }, Path=HeightRequest }" WidthRequest="{ Binding Source={ x:Reference Root }, Path=WidthRequest }"> 
    <Grid  HorizontalOptions="Fill" VerticalOptions="Fill"> 
 
        <border:SfBorder x:Name="borderLabelScore" BackgroundColor="White"  HorizontalOptions="Center" VerticalOptions="End" CornerRadius="20" Opacity="0.6"> 
            <Grid> 
                <ffimageloading:CachedImage x:Name="img" HorizontalOptions="Center" VerticalOptions="Center" 
                        WidthRequest="300" HeightRequest="300"  
                        DownsampleToViewSize="true" 
                        Source = "http://loremflickr.com/600/600/nature?filename=simple.jpg" Transformations="{Binding Tranformations}"> 
                </ffimageloading:CachedImage>  
                ... 
            </Grid> 
        </border:SfBorder> 
    </Grid> 
    <border:SfBorder.GestureRecognizers> 
        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/> 
    </border:SfBorder.GestureRecognizers> 
</border:SfBorder> 
 
We have modified the given sample and attached in the following link, 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


AL Alexis December 14, 2020 02:56 PM UTC

It did the trick. thanks a lot

LN Lakshmi Natarajan Syncfusion Team December 15, 2020 05:18 AM UTC

Hi Alexis, 
 
Thank you for the update. 
 
We are glad that our solution meets your requirement. Please let us know if you need further assistance. As always we are happy to help you out. 
 
Lakshmi Natarajan 
 


Loader.
Up arrow icon