1

I have problem with scroll many downloaded images(displaying by url) in listview. I tried add library for images FFImageLoading but it not solve problem with scroll. Also I cannot use ListViewCachingStrategy.RecycleElement because I have viewcell with different amount of view elements.

How to solve problem with scroll?

My mainpage:

using System.Collections.Generic;
using FFImageLoading.Forms;
using ScrollList.ViewModels;
using Xamarin.Forms;

namespace ScrollList
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            var listView = new ListView()
            {
                HasUnevenRows = true,
                ItemTemplate = new DataTemplate(typeof(CustomProfileCell)),
                SeparatorVisibility = SeparatorVisibility.None
            };
            Content = listView;

            listView.ItemsSource = posts;
        }

        async void WallItemTapped(object sender, ItemTappedEventArgs e)
        {

        }
    }

    public class PostStackLayout : StackLayout
    {
        private Grid _imageGridLayout = null;

        protected override void OnBindingContextChanged()
        {
            var wallPostViewModel = (MainPageViewModel)BindingContext;
            switch (wallPostViewModel.Images.Count)
            {
                case 1:
                    _imageGridLayout = GetGridOnePhoto(wallPostViewModel);
                    break;

                case 2:
                    _imageGridLayout = GetGridTwoPhotos(wallPostViewModel);
                    break;

                case 3:
                    _imageGridLayout = GetGridThreePhotos(wallPostViewModel);
                    break;

             // skip some code

                case 8:
                    _imageGridLayout = GetGridEightPhotos(wallPostViewModel);
                    break;
            }

            Children.Add(_imageGridLayout);
        }

        private Grid GetGridOnePhoto(MainPageViewModel model)
        {
            var postImage1_0 = new CachedImage
            {
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Source = model.Images[0]
            };
            //Image grids for 1 post images
            _imageGridLayout = new Grid()
            {
                ColumnDefinitions = new ColumnDefinitionCollection
                {
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Auto)}
                },
                RowDefinitions = new RowDefinitionCollection
                {
                    new RowDefinition {Height = new GridLength(1, GridUnitType.Auto)}
                }
            };
            _imageGridLayout.Children.Add(postImage1_0, 0, 0);
            return _imageGridLayout;
        }

        private Grid GetGridTwoPhotos(MainPageViewModel model)
        {
            var postImage2_0 = new CachedImage
            {
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Source = model.Images[0],
            };
            var postImage2_1 = new CachedImage
            {
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Source = model.Images[1],
            };
            //Image grids for 2 post images
            _imageGridLayout = new Grid()
            {
                ColumnDefinitions = new ColumnDefinitionCollection
                {
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)}
                },
                RowDefinitions = new RowDefinitionCollection
                {
                    new RowDefinition {Height = new GridLength(1, GridUnitType.Auto)}
                }
            };
            _imageGridLayout.Children.Add(postImage2_0, 0, 0);
            _imageGridLayout.Children.Add(postImage2_1, 1, 0);
            return _imageGridLayout;
        }

        private Grid GetGridThreePhotos(MainPageViewModel model)
        {
            var postImage3_0 = new CachedImage
            {
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Source = model.Images[0],
            };
            var postImage3_1 = new CachedImage
            {
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Source = model.Images[1],
            };
            var postImage3_2 = new CachedImage
            {
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Source = model.Images[2],
            };
            //Image grids for 3 post images
            _imageGridLayout = new Grid()
            {
                ColumnDefinitions = new ColumnDefinitionCollection
                {
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)}
                },
                RowDefinitions = new RowDefinitionCollection
                {
                    new RowDefinition {Height = new GridLength(1, GridUnitType.Auto)},
                    new RowDefinition {Height = new GridLength(1, GridUnitType.Auto)}
                },
            };
            _imageGridLayout.Children.Add(postImage3_0, 0, 2, 0, 1);
            _imageGridLayout.Children.Add(postImage3_1, 0, 1);
            _imageGridLayout.Children.Add(postImage3_2, 1, 1);
            return _imageGridLayout;
        }

        // skip some code
        private Grid GetGridEightPhotos(MainPageViewModel model)
        {
            var postImage8_0 = new CachedImage
            {
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Source = model.Images[0],
            };
            var postImage8_1 = new CachedImage
            {
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Source = model.Images[1],
            };
            var postImage8_2 = new CachedImage
            {
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Source = model.Images[2],
            };
            var postImage8_3 = new CachedImage
            {
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Source = model.Images[3],
            };
            var postImage8_4 = new CachedImage
            {
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Source = model.Images[4],
            };
            var postImage8_5 = new CachedImage
            {
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Source = model.Images[5],
            };
            var postImage8_6 = new CachedImage
            {
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Source = model.Images[6],
            };
            var postImage8_7 = new CachedImage
            {
                Aspect = Aspect.AspectFit,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                Source = model.Images[7],
            };
            //Image grids for 8 post images
            _imageGridLayout = new Grid
            {
                ColumnDefinitions = new ColumnDefinitionCollection
                {
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)}
                },
                RowDefinitions = new RowDefinitionCollection
                {
                    new RowDefinition {Height = new GridLength(1, GridUnitType.Auto)},
                    new RowDefinition {Height = new GridLength(1, GridUnitType.Auto)}
                }
            };
            _imageGridLayout.Children.Add(postImage8_0, 0, 0);
            _imageGridLayout.Children.Add(postImage8_1, 1, 0);
            _imageGridLayout.Children.Add(postImage8_2, 2, 0);
            _imageGridLayout.Children.Add(postImage8_3, 3, 0);
            _imageGridLayout.Children.Add(postImage8_4, 0, 1);
            _imageGridLayout.Children.Add(postImage8_5, 1, 1);
            _imageGridLayout.Children.Add(postImage8_6, 2, 1);
            _imageGridLayout.Children.Add(postImage8_7, 3, 1);
            return _imageGridLayout;
        }
    }

    public class CustomProfileCell : ViewCell
    {
        public CustomProfileCell()
        {
            //mainLayout
            StackLayout mainLayout = new StackLayout() { Padding = new Thickness(0, 0, 0, 8) };
            Grid postGrid = new Grid
            {
                BackgroundColor = Color.White,
                Padding = new Thickness(10, 5, 10, 5),
                ColumnDefinitions = new ColumnDefinitionCollection
                {
                    new ColumnDefinition {Width = GridLength.Auto},
                    new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)}
                },
                RowDefinitions = new RowDefinitionCollection
                {
                    new RowDefinition {Height = GridLength.Auto},
                    new RowDefinition {Height = GridLength.Auto},
                    new RowDefinition {Height = GridLength.Auto}
                }
            };
            mainLayout.Children.Add(postGrid);

            //Avatar Layout
            var avatarLayout = new StackLayout();
            postGrid.Children.Add(avatarLayout, 0, 0);

            var avatarImage = new Image
            {
                Aspect = Aspect.AspectFill,
                WidthRequest = Device.OnPlatform(55, 55, 75),
                HeightRequest = Device.OnPlatform(55, 55, 75)
            };
            avatarImage.SetBinding(Image.SourceProperty, new Binding("UserImage"));
            avatarLayout.Children.Add(avatarImage);

            //User Name Layout
            var userNameLayout = new StackLayout();
            postGrid.Children.Add(userNameLayout, 1, 0);
            var userNameLabel = new Label()
            {
                TextColor = Color.Black
            };
            userNameLabel.SetBinding(Label.TextProperty, new Binding("UserName"));
            userNameLayout.Children.Add(userNameLabel);

            //Post Text Layout
            var textLayout = new StackLayout();
            var textLabel = new Label()
            {
                TextColor = Color.Black
            };
            textLabel.SetBinding(Label.TextProperty, new Binding("Text"));
            textLayout.Children.Add(textLabel);
            postGrid.Children.Add(textLayout, 0, 2, 1, 2);

            //insert photos
            var postStackLayout = new PostStackLayout();
            postGrid.Children.Add(postStackLayout, 0, 2, 2, 3);

            this.View = mainLayout;
        }
    }
 }

Example of bad works scroll

Cœur
  • 37,241
  • 25
  • 195
  • 267
Ihor Levkivskyi
  • 341
  • 5
  • 14
  • When I am loading my listview items, I have a loading/activity indicator while new items are loading. have you considered adding an indicator? – nishantvodoo Aug 23 '16 at 21:16
  • Could you show code example where used "loading/activity indicator" or reference I can read about it. – Ihor Levkivskyi Aug 23 '16 at 21:24
  • I am using Xaml and listview template and using databinding. https://developer.xamarin.com/guides/xamarin-forms/user-interface/listview/data-and-databinding/. And I implemented infinite listview similar to this link: http://www.codenutz.com/lac09-xamarin-forms-infinite-scrolling-listview/ – nishantvodoo Aug 23 '16 at 21:44
  • Git: https://github.com/mattwhetton/Codenutz.XF.InfiniteListView for code reference – nishantvodoo Aug 23 '16 at 21:56

0 Answers0