ListView Data template binding in Xamarin forms

Question

I have been trying to populate the data template inside the listview but it does not display anything. My code below:

<?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="BlueDemo.ScoreDisplay">
<ContentPage.Content>                 
       <StackLayout> 
        <ListView x:Name="listView" Grid.ColumnSpan="2">
           <ListView.ItemTemplate>
           <DataTemplate>
              <ViewCell>
                <Grid>
                  <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="0.7*"/> 
                     <ColumnDefinition Width="0.3*"/> 
                  </Grid.ColumnDefinitions>     
                  <Label Text="{Binding name}" FontAttributes="Bold"/>
                  <Label Text="{Binding score}" Grid.Column ="1"/>                
                </Grid>
              </ViewCell>
          </DataTemplate>
          </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage.Content>    

public partial class ScoreDisplay : ContentPage
{
    public static List<int> Score = new List<int>();
    public static List<string> Name = new List<string>();
     public string[] nme = new string[10];

    public static int[] scr = new int[10];

    public ObservableCollection<Data> mySource{get;set;}
    public ScoreDisplay()
    {
        InitializeComponent();
        BindingContext = this;


        nme = Name.ToArray();
        scr=Score.ToArray();

        mySource = new ObservableCollection<Data>();
        for(int i=0;i<nScore.Count;i++)
        {
            mySource.Add(nnew Data {name = nme[i], score = 
            scr[i].ToString()});
        }
        listView.ItemsSource = mySource;
    }  
}

public class Data
{
   public string name { get; set; }
   public string score { get; set; } 
}

I have two lists (Name and Score) that are getting the value from other page. I am not sure how to bind each and every value in them with Name and Score of listview. EDIT: Working code

Answer 1

Cause:

Label.Text is a string .But in your class Data,the property name is a List.

Solution:

Refer the following code.

public class Data
{
    public string name { get; set; }
    public string score { get; set; }
}

public ObservableCollection<Data> mySource { get; set; }

List<int> ScoreList = new List<int>();
List<string> NameList = new List<string>();    

public ScoreDisplay ()
{
  InitializeComponent();

  BindingContext = this;

  NameList.Add("jack");
   // or you can set the list with  the other part of the app

  ScoreList.Add(60);
   //...

  mySource = new ObservableCollection<Data>();

  for (int i=0;i<ScoreList.Count;i++)
   {
      mySource.Add(new Data { name = NameList[i], score = ScoreList[i].ToString()});
   }


  listView.ItemsSource = mySource;
}

Answer 2

you missed the ItemSource to bind in ListView xaml. Add this line instead of

<ListView x:Name="listView" Grid.ColumnSpan="2">

to

<ListView x:Name="listView" ItemsSource="{Binding DataDisplay}" Grid.ColumnSpan="2">

Answer 3

public partial class MainPage : ContentPage
{
    List<ScoreModel> ScoreList = new List<ScoreModel>();
    List<NameModel> NameList = new List<NameModel>();
    public MainPage()
    {
        InitializeComponent();

        NameList.Add(new NameModel { Name = "Name1", Id = 0 });
        NameList.Add(new NameModel { Name = "Name2", Id = 1 });

        ScoreList.Add(new ScoreModel { Id = 0, Score = 1 });
        ScoreList.Add(new ScoreModel { Id = 1, Score = 2 });

        var DataDisplay = new List<Data>();

        foreach (var item in NameList)
        {
            foreach (var item1 in ScoreList)
            {
                if(item.Id==item1.Id)
                {
                    DataDisplay.Add(new Data { name = item.Name, score = item1.Score });
                }
            }
        }
        listView.ItemsSource = DataDisplay;
    }
}
public class Data
{
    public string name { get; set; }
    public int score { get; set; }
}
public class NameModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}
public class ScoreModel
{
    public int Id { get; set; }
    public int Score  { get; set; }
}

Your xaml:

<StackLayout>
    <ListView x:Name="listView">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.7*" />
                            <ColumnDefinition Width="0.3*" />
                        </Grid.ColumnDefinitions>

                        <Label Text="{Binding name}" Grid.Column="0"
                               FontAttributes="Bold" />
                        <Label Text="{Binding score}"
                               Grid.Column="1" />
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

Hope this may solve your issue.