Forum Xamarin.Forms

Xamarin Forms Listview items dissapearing when scrolling

PGXamPGXam Member ✭✭

I've run into a problem with listviews in xamarin forms.( + Prism MVVM )
I have a history page which shows a list of months with a list of games in that month. When scrollling up and down some items just dissapear.
Video showing the problem: -1EXNKQB8dI (youtube id, can't post links yet)

Xaml code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 
        REMOVED xmlns so i can post
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="WhoIsWhoAPP.Views.HistoryPage"
             BackgroundColor="{StaticResource AxxesGray}">
    <StackLayout Padding="0,20,0,0">
        <Label x:Name="PageTitle"
               FontFamily="{StaticResource BoldFont}"
               Text="{Binding Title}"
               TextColor="{StaticResource AxxesWhite}"
               HorizontalOptions="CenterAndExpand"/>
        <Grid x:Name="gridLayout">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.5*"/>
                <ColumnDefinition Width="1.5*"/>
                <ColumnDefinition Width="2*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="{Binding RowHeight, Mode=TwoWay}"/>
                <RowDefinition Height="{Binding RowHeight, Mode=TwoWay}"/>
                <RowDefinition Height="{Binding RowHeight, Mode=TwoWay}"/>
            </Grid.RowDefinitions>
            <ffimageloading:CachedImage Source="{Binding ImageSource}"
                                        Grid.Column="1"
                                        Grid.Row="0"
                                        Grid.RowSpan="3">
                <ffimageloading:CachedImage.Transformations>
                    <fftransformations:CircleTransformation/>
                </ffimageloading:CachedImage.Transformations>
            </ffimageloading:CachedImage>
            <Label Grid.Column="2"
                   Grid.Row="0"
                   Text="{Binding Name}"
                   FontFamily="{StaticResource BoldFont}"
                   TextColor="{StaticResource AxxesOrange}"
                   x:Name="lbName"/>
            <Label Grid.Column="2"
                   Grid.Row="1">
                <Label.FormattedText>
                    <FormattedString>
                        <Span Text="Best place: "
                          FontFamily="{StaticResource NormalFont}"
                          TextColor="{StaticResource AxxesWhite}"
                          x:Name="spPlace1"/>
                        <Span Text="{Binding Place}"
                          FontFamily="{StaticResource BoldFont}"
                          TextColor="{StaticResource AxxesOrange}"
                          x:Name="spPlace2"/>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
            <Label Grid.Column="2"
                   Grid.Row="2">
                <Label.FormattedText>
                    <FormattedString>
                        <Span Text="Most points: "
                          FontFamily="{StaticResource NormalFont}"
                          TextColor="{StaticResource AxxesWhite}"
                          x:Name="spPoints1"/>
                        <Span Text="{Binding Points}"
                          FontFamily="{StaticResource BoldFont}"
                          TextColor="{StaticResource AxxesOrange}"
                          x:Name="spPoints2"/>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
        </Grid>
        <ListView ItemsSource="{Binding Months}"
                  HasUnevenRows="True"
                  SeparatorVisibility="None"
                  VerticalOptions="FillAndExpand"
                  SelectedItem="{Binding SelectedItem}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="10*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="1"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Label Grid.Row="0"
                                   Grid.Column="2"
                                   Grid.ColumnSpan="3"
                                   FontFamily="{StaticResource BoldFont}"
                                   TextColor="{StaticResource AxxesWhite}"
                                   Text="{Binding Month}"/>
                            <BoxView Grid.Row="1"
                                     Grid.Column="1"
                                     Grid.ColumnSpan="5"
                                     HeightRequest="1"
                                     Color="{StaticResource AxxesOrange}"/>
                            <ListView Grid.Row="2"
                                      Grid.Column="2"
                                      Grid.ColumnSpan="3"
                                      ItemsSource="{Binding Attempts}"
                                      SeparatorVisibility="None"
                                      SelectedItem="{Binding SelectedItem}"
                                      HasUnevenRows="True"
                                      RowHeight="0"
                                      HeightRequest="{Binding ListHeight}">
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <ViewCell>
                                            <Grid HeightRequest="{Binding RowHeight}">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="*"/>
                                                    <ColumnDefinition Width="6*"/>
                                                    <ColumnDefinition Width="6*"/>
                                                    <ColumnDefinition Width="*"/>
                                                </Grid.ColumnDefinitions>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="10"/>
                                                    <RowDefinition Height="Auto"/>
                                                    <RowDefinition Height="10"/>
                                                </Grid.RowDefinitions>
                                                <Label Grid.Row="1"
                                                       Grid.Column="1"
                                                       TextColor="{StaticResource AxxesWhite}"
                                                       FontFamily="{StaticResource NormalFont}"
                                                       Text="{Binding Date, StringFormat='{}{0:d}'}"
                                                       />
                                                <Label Grid.Row="1"
                                                       Grid.Column="2"
                                                       TextColor="{StaticResource AxxesOrange}"
                                                       FontFamily="{StaticResource BoldFont}"
                                                       Text="{Binding Points}"
                                                       HorizontalOptions="EndAndExpand"/>
                                                <BoxView Grid.Column="0"
                                                         Grid.ColumnSpan="4"
                                                         Grid.Row="2"
                                                         HeightRequest="1"
                                                         Color="{StaticResource AxxesWhite}"
                                                         VerticalOptions="EndAndExpand"/>
                                            </Grid>
                                        </ViewCell>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

ViewModel:

public class HistoryPageViewModel : BindableBase
    {
        private readonly IPageDialogService pageDialogService;

        private string title;

        private string place;

        private string points;

        private string name;

        private double rowHeight;
        private string imageSource;

        private DataTemplate itemTemplate;


        private List<HistoryMonth> months;

        public HistoryPageViewModel(IPageDialogService pageDialogService)
        {
            Title = "History";

            //Set UI values
            RowHeight = Application.Current.MainPage.Width / 12;
            ListHeight = 50;


            /*SelectedItem += (sender, e) =>
            {
                if (SelectedItem != null)
                {
                    //Do something with selectedItem if needed
                    SelectedItem = null;
                }
            };*/

            //Set test-data
            Place = 1.Ordinalize();
            Points = "5000";
            Name = "Mickey Mouse";
            ImageSource = "Mickey.png";
            var janAttempts = new List<HistoryAttempt>();
            var febAttempts = new List<HistoryAttempt>();
            var marAttempts = new List<HistoryAttempt>();
            var aprAttempts = new List<HistoryAttempt>();
            for (var i = 0; i < 5; i++)
            {
                janAttempts.Add(new HistoryAttempt { Date = new DateTime(2019, 1, 1), Points = 1000 });
                febAttempts.Add(new HistoryAttempt { Date = new DateTime(2019, 2, 1), Points = 2000 });
                marAttempts.Add(new HistoryAttempt { Date = new DateTime(2019, 3, 1), Points = 3000 });
                aprAttempts.Add(new HistoryAttempt { Date = new DateTime(2019, 4, 1), Points = 4000 });
            }

            var historyMonths = new List<HistoryMonth>
            {
                new HistoryMonth {Month = Month.January,Attempts = janAttempts},
                new HistoryMonth {Month = Month.February, Attempts = febAttempts},
                new HistoryMonth {Month = Month.March, Attempts = marAttempts},
                new HistoryMonth {Month = Month.April, Attempts = aprAttempts}
            };
            Months = historyMonths;
            this.pageDialogService = pageDialogService;
        }


        public HistoryMonth SelectedItem
        {
            get => null;
            set => RaisePropertyChanged(nameof(SelectedItem));
        }

        public string Title
        {
            get => title;
            set => SetProperty(ref title, value);
        }
        public string ImageSource
        {
            get => imageSource;
            set => SetProperty(ref imageSource, value);
        }

        public string Place
        {
            get => place;
            set => SetProperty(ref place, value);
        }

        public string Points
        {
            get => points;
            set => SetProperty(ref points, value);
        }

        public string Name
        {
            get => name;
            set => SetProperty(ref name, value);
        }

        public double RowHeight
        {
            get => rowHeight;
            set => SetProperty(ref rowHeight, value);
        }

        public DataTemplate ItemTemplate
        {
            get => itemTemplate;
            set => SetProperty(ref itemTemplate, value);
        }

        public List<HistoryMonth> Months
        {
            get => months;
            set => SetProperty(ref months, value);
        }

        private double listHeight;
        public double ListHeight
        {
            get => listHeight;
            set => SetProperty(ref listHeight, value);
        }
    }

I've only been using Xamarin for 3 weeks so any help is appreciated

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    Could you please share a sample so that I can run it on my side to test your issues.
    Moreover, I can't find your video through your youtube ID so that I can't understand your issue yet.

  • PGXamPGXam Member ✭✭

    youtube.com/watch?v=-1EXNKQB8dI

  • PGXamPGXam Member ✭✭

    I Updated the way the page works by using grouping, now the listview items don't dissapear anymore but certain elements get pushed out of the view a bit sometimes.

    Demo for the new problem: youtu.be/e4fE9LpqN54

    Updated XAML:

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="xamarin.com/schemas/2014/forms"
                 xmlns:x="schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
                 xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
                 xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
                 prism:ViewModelLocator.AutowireViewModel="True"
                 x:Class="WhoIsWhoAPP.Views.HistoryPage"
                 BackgroundColor="{StaticResource AxxesGray}">
        <StackLayout Padding="0,20,0,0">
            <Label x:Name="PageTitle"
                   FontFamily="{StaticResource BoldFont}"
                   Text="{Binding Title}"
                   TextColor="{StaticResource AxxesWhite}"
                   HorizontalOptions="CenterAndExpand"/>
            <Grid x:Name="gridLayout">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.5*"/>
                    <ColumnDefinition Width="1.5*"/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <ffimageloading:CachedImage Source="{Binding ImageSource}"
                                            Grid.Column="1"
                                            Grid.Row="0"
                                            Grid.RowSpan="3"
                                            DownsampleToViewSize="True">
                    <ffimageloading:CachedImage.Transformations>
                        <fftransformations:CircleTransformation/>
                    </ffimageloading:CachedImage.Transformations>
                </ffimageloading:CachedImage>
                <Label Grid.Column="2"
                       Grid.Row="0"
                       Text="{Binding Name}"
                       FontFamily="{StaticResource BoldFont}"
                       TextColor="{StaticResource AxxesOrange}"
                       x:Name="lbName"/>
                <Label Grid.Column="2"
                       Grid.Row="1">
                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="Best place: "
                              FontFamily="{StaticResource NormalFont}"
                              TextColor="{StaticResource AxxesWhite}"
                              x:Name="spPlace1"/>
                            <Span Text="{Binding Place}"
                              FontFamily="{StaticResource BoldFont}"
                              TextColor="{StaticResource AxxesOrange}"
                              x:Name="spPlace2"/>
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
                <Label Grid.Column="2"
                       Grid.Row="2">
                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="Most points: "
                              FontFamily="{StaticResource NormalFont}"
                              TextColor="{StaticResource AxxesWhite}"
                              x:Name="spPoints1"/>
                            <Span Text="{Binding Points}"
                              FontFamily="{StaticResource BoldFont}"
                              TextColor="{StaticResource AxxesOrange}"
                              x:Name="spPoints2"/>
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
            </Grid>
            <ListView ItemsSource="{Binding AttemptsGrouped}"
                      HasUnevenRows="True"
                      SeparatorVisibility="None"
                      VerticalOptions="FillAndExpand"
                      SelectedItem="{Binding SelectedItem}"
                      IsGroupingEnabled="True"
                      GroupDisplayBinding="Key">
                <ListView.GroupHeaderTemplate>
                    <DataTemplate>
                        <ViewCell>
                           <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="10*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="10*"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Label Grid.Row="1"
                                       Grid.Column="2"
                                       Grid.ColumnSpan="3"
                                       FontFamily="{StaticResource BoldFont}"
                                       TextColor="{StaticResource AxxesWhite}"
                                       Text="{Binding Key}"/>
                                <BoxView Grid.Row="2"
                                         Grid.Column="1"
                                         Grid.ColumnSpan="5"
                                         HeightRequest="1"
                                         Color="{StaticResource AxxesOrange}"/>
                            </Grid> 
                        </ViewCell>
                    </DataTemplate>
                </ListView.GroupHeaderTemplate>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="12*"/>
                                    <ColumnDefinition Width="12*"/>
                                    <ColumnDefinition Width="12*"/>
                                    <ColumnDefinition Width="60*"/>
                                    <ColumnDefinition Width="60*"/>
                                    <ColumnDefinition Width="12*"/>
                                    <ColumnDefinition Width="12*"/>
                                    <ColumnDefinition Width="12*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="10"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="10"/>
                                </Grid.RowDefinitions>
                                <Label Grid.Row="1"
                                       Grid.Column="3"
                                       TextColor="{StaticResource AxxesWhite}"
                                       FontFamily="{StaticResource NormalFont}"
                                       Text="{Binding Date, StringFormat='{}{0:d}'}"
                                       />
                                <Label Grid.Row="1"
                                       Grid.Column="4"
                                       TextColor="{StaticResource AxxesOrange}"
                                       FontFamily="{StaticResource BoldFont}"
                                       Text="{Binding Points}"
                                       HorizontalOptions="EndAndExpand"/>
                                <BoxView Grid.Column="2"
                                         Grid.ColumnSpan="4"
                                         Grid.Row="2"
                                         HeightRequest="1"
                                         Color="{StaticResource AxxesWhite}"
                                         VerticalOptions="EndAndExpand"/>
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage>
    
  • LandLuLandLu Member, Xamarin Team Xamurai

    I have seen your videos, but I can't test your issues on my side.
    Could you please attach your sample here? Or try to upload a sample to GitHub and tell us the link.

  • PGXamPGXam Member ✭✭

    github.com/RobinLaevaert/Xam Here is a github repo with the page

  • LandLuLandLu Member, Xamarin Team Xamurai

    @PGXam I've tested your code on my side, but I can't reproduce your issues. Maybe it's device related?

    However, I think your layout in your view cell is too complicated:

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="12*"/>
        <ColumnDefinition Width="12*"/>
        <ColumnDefinition Width="12*"/>
        <ColumnDefinition Width="60*"/>
        <ColumnDefinition Width="60*"/>
        <ColumnDefinition Width="12*"/>
        <ColumnDefinition Width="12*"/>
        <ColumnDefinition Width="12*"/>
    </Grid.ColumnDefinitions>
    

    You could optimize it or try to use another way to present the layout to see the effect.

Sign In or Register to comment.