How to add items dynamically to LongListSelector Windows Phone 8

Question

I am trying to use the longlistselector control to display a list of People and the kids they might have. Some might have 1 kid and some may have more.

I am trying to use the ItemTemplate

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="KidsTemplate">
        <StackPanel Grid.Column="1" VerticalAlignment="Top">
            <TextBlock Text="{Binding KidsName}"/>
        </StackPanel>
    </DataTemplate>
    <DataTemplate x:Key="ListTemplate">
        <StackPanel Grid.Column="1" VerticalAlignment="Top">
            <TextBlock Text="{Binding Name}"/>
            <TextBlock Text="{Binding Address}"/>
            <ListBox x:Name="PersonKids"
                     ItemTemplate="{StaticResource KidsTemplate}">
            </ListBox>
        </StackPanel>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
        <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <phone:LongListSelector x:Name="MultiList"
                            ItemsSource="{Binding Person}"
                            ItemTemplate="{StaticResource ListTemplate}">
        </phone:LongListSelector>
    </Grid>
</Grid>

Trying to use following class

public class PersonDetail
{
    public string Name { get; set; }
    public string Address { get; set; }
    public Kids PersonKids { get; set; }
}
public class Kids
{
    public string KidsName { get; set; }
}

Any help would be great.

Answer 1

First of all, you wrote your classes wrong:

public class PersonDetail
{
    public string Name { get; set; }
    public string Address { get; set; }
    public List<Kid> PersonKids { get; set; }
}
public class Kid
{
    public string KidsName { get; set; }
}

A person has a list of children, not a single one. Then fix the template for individual person:

<ListBox x:Name="PersonKids"
         ItemsSource="{Binding PersonKids}"
         ItemTemplate="{StaticResource KidsTemplate}">
</ListBox>

Now you need to set the appropriate DataContext for your page. First, add the following property to your page's class:

public ObservableCollection<PersonDetail> Persons { get; set; }

And add the following code to the constructor:

Persons = new ObservableCollection(); DataContext = this;

And if you add persons to the Persons collection, it should be displayed properly.