Xamarin.Forms fill a listview

Question

I'm trying to create a simple page with a ListView and a Button "Add", which simply adds another item to the list with a count and a timestamp.

App.cs

namespace App1
{
    public class App : Application
    {
        public App()
        {
            // The root page of your application
            MainPage = new NavigationPage(new Page1());
        }
    }
}

As you can see, I created a Page.xaml and Page.xaml.cs.

Page.xaml

<?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="App1.Page1">
  <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
    <Label Text="Inizio" VerticalOptions="Start"/>
    <ListView VerticalOptions="FillAndExpand" x:Name ="list">
    </ListView>
    <Label Text="Fine" VerticalOptions="End"/>
  </StackLayout>
  <ContentPage.ToolbarItems>
    <ToolbarItem x:Name="add">
      <ToolbarItem.Icon>
        <OnPlatform
          x:TypeArguments="FileImageSource"
          iOS="appbar.add.png"
          Android="appbar.add.png"
          WinPhone="appbar.add.png"
        />
      </ToolbarItem.Icon>
    </ToolbarItem>
  </ContentPage.ToolbarItems>
</ContentPage>

Page.xaml.cs

namespace App1
{
    public partial class Page1 : ContentPage
    {
        int count = 0;
        ObservableCollection<TextCell> cells = new ObservableCollection<TextCell>();

        public Page1()
        {
            InitializeComponent();
            //this.ToolbarItems.Add(new ToolbarItem { Text = "Add" });
            add.Clicked += Add_Clicked;
        }

        private void Add_Clicked(object sender, EventArgs e)
        {
            cells.Add(new TextCell { Text = count.ToString(), Detail = DateTime.Now.ToString("dd/MM/yyyy --> hh:mm:ss") });
            list.ItemsSource = cells; 
            count++;
        }
    }
}

Now, everything works, but the problem is the List. I have the List filled with TextCells, and each of them has the property I set. However, the List is filled by elements with only the text "Xamarin.Forms.TextCell".

This is my first attempt with Xamarin, what am I doing wrong?

Answer 1

You have to define an item template

This is an example of Xamarin documentation

class Person
{
  public string FullName
  {
    get;
    set;
  }

  public string Address
  {
    get;
    set;
  }
}

void SetupView()
{
  var template = new DataTemplate (typeof (TextCell));

  // We can set data bindings to our supplied objects.
  template.SetBinding (TextCell.TextProperty, "FullName");
  template.SetBinding (TextCell.DetailProperty, "Address");

  // We can also set values that will apply to each item.
  template.SetValue (TextCell.TextColorProperty, Color.Red);

  itemsView.ItemTemplate = template;
  itemsView.ItemsSource = new[] {
    new Person { FullName = "James Smith", Address = "404 Nowhere Street" },
    new Person { FullName = "John Doe", Address = "404 Nowhere Ave" }
  };
}

Answer 2

Though above answer fills up the conceptual gap in your implementation (+1 for that), but it doesn't give you idea of general solution to the problem that you want to solve . Kindly find the whole solution below .

This is your CodeBehindFile of Page class .

namespace stackQues
{
    public partial class Page : ContentPage
    {
        int count = 0;
        List<TextCellItem> data = new MenuData ();
        public Page()
        {
            InitializeComponent();
            //this.ToolbarItems.Add(new ToolbarItem { Text = "Add" });

        }

        private void Add_Clicked(object sender, EventArgs e)
        {
            //cells.Add(new TextCell { Text = count.ToString(), Detail = DateTime.Now.ToString("dd/MM/yyyy --> hh:mm:ss") });


            data.Add (new TextCellItem {
                TextLabel = count.ToString (),
                DetailTextLabel = DateTime.Now.ToString ("dd/MM/yyyy --> hh:mm:ss")
            });
            count++;
            list.ItemsSource = data;
            list.ItemTemplate = new DataTemplate(typeof(YourTextCell));

        }
    }
}

Here MenuData is

namespace stackQues
{
    class MenuData: List<TextCellItem>
    {
        public MenuData()
        {
        }
    }
}

TextCellItem is as follows

namespace stackQues
{
    public class TextCellItem
    {
        public string TextLabel { get; set;}
        public string DetailTextLabel { get; set;}
    }
}

YourTextCell is as follows

namespace stackQues
{
    class YourTextCell:TextCell
    {
        public YourTextCell() {
            this.SetBinding (TextCell.TextProperty, "TextLabel");
            this.SetBinding (TextCell.DetailProperty, "DetailTextLabel");
        }
    }
}

My Xaml markup is little different but intended for some purpose

<?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="stackQues.Page">
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand">
    <Label Text="Inizio" VerticalOptions="Start"/>
    <ListView VerticalOptions="FillAndExpand" x:Name ="list">
    </ListView>
    <Label Text="Fine" VerticalOptions="End"/>
    <Button Text = "add" Clicked = "Add_Clicked" ></Button>
  </StackLayout>
<!--  <ContentPage.ToolbarItems>
    <ToolbarItem x:Name="add">
      <ToolbarItem.Icon>
        <OnPlatform
          x:TypeArguments="FileImageSource"
          iOS="appbar.add.png"
          Android="cross.png"
          WinPhone="appbar.add.png"
        />
      </ToolbarItem.Icon>
    </ToolbarItem>
  </ContentPage.ToolbarItems>-->
</ContentPage>