ListView item images misplacing and disappear sometimes while scroll up/down in Xamrin.Form

Hello

I have read few blogs but didn't find solution of it.

When I scroll Up/Down, some image misplace and some image disappear. I have review my code and given enough time to get rid of the problem. But unfortunately I didn't find any way to resolve this.

Can anybody please guide me? I check with iOS.

EmployeeResultsPage

<ListView x:Name="EmployeeResultsListView"
          ItemsSource="{Binding EmployeeResults}"
          RowHeight="200"
          IsPullToRefreshEnabled="true"
          RefreshCommand="{Binding RefreshDataCommand}"
          IsRefreshing="{Binding IsRefreshingData, Mode=OneWay}"
          ItemAppearing="Employee_ItemAppearing"
    <ListView.ItemTemplate>
        <DataTemplate>
            <local:EmployeeResultViewCell />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

EmployeeResultsPage.CS

private void Employee_ItemAppearing(object sender, ItemVisibilityEventArgs e)
{
    var itemObject = e.Item as ExtendedEmployee;
    if (_viewModel.EmployeeResults.Last() == itemObject)
    {
        if (_viewModel.LoadEmployee.CanExecute(null))
        {
            _viewModel.LoadEmployee.Execute(null);
        }
    }
}

EmployeeResultViewModel

[ImplementPropertyChanged]
public class EmployeeResultsViewModel : ViewModelBase
{
    private async Task LoadEmployee()
    {
        EmployeeResults = GetDataUsingAPI(); //15 records per call
    }

    public ObservableRangeCollection<ExtendedEmployee> EmployeeResults { get; set; }

    public string EmployeePhotoUrl { get; set; }
    public string EmployeeName { get; set; }
}

EmployeeResultViewCell

<ViewCell.View>
    <Grid RowSpacing="0" ColumnSpacing="0" VerticalOptions="Center" HeightRequest="150">
        <Image x:Name="EmployeeImage" Grid.Column="0" HeightRequest="150" WidthRequest="150"
        Source="{Binding EmployeePhotoUrl}" />
        <Label Text="{Binding EmployeeName}" FontSize="18" TextColor="Grey"/>
    </Grid>
</ViewCell.View>

CS File

public partial class EmployeeResultViewCell : CustomViewCell
{
    public EmployeeResultViewCell()
    {
        InitializeComponent();
    }

    protected override void OnBindingContextChanged()
    {
        base.OnBindingContextChanged();
        var employee = (BindingContext as ExtendedEmployee);
    }
}

Best Answers

  • developer007developer007 ✭✭
    Accepted Answer

    @15mgm15 said:
    @developer007 I suggest you to double check the EmployeePhotoUrl string then, I suppose that the string url is incorrect.

    The reason of not showing images was something else. I have read full blog of FFImageloading. You need to add following code in your AppDelegate.cs to make it visible. I have added following code and it start to working fine.

    public override bool FinishedLaunching (UIApplication uiApp, NSDictionary options)
    {
        FFImageLoading.Forms.Touch.CachedImageRenderer.Init();
        var dummy = new FFImageLoading.Forms.Touch.CachedImageRenderer();
    
        Xamarin.Forms.Forms.Init ();
        LoadApplication (new App ());
        return base.FinishedLaunching (uiApp, options);
    }
    
  • developer007developer007 ✭✭
    Accepted Answer

    @VaneQ said:

    @VaneQ said:
    I have the same problem, not in iOS but in Android
    in the xam

    I have solved this issue by putting following line in Appdelegate.cs

    FFImageLoading.Forms.Touch.CachedImageRenderer.Init();

Answers

  • developer007developer007 Member ✭✭

    @15mgm15 said:
    I think you can use Link to render the images correctly.

    Hi,
    Sure, I will try. Can you please suggest for above code so I can modify rather rework for ListView?

  • 15mgm1515mgm15 USMember ✭✭✭✭

    If you use the FFImageLoading in stead of using Image you only need to change it to CachedImage

  • developer007developer007 Member ✭✭
    edited February 2018

    @15mgm15 said:
    If you use the FFImageLoading in stead of using Image you only need to change it to CachedImage

    Hi
    I have tried as you have suggested. But I can't see image in CachedImage control.

    I have changed following. Please let me know if I am missing something.

    1- I have following Project Structure
    Folder1
    1- Namespace.Droid
    2- Namespace.iOS
    3- Platforms.Shared
    SharedFolder
    1- Namespace(Portable)

    2- I have added following DLLs in 1- Namespace.iOS, 2- Namespace(Portable)
    1- FFImageLoading
    2- FFImageLoading.Forms
    3- FFImageLoading.Platform
    4- FFImageLoading.Transformations

    3- EmployeeResultViewCell: Added assembly and control

    xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
    xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"

    <ffimageloading:CachedImage x:Name="EmployeeImage" Grid.Column="0"
    IsVisible="True" HeightRequest="150" WidthRequest="150" Source="{Binding EmployeePhotoUrl}>

    I have added above things. There is no error. It run perfectly but I don't see any image in control.

    Can you please guide me if I am missing something(may be in Namespace.iOS)?

  • 15mgm1515mgm15 USMember ✭✭✭✭

    @developer007 I suggest you to double check the EmployeePhotoUrl string then, I suppose that the string url is incorrect.

  • developer007developer007 Member ✭✭
    Accepted Answer

    @15mgm15 said:
    @developer007 I suggest you to double check the EmployeePhotoUrl string then, I suppose that the string url is incorrect.

    The reason of not showing images was something else. I have read full blog of FFImageloading. You need to add following code in your AppDelegate.cs to make it visible. I have added following code and it start to working fine.

    public override bool FinishedLaunching (UIApplication uiApp, NSDictionary options)
    {
        FFImageLoading.Forms.Touch.CachedImageRenderer.Init();
        var dummy = new FFImageLoading.Forms.Touch.CachedImageRenderer();
    
        Xamarin.Forms.Forms.Init ();
        LoadApplication (new App ());
        return base.FinishedLaunching (uiApp, options);
    }
    
  • VaneQVaneQ Member ✭✭

    I have the same problem, not in iOS but in Android

    in the xam


  • VaneQVaneQ Member ✭✭

    @VaneQ said:
    I have the same problem, not in iOS but in Android
    in the xam

  • VaneQVaneQ Member ✭✭

    @VaneQ said:

    @VaneQ said:
    I have the same problem, not in iOS but in Android

  • developer007developer007 Member ✭✭
    Accepted Answer

    @VaneQ said:

    @VaneQ said:
    I have the same problem, not in iOS but in Android
    in the xam

    I have solved this issue by putting following line in Appdelegate.cs

    FFImageLoading.Forms.Touch.CachedImageRenderer.Init();

Sign In or Register to comment.