Binding list of items on Windows phone

Question

Im learning about data binding on windows phone , so far i've been able to bind single objects to the visual side of the app, but now im trying to understand how i can get visual elements to be created according to the number of objects i have on a list

I have a class for a person

public class Person
{
    public Person() { }
    public string name { get; set; } 
    public string fotoPath { get; set; }
}

and i have a class for the collection of persons

public class PersonCollection
{
    public PersonCollection() { }
    public List<Person> personGroup { get; set; } 
}

Then i have my page's code behind, where i generate my list of persons

    public partial class TestPage : PhoneApplicationPage
    {
      public TestPage()
      {
        InitializeComponent();
        Loaded += TestPage_Loaded;
      }

    void TestPage_Loaded(object sender, RoutedEventArgs e)
    {
        PersonCollection lista = new PersonCollection();
        lista.personGroup.Add(new Person(){name = "Mr.T", fotoPath = "/images/foto1.jpg"});
        lista.personGroup.Add(new Person(){name = "John", fotoPath = "/images/foto2.jpg"});

    }
}

on my page i want to have a grid that shows on each cell a photo and the name of the person, for each person on my list(2 persons per line). As far as i understood i'll be needing to use DataTemplate, but for now my efforts have failed. can anyone give me some pointers?

Answer 1

Here's how you could present 2 people per line. First, put the source collection into groups of 2:

List<Tuple<Person, Person>> groupedItems = lista.personGroup
    .GroupBy(item => lista.personGroup.IndexOf(item) / 2)
    .Select(grp => new Tuple<Person, Person>(grp.First(), grp.Skip(1).FirstOrDefault()))
    .ToList();
items.ItemsSource = groupedItems;

Now use a DataTemplate that presents "Item1" and "Item2" in left and right columns:

<ItemsControl x:Name="items"> 
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.Resources>
                    <DataTemplate x:Key="ColumnTemplate">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding name}" Width="150" />
                            <Image Source="{Binding fotoPath}" />
                        </StackPanel>
                    </DataTemplate>
                </Grid.Resources>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <ContentControl Content="{Binding Item1}" 
                                ContentTemplate="{StaticResource ColumnTemplate}" />
                <ContentControl Grid.Column="1" 
                                Content="{Binding Item2}" 
                                ContentTemplate="{StaticResource ColumnTemplate}" />
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>