Forum Cross Platform with Xamarin

ListView and a List<T> problem

Hi,

I have a ListView and a list.
When showing in UWP simulator, It shows only the item#3. What's wrong?
Please see the attached pictures.

Posts

  • JohnHJohnH GBMember ✭✭✭✭✭

    I don't see anything in your code that would result in the first screenshot, so a few things to try to help you debug what the issue is:

    Remove the ItemTemplate and override ToString() on your customer class to return the ID. This will use the default ListView cell which uses ToString() on the items. Does that show the the cell IDs correctly?

    Put a breakpoint where you set the ItemsSource and evaluate the contents of list, does it contain 3 rows?

    Also, please don't post a screenshots of code, paste the actual code. If you don't know how, google it.

  • shafeeq2shafeeq2 Member ✭✭
    edited April 2020

    Dear @JohnH,
    Thank you for the reply. I did as per your reply and overrite the ToString() and also eleminate the Item Template. It returns the ID 1, 2, and 3 as expected. It shows the cell IDs correctly.

    Sorry I post this without the code but by mistake. I tried to post the code and somehow does not work. that is why I made another post. no I will keep this post and try to delete the other post.

    The debug as per your direction, yes it shows 3 output for the list even with the Item Template in the code.

    **I am also wondering why in UWP it shows 2 items in the ListView while in the Android it shows 3 items.
    **

    I don't know what is wrong with the Item Template.

    `

    public class Customer
    {
        public int ID { get; set; }
        public string title { get; set; }
        public string shortDiscription { get; set; }
    
        //public override string ToString()
        //{
        //    return ID.ToString();
        //}
    }
    
    public class initateCustomer
    {
        public List<Customer> initiateList()
        {
            Customer c1 = new Customer() { ID = 1, title = "First Book", shortDiscription = "This is the First Book" };
            Customer c2 = new Customer() { ID = 2, title = "Second Book", shortDiscription = "This is the Second Book" };
            Customer c3 = new Customer() { ID = 3, title = "Third Book", shortDiscription = "This is the Third Book" };
    
            List<Customer> myList = new List<Customer>(){c1, c2, c3};
    
            return myList;
        }
    }
    
    
    
    
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            ShowListView();
        }
        public void ShowListView()
        {
            #region grid
            Grid grid = new Grid();
    
            ColumnDefinition cd1 = new ColumnDefinition() { Width = 20 };
            ColumnDefinition cd2 = new ColumnDefinition() { Width = 1000 };
    
            grid.ColumnDefinitions.Add(cd1);
            grid.ColumnDefinitions.Add(cd2);
            Label lblID = new Label() { FontAttributes = FontAttributes.Bold };
            Label lblTitle = new Label() { TextColor = Color.Green, FontAttributes = FontAttributes.Bold };
            Label lblShortDiscription = new Label();
    
            lblID.SetBinding(Label.TextProperty, "ID");
            lblTitle.SetBinding(Label.TextProperty, "title");
            lblShortDiscription.SetBinding(Label.TextProperty, "shortDiscription");
    
            grid.Children.Add(lblID);
            grid.Children.Add(lblTitle, 1, 0);
            grid.Children.Add(lblShortDiscription, 1, 1);
            #endregion
    
            ViewCell vc = new ViewCell() { View = grid };
            DataTemplate dt = new DataTemplate(() => { return vc; });
    
            initateCustomer c = new initateCustomer();
            List<Customer> list = c.initiateList();
    
            ListView listView = new ListView
            {
                ItemsSource = list,
                ItemTemplate = dt,
                SeparatorColor = Color.Pink,
                SeparatorVisibility = SeparatorVisibility.Default,
                HasUnevenRows = true
            };
    
            StackLayout stack = new StackLayout { Children = { listView }, Margin=new Thickness(30,60,30,0) };
    
            Content = stack;
        }
    }
    

    `

  • JohnHJohnH GBMember ✭✭✭✭✭

    Sorry @shafeeq2 I am a little confused by your response.
    On UWP, does it show the 3 cells with the correct IDs? You said it does at the top, but then later mentioned it doesn't work for UWP.

    I see an issue with your data template, it is returning the same ViewCell instance every time. Update the code to create the ViewCell and its contents inside the DataTemplate action. For example:

    var personDataTemplate = new DataTemplate(() =>
        {
            var grid = new Grid();
            ...
            var nameLabel = new Label { FontAttributes = FontAttributes.Bold };
            var ageLabel = new Label();
            var locationLabel = new Label { HorizontalTextAlignment = TextAlignment.End };
    
            nameLabel.SetBinding(Label.TextProperty, "Name");
            ageLabel.SetBinding(Label.TextProperty, "Age");
            locationLabel.SetBinding(Label.TextProperty, "Location");
    
            grid.Children.Add(nameLabel);
            grid.Children.Add(ageLabel, 1, 0);
            grid.Children.Add(locationLabel, 2, 0);
    
            return new ViewCell { View = grid };
        });
    

    The above code was taken from: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/creating

  • shafeeq2shafeeq2 Member ✭✭

    I followed your instruction and now it is perfectly fine with UWP and Android. I really appreciate your help and support thank you.

    But why my older solution didn't work is it because I have to follow the func inside the Item Template?

    Can I adjust my code so that it will work without using the Func ?

    `
    public class Customer
    {
    public int ID { get; set; }
    public string title { get; set; }
    public string shortDiscription { get; set; }

        public override string ToString()
        {
            return ID.ToString();
        }
    }
    
    public class initateCustomer
    {
        public List<Customer> initiateList()
        {
            Customer c1 = new Customer() { ID = 1, title = "First Book", shortDiscription = "This is the First Book" };
            Customer c2 = new Customer() { ID = 2, title = "Second Book", shortDiscription = "This is the Second Book" };
            Customer c3 = new Customer() { ID = 3, title = "Third Book", shortDiscription = "This is the Third Book" };
    
            List<Customer> myList = new List<Customer>(){c1, c2, c3};
    
            return myList;
        }
    }
    

    public partial class MainPage : ContentPage
    {
    public MainPage()
    {
    InitializeComponent();
    ShowListView();
    }
    public void ShowListView()
    {

            DataTemplate dt = new DataTemplate(() => 
            {
                Grid grid = new Grid();
    
                ColumnDefinition cd1 = new ColumnDefinition() { Width = 20 };
                ColumnDefinition cd2 = new ColumnDefinition() { Width = 1000 };
    
                grid.ColumnDefinitions.Add(cd1);
                grid.ColumnDefinitions.Add(cd2);
                Label lblID = new Label() { FontAttributes = FontAttributes.Bold };
                Label lblTitle = new Label() { TextColor = Color.Green, FontAttributes = FontAttributes.Bold };
                Label lblShortDiscription = new Label();
    
                lblID.SetBinding(Label.TextProperty, "ID");
                lblTitle.SetBinding(Label.TextProperty, "title");
                lblShortDiscription.SetBinding(Label.TextProperty, "shortDiscription");
    
                grid.Children.Add(lblID);
                grid.Children.Add(lblTitle, 1, 0);
                grid.Children.Add(lblShortDiscription, 1, 1);
    
                return new ViewCell() { View = grid };
            });
    
            initateCustomer c = new initateCustomer();
            List<Customer> list = c.initiateList();
    
            ListView listView = new ListView
            {
                ItemsSource = list,
                ItemTemplate = dt,
                SeparatorColor = Color.Pink,
                SeparatorVisibility = SeparatorVisibility.Default,
                HasUnevenRows = true
            };
    
            StackLayout stack = new StackLayout { Children = { listView }, Margin=new Thickness(30,60,30,0) };
    
            Content = stack;
        }
    }
    

    `

  • shafeeq2shafeeq2 Member ✭✭

    In C#, the inline DataTemplate is created using a constructor overload that specifies a Func argument.

Sign In or Register to comment.