ListView not rendering last Cells correctly.

Perry89Perry89 Member ✭✭
edited July 10 in Xamarin.Forms

Hi!

I've been stack for a while on a very strange bug. I have a ListView that contains Custom ViewCell, some controls within that ViewCell are populated from database some of them are hardcoded. The amount of cells is depending on the amount of items coming back from the server. This behaves as expected. When I have 6 items coming back from database, ListView renders 6 items, however for some reason last 2, cells are empty.
Here is a code snippet from my XAML and code behind, and screenshot of my application.

<ListView x:Name="usersList" HorizontalOptions="Fill" HasUnevenRows="True" ItemTapped="UserDetailsTapped" RefreshAllowed="true" IsPullToRefreshEnabled="true"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Frame CornerRadius="10" BackgroundColor="White" Margin="0,5,0,5"> <StackLayout Orientation="Vertical" HorizontalOptions="Fill" Margin="-15"> <StackLayout Orientation="Horizontal" Margin="2"> <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> <StackLayout Orientation="Horizontal" HorizontalOptions="Center"> <Label Text="{Binding Name}" FontSize="Medium" TextColor="#F0BB7F" FontAttributes="Bold" VerticalOptions="Center"/> <Label Text="{Binding Surname}" FontSize="Medium" TextColor="#F0BB7F" FontAttributes="Bold" VerticalOptions="Center"/> </StackLayout> <StackLayout Orientation="Horizontal"> <Label Text="główny przedmiot:" FontSize="Small" TextColor="Gray" VerticalOptions="Center"/> <Label Text="#Matematyka#" FontSize="Small" TextColor="#F0BB7F" VerticalOptions="Center"/> </StackLayout> </StackLayout> <StackLayout HorizontalOptions="EndAndExpand" Margin="2" BackgroundColor="#F0BB7F"> <Image x:Name="ProfileImage" Source="profilwhite"/> </StackLayout> </StackLayout> <StackLayout Orientation="Horizontal" Margin="2"> <Label Text="Cena od" FontSize="Small" TextColor="Gray" VerticalOptions="Center"/> <Label Text="#40#" FontSize="Small" TextColor="#F0BB7F" VerticalOptions="Center"/> <Label Text="do" FontSize="Small" TextColor="Gray" VerticalOptions="Center"/> <Label Text="#60#" FontSize="Small" TextColor="#F0BB7F" VerticalOptions="Center"/> <Label Text="zł" FontSize="Small" TextColor="Gray" VerticalOptions="Center"/> <Label HorizontalOptions="EndAndExpand" Text="WIĘCEJ" TextColor="DarkGray" FontSize="Medium" Margin="5" FontAttributes="Bold"/> </StackLayout> </StackLayout> </Frame> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView>

And my code behind populating items:

`
protected override void OnAppearing()
{
GetAllProfileData();
base.OnAppearing();

    }
    private async void GetAllProfileData()
    {
        var result = await DependencyService.Get<IFirebaseAuthenticator>().GetAllUserData();
        PopulateProfile(result);

    }
    private void PopulateProfile(List<UserData> userData)
    {
        usersList.ItemsSource = userData;
    }

`
And a giphy with behaviour.

(I can't post Links :( )

Answers

  • Perry89Perry89 Member ✭✭
    edited July 10

    I've tried posting Giphy here, but I cannot. I can DM for anyone who is wiling to help me out! Thank you!!!

  • JohnHardmanJohnHardman GBUniversity mod

    @Perry89

    I haven't checked your XAML, as it's not formatted in a way that makes it easy to read.

    However, where this is your current code behind:

    protected override void OnAppearing()
    {
        GetAllProfileData();
        base.OnAppearing();
    }
    
    private async void GetAllProfileData()
    {
        var result = await DependencyService.Get<IFirebaseAuthenticator>().GetAllUserData();
        PopulateProfile(result);
    }
    

    Change it to (I haven't tested this, so forgive any typo's):

    protected override async void OnAppearing()
    {
        await GetAllProfileDataAsync();
        base.OnAppearing();
    }
    
    private async Task GetAllProfileDataAsync()
    {
        var result = await DependencyService.Get<IFirebaseAuthenticator>().GetAllUserData();
        PopulateProfile(result);
    }
    
  • jezhjezh Member, Xamarin Team Xamurai

    I test your XAML with my test code, it worked properly.

    Could you please post the code of method PopulateProfile(result)?

  • Perry89Perry89 Member ✭✭
    edited July 12

    @JohnHardman Hi, Thank you for an answer. Unfortunately this didn't help. It seems like DataTemplate is crashing before all items are populated. Beneath that ListView I have another one, could it be the reason?

    EDIT:

    Removing second ListView beneath it fixed the issue. :( Trouble is I need that second ListView :(
    Interesting part is I have created dummy data with 8 items, and last 4 are empty cells. It only seems that only first 4-5 only load correctly.

    EDIT: Miniziming and maximazing application result in 2 cells above and 2 cells beneath visible items being empty. Very strange...

    @jezh PopulateProfile(result) method is also included in my original post.

  • Perry89Perry89 Member ✭✭

    Seems like I found what the issue was. It looks like Frame for some reason is covering the Views that suppose to be on top of it. Removing Frame, displays everything correctly. Is it worth filling up bug report on Xamarin Forms?

  • JohnHardmanJohnHardman GBUniversity mod
    edited July 12

    @Perry89 said:
    It seems like DataTemplate is crashing before all items are populated.

    A crash is an unhandled exception. Post the details of the exception (if you are debugging in Visual Studio, you should see the exception details in the Output window).

    @Perry89 said:
    Beneath that ListView I have another one, could it be the reason?

    I recall seeing somebody else post about a problem recently where a page contained two ListViews. You might want to search the forums and GitHub issues to see if your problem is the same. If it isn't, or if the other one didn't get logged in GitHub issues, go ahead and log a bug.

Sign In or Register to comment.