Empty listview elements binding Xamarin Forms not showing binding name

Viewed 105

My listview was displaying the data, after messing with some things it stopped displaying, I saw that this is a very common problem in Xamarin Forms, but when I create other XAML it doesn't display either.

XAML markup:

  <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
          x:Class="ListPageExample.ProductListPage"
           Shell.PresentationMode="ModalAnimated"
          Title="Product List Page">
 <ListView x:Name="ProductListView"
           CachingStrategy="RecycleElement"
           ItemTapped="ProductListView_ItemTapped"
           ItemsSource="{Binding Products}"
               HasUnevenRows="True"
       SeparatorColor="Blue"
       SeparatorVisibility="None">
             <ListView.ItemTemplate>
                 <DataTemplate>
                     <ViewCell>
                         <Grid Padding="10">
                             <Frame CornerRadius="10" HasShadow="True">
                                 <StackLayout Orientation="Horizontal">
                                     <Image Source="{Binding ImageUrl}" WidthRequest="100" HeightRequest="100"></Image>
                             <StackLayout VerticalOptions="Center">
                                 <Label VerticalOptions="Center" Text="{Binding Name}" FontSize="Large"></Label>
                                         <Label VerticalOptions="Center" Text="{Binding Price}" FontSize="Large"></Label>
                                     </StackLayout>
                                 </StackLayout>
                             </Frame>
                         </Grid>
                     </ViewCell>
                 </DataTemplate>
             </ListView.ItemTemplate>
         </ListView>
     </ContentPage>

C# code:

using ListPageExample; 
using System; 
using System.Collections.Generic; 
using System.Collections.ObjectModel;
using System.Linq; 
using System.Text; 
using System.Threading.Tasks;
using Xamarin.Forms; 
using Xamarin.Forms.Xaml;

namespace ListPageExample 
{
     [XamlCompilation(XamlCompilationOptions.Compile)]
     public partial class ProductListPage : ContentPage
     {
         public ObservableCollection<Product Products { get; set; }

         public ProductListPage()
         {
             InitializeComponent();
             BindingContext = this;
             base.OnAppearing();
 
             Products = new ObservableCollection<Product();
             {
                 Products.Add(new Product() { Id = 1, Name  = "Sprite", Price = 20, ImageUrl= "bafomete.jpg"});
                 Products.Add(new Product() { Id = 2, Name = "Coca Cola", Price = 20, ImageUrl = "bafometa.jpg" });
                 Products.Add(new Product() { Id = 3, Name = "Fanta", Price = 20, ImageUrl = "bafomete.jpg" });
                 Products.Add(new Product() { Id = 4, Name = "Fanta Uva", Price = 20, ImageUrl = "bafometa.jpg" });
            }
 
            ProductListView.ItemsSource = Products;
         }
 
         private void ProductListView_ItemTapped(object sender, ItemTappedEventArgs e)
         {
             if(e.Item==null)
             {
                 return;
             }

             ((ListView)sender).SelectedItem = null;

             Navigation.PushModalAsync(new NewItemPage(e.Item as Product));
         }
    } 
}

This item does not appear in the list view, only the blank lisview, can anyone help?

2 Answers

The code ItemsSource="{Binding Products}" in ProductListPage.xaml and the code ProductListView.ItemsSource = Products; in ProductListPage.xaml.cs have the same function, you can delete the code ItemsSource="{Binding Products}".

The code ProductListView.ItemsSource = Products; in ProductListPage.xaml.cs can bind the data of Products to the ListView.

I made a demo based on your code and it works well on my side. Here is the code in MainPage.xaml.cs:

public partial class MainPage : ContentPage
    {
        
    public MainPage()
        {
            ObservableCollection<Product> Products = new ObservableCollection<Product>();
            InitializeComponent();
            BindingContext = this;
            base.OnAppearing();       
            {
                Products.Add(new Product() { Id = 1, Name = "Sprite", Price = 20, });
                Products.Add(new Product() { Id = 2, Name = "Coca Cola", Price = 20, });
                Products.Add(new Product() { Id = 3, Name = "Fanta", Price = 20,  });
                Products.Add(new Product() { Id = 4, Name = "Fanta Uva", Price = 20, });
            }

            ProductListView.ItemsSource = Products;
        }

        private void ProductListView_ItemTapped(object sender, ItemTappedEventArgs e)
        {
            if (e.Item == null)
            {
                return;
            }
             ((ListView)sender).SelectedItem = null;
            Navigation.PushModalAsync(new NewItemPage(e.Item as Product));
        }
    }

Here is the code in MainPage.xaml:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App3.MainPage">

    <ListView x:Name="ProductListView"
           CachingStrategy="RecycleElement"
           ItemTapped="ProductListView_ItemTapped"
              
               HasUnevenRows="True"
       SeparatorColor="Blue"
       SeparatorVisibility="None">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Padding="10">
                        <Frame CornerRadius="10" HasShadow="True">
                            <StackLayout Orientation="Horizontal">
                                <StackLayout VerticalOptions="Center">
                                    <Label VerticalOptions="Center" Text="{Binding Name}" FontSize="Large"></Label>
                                    <Label VerticalOptions="Center" Text="{Binding Price}" FontSize="Large"></Label>
                                </StackLayout>
                            </StackLayout>
                        </Frame>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage

This is my entity class:

 public class Product
    {   
            public int Id { get; set; }
            public string Name { get; set; }    
            public int Price { get; set; }

    }

Here is the sample:

enter image description here

You are using

ItemsSource="{Binding Products}"

in xaml. And also

   ProductListView.ItemsSource = Products;

in code behind. That is first thing that could cause a trouble.

Related