ListView items not completely loaded using xamarin.forms

My List View controller doesn't load all the elements, just it loads 1 element in this case, in other cases it loads like 4 but the others don't

As I have test where the problem occurs i have known that the problem is over the Frame controller, thanks to the frame most of my items on my List View dont load

image of the current problem:

Answers

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    Did you add the HasUnevenRows="True" in your listview like following code.

     <StackLayout x:Name="mysl">
         <ListView x:Name="mylistview" ItemsSource="{Binding persons}" HasUnevenRows="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell Height="100">
    
    
                        <StackLayout>
                            <Frame  BackgroundColor="White"
                              HasShadow="true">
                            <StackLayout HeightRequest="100">
    
                            <Label Text="{Binding Name ,Mode=TwoWay}"   />
                            <Image Source="{Binding Image}" />
                            </StackLayout>
                        </Frame>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
               </ListView.ItemTemplate>
            </ListView>
          </StackLayout>
    

    If you have done it. please upload your demo that could re-produce this issue.

  • AndresQuiValAndresQuiVal Member ✭✭

    @LeonLu yes, my code has the property HasUnevenRows set to true, here i have my code, the actual one, hope it helps:

    <ListView
                            SeparatorVisibility="None"
                            IsGroupingEnabled="True"
                            ItemsSource="{Binding VeryImportantList}"
                            GroupDisplayBinding="{Binding Key}"
                            HasUnevenRows="True">
                            <ListView.GroupHeaderTemplate>
                                <DataTemplate>
                                    <TextCell
                                        Text="{Binding Key}"
                                        TextColor="White"/>
                                </DataTemplate>
                            </ListView.GroupHeaderTemplate>
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell>
                                        <Frame
                                            HeightRequest="100"
                                            Margin="10"
                                            HasShadow="True"
                                            CornerRadius="20"
                                            BackgroundColor="White">
                                            <Grid
                                                Padding="5">
                                            <Grid.GestureRecognizers>
                                                <TapGestureRecognizer Command="{Binding GridExpandCommand}"/>
                                            </Grid.GestureRecognizers>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="2*"/>
                                                    <RowDefinition Height="*"/>
                                            </Grid.RowDefinitions>
                                                <Label
                                                    Grid.Column="0"
                                                    Grid.Row="0"
                                                    Text="{Binding Name}"
                                                    FontAttributes="Bold"
                                                    FontSize="Medium"
                                                    HorizontalOptions="Start"
                                                    VerticalOptions="Start">
                                                </Label>
                                                <Image
                                                    HeightRequest="50"
                                                    Grid.Row="0"
                                                    Grid.Column="1"
                                                    Source="{Binding TaskIcon}"
                                                    HorizontalOptions="End"
                                                    VerticalOptions="Start">
                                                </Image>
                                                <Label
                                                    Grid.Row="1"
                                                    Grid.Column="0"
                                                    Text="{Binding Description}"
                                                    FontAttributes="Bold"
                                                    FontSize="Small"
                                                    HorizontalOptions="Start"
                                                    VerticalOptions="End">
                                                </Label>
                                                <Button
                                                    Command="{Binding IsDoneCommand}"
                                                    Grid.Row="1"
                                                    Grid.Column="1"
                                                    Text="{Binding IsDone, Mode=TwoWay}"
                                                    TextColor="White"
                                                    FontAttributes="Bold"
                                                    VerticalOptions="CenterAndExpand"
                                                    HorizontalOptions="Center"
                                                    FontSize="Small"
                                                    CornerRadius="100"
                                                    BackgroundColor="{Binding IsDoneColor, Mode=TwoWay}">
                                                </Button>
                                            </Grid>
                                        </Frame>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
    
  • igorkr_10igorkr_10 Member ✭✭✭

    Do you use grouping properly?

  • AndresQuiValAndresQuiVal Member ✭✭
    edited October 21

    @igorkr_10 what do you mean by properly?

    the code for grouping is here:

            foreach (var item in new string[] { "Hight Priority", "Medium Priority", "Less Priority" })
                {
                    var sorted = from tasks in tableList
                                 orderby tasks.PriorityLevel // orberby is a keyword of System.Linq namespace
                                 group tasks by tasks.PriorityLevel into taskList
                                 select new Grouping<string, TaskItemViewModel>(taskList.Key, taskList);
                    List<Grouping<string, TaskItemViewModel>> listItems = sorted.Where(t => t.Key == item).ToList();
                    foreach(var item2 in listItems)
                            VeryImportantList.Add(item2);
                }
    

    the Grouping<TKey, TValue> refers to the NuGet MvvmHelpers

  • LeonLuLeonLu Member, Xamarin Team Xamurai
    edited October 22

    @AndresQuiVal
    If you want to achieve the result with GroupHeaderTemplate you should change the model like following format.

     public class MyModelList: ObservableCollection<MyModel>
    {
        public string Heading { get; set; }
        public ObservableCollection<MyModel> MyModels => this;
    }
    

    Then popular the data like following code.

         public class MyViewModel
    {
        public ICommand IsDoneCommand { protected set; get; }
    
    
        private ObservableCollection<MyModelList> _listOfPeople;
        public ObservableCollection<MyModelList> ListOfPeople { get { return _listOfPeople; } set { _listOfPeople = value; } }
    
        public MyViewModel()
        {
            var sList = new MyModelList()
          {
    
            new MyModel() { Name="test1",TaskIcon= "newIcon.png",Description= "This is Description1", IsDone="No", IsDoneColor=Color.Red  },
            new MyModel() {Name="test1",TaskIcon= "newIcon.png",Description= "This is Description1", IsDone="No", IsDoneColor=Color.Red  },
            new MyModel() { Name="test1",TaskIcon= "newIcon.png",Description= "This is Description1", IsDone="No", IsDoneColor=Color.Red  }
          };
    
            sList.Heading = "test1";
    
            var dList = new MyModelList()
          {
            new MyModel() { Name="test2",TaskIcon= "newIcon.png",Description= "This is Description2", IsDone="No", IsDoneColor=Color.Red  },
            new MyModel() {Name="test2",TaskIcon= "newIcon.png",Description= "This is Description2", IsDone="No", IsDoneColor=Color.Red  },
            new MyModel() { Name="test2",TaskIcon= "newIcon.png",Description= "This is Description2", IsDone="No", IsDoneColor=Color.Red  }
          };
    
            dList.Heading = "test2";
            var list = new ObservableCollection<MyModelList>()
           {
              sList,
              dList,
    
           };
    
    
            ListOfPeople = list;
    
    
            IsDoneCommand = new Command<MyModel>((key) =>
            {
    
    
    
    
            });
        }
    
    
    }
    

    Here is running GIF.

    Here is helpful article about it.
    https://xamarinhelp.com/xamarin-forms-listview-grouping/

    Here is my demo, you can refer to it.

  • AndresQuiValAndresQuiVal Member ✭✭

    @LeonLu thanks for the answer but my problem is still the same, i have done what you have told me and still, My items are obtained from a sqlite database, probably that's another point to take into account

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    @AndresQuiVal Can your provide a demo that could re-produce this issue? I do not want to guess what is your issue as well :'( , If you cannot provide a demo, I just adivce you to check the data popular issue, you can add a static data as mine, If you can get the correct result, If you can, this issue is related to get data from the database, If you still cannot, Your layout still have issue.

  • AndresQuiValAndresQuiVal Member ✭✭
    edited October 23

    @LeonLu sorry i dont have a demo right now :( but i have test my code and i have noticed that my problem is in my layout not in my database, i have add items to my listview that are not from the database and the problem is still the same, also i have noticed that if in my frame i put only one controller as a label it works totally fine, but when i put a stack layout and inside 2 controllers the problem begins

    In this mode the listview does not shows all the items:

    <ListView
                        SeparatorVisibility="None"
                        IsGroupingEnabled="True"
                        ItemsSource="{Binding VeryImportantList}"
                        GroupDisplayBinding="{Binding Key}"
                        HasUnevenRows="True"
                        IsRefreshing="{Binding IsRefreshing}">
                        <ListView.GroupHeaderTemplate>
                            <DataTemplate>
                                <TextCell
                                    Text="{Binding Key}"
                                    TextColor="White"/>
                            </DataTemplate>
                        </ListView.GroupHeaderTemplate>
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    <Frame
                                        Margin="10"
                                        HasShadow="True"
                                        CornerRadius="20"
                                        BackgroundColor="White">
                                    <Frame.GestureRecognizers>
                                        <TapGestureRecognizer Command="{Binding GridExpandCommand}"/>
                                    </Frame.GestureRecognizers>
                                    <StackLayout>
                                        <Label
                                            Grid.Column="0"
                                            Grid.Row="0"
                                            Text="{Binding Name}"
                                            FontAttributes="Bold"
                                            FontSize="Medium"
                                            HorizontalOptions="Start"
                                            VerticalOptions="Start">
                                        </Label>
                                        <Image
                                            Grid.Row="0"
                                            Grid.Column="1"
                                            Source="{Binding TaskIcon}"
                                            HorizontalOptions="End"
                                            VerticalOptions="Start"
                                            HeightRequest="50">
                                        </Image>
                                    </StackLayout>
                                </Frame>
                            </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
    

    By the other way, with this code all is ok:

    <ListView
                                SeparatorVisibility="None"
                                IsGroupingEnabled="True"
                                ItemsSource="{Binding VeryImportantList}"
                                GroupDisplayBinding="{Binding Key}"
                                HasUnevenRows="True"
                                IsRefreshing="{Binding IsRefreshing}">
                                <ListView.GroupHeaderTemplate>
                                    <DataTemplate>
                                        <TextCell
                                            Text="{Binding Key}"
                                            TextColor="White"/>
                                    </DataTemplate>
                                </ListView.GroupHeaderTemplate>
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <ViewCell>
                                            <Frame
                                                Margin="10"
                                                HasShadow="True"
                                                CornerRadius="20"
                                                BackgroundColor="White">
                                            <Frame.GestureRecognizers>
                                                <TapGestureRecognizer Command="{Binding GridExpandCommand}"/>
                                            </Frame.GestureRecognizers>
                                                <Label
                                                    Grid.Column="0"
                                                    Grid.Row="0"
                                                    Text="{Binding Name}"
                                                    FontAttributes="Bold"
                                                    FontSize="Medium"
                                                    HorizontalOptions="Start"
                                                    VerticalOptions="Start">
                                                </Label>
                                        </Frame>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
    
  • JoeHarvey_MSFTJoeHarvey_MSFT Member, Xamarin Team Xamurai

    Interesting. I am not seeing anything stand out as an issue. Maybe the fact you are not removing the "Padding" from frame (Frame has a default padding, i think its 40, so this can cause issues with how things look)

    If you submitted a ticket to Microsoft Support then you can upload your Test code to our secure servers and it will make it much easier for us to troubleshoot this issue.

    Microsoft Support link. Free support for all Xamarin Developers
    https://support.microsoft.com/en-us/supportforbusiness/productselection?sapId=211dd84f-3474-c3c5-79bf-66db630c92a6

Sign In or Register to comment.