CODEWITHSUNDEEP
xamarin.formsxamarin.androidxamarin.forms.listview
Andrés Quiroz Valdovinos
Andrés Quiroz Valdovinos

Reputation: 139

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

<ListView.ItemTemplate>
  <DataTemplate>
    <ViewCell>
      <Frame
          HeightRequest="100"
          Margin="10"
          HasShadow="True"
          CornerRadius="25"
          BackgroundColor="White">
        <Grid
            Padding="5">
          <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
          </Grid.RowDefinitions>
          <Label
              Grid.Column="0"
              Grid.Row="0"
              Text="{Binding Name}"
              FontAttributes="Bold"
              FontSize="Large"
              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="Medium"
              HorizontalOptions="Start"
              VerticalOptions="End">
          </Label>
          <Button
              Grid.Row="1"
              Grid.Column="1"
              Text="{Binding IsDone}"
              TextColor="White"
              FontAttributes="Bold"
              VerticalOptions="CenterAndExpand"
              HorizontalOptions="Center"
              FontSize="Small"
              CornerRadius="100"
              BackgroundColor="LawnGreen">
          </Button>
        </Grid>
      </Frame>
    </ViewCell>
  </DataTemplate>
</ListView.ItemTemplate>

The results as i have mentioned are the incomplete load of my items as the following image shows:

Screenshot of the problem

[Edited] I have edited my code as the following and the error is still the same

<ListView
               SeparatorVisibility="None"
                    IsGroupingEnabled="True"
                    ItemsSource="{Binding TasksCollection}"
                    GroupDisplayBinding="{Binding Key}"
                    HasUnevenRows="True">
                    <ListView.GroupHeaderTemplate>
                        <DataTemplate>
                            <TextCell
                                Text="{Binding Key}"
                                TextColor="White"/>
                        </DataTemplate>
                    </ListView.GroupHeaderTemplate>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <Frame
                                    HeightRequest="150"
                                    Margin="10"
                                    HasShadow="True"
                                    CornerRadius="25"
                                    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="Small"
                                            HorizontalOptions="Start"
                                            VerticalOptions="Start">
                                        </Label>
                                        <Image
                                            HeightRequest="25"
                                            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
                                            Grid.Row="1"
                                            Grid.Column="1"
                                            Text="{Binding IsDone}"
                                            TextColor="White"
                                            FontAttributes="Bold"
                                            VerticalOptions="CenterAndExpand"
                                            HorizontalOptions="Center"
                                            FontSize="Small"
                                            CornerRadius="100"
                                            BackgroundColor="LawnGreen">
                                        </Button>
                                    </Grid>
                                </Frame>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

Upvotes: 0

Views: 354

Answers (2)

Cherry Bu - MSFT
Cherry Bu - MSFT

Reputation: 10346

I set ListView HasUnevenRows="True", and it works fine and don't have any issue.

<ListView HasUnevenRows="True" ItemsSource="{Binding models}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Frame
                            Margin="10"
                            BackgroundColor="White"
                            CornerRadius="25"
                            HasShadow="True"
                            HeightRequest="120">
                            <Grid Padding="5">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="2*" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Label
                                    Grid.Row="0"
                                    Grid.Column="0"
                                    FontAttributes="Bold"
                                    FontSize="Large"
                                    Text="{Binding Name}" />
                                <Image
                                    Grid.Row="0"
                                    Grid.Column="1"
                                    Source="{Binding TaskIcon}" />
                                <Label
                                    Grid.Row="1"
                                    Grid.Column="0"
                                    FontAttributes="Bold"
                                    FontSize="Medium"
                                    Text="{Binding Description}" />
                                <Button
                                    Grid.Row="1"
                                    Grid.Column="1"
                                    BackgroundColor="LawnGreen"
                                    CornerRadius="100"
                                    FontAttributes="Bold"
                                    FontSize="Small"
                                    Text="{Binding IsDone}"
                                    TextColor="White" />
                            </Grid>
                        </Frame>
                    </ViewCell>
                </DataTemplate>

            </ListView.ItemTemplate>
        </ListView>

Upvotes: 0

Ivan I
Ivan I

Reputation: 9990

This can happen only if your layout cannot fit (aside from trivial issue that you are sending the empty data which you would probably see), you are trying to fit too big items into too little space. You should set the HeightRequest and WidthRequest of images, and possibly you also need to set LineBreakMode for labels.

Upvotes: 0

Related Questions