How to display in binding a list within a list

Question

I want to show a list that is inside another list. Windows Phone. The picture shows the item that I want. Image here

<Grid x:Name="Layout">
    <TextBox Height="80" Width="340" InputScope="Search" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <Image Source="/Assets/pesquisa.png" Height="76" Width="76" HorizontalAlignment="Right" VerticalAlignment="Top"/>

    <phone:LongListSelector Margin="0,80,0,0" x:Name="Conteudo" SelectionChanged="GoToPageDetalhes">
        <phone:LongListSelector.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding Path=Nome}" Margin="10,5,0,0" />
                    <TextBlock Text="{Binding Alimentos}" Margin="10,5,0,0" />
                </StackPanel>
            </DataTemplate>
        </phone:LongListSelector.ItemTemplate>
    </phone:LongListSelector>
</Grid>

I appreciate any help.

Answer 1

All you have to do is define a DataTemplate for the first LongListSelector as well.

Suppose you have a list of countries, and every country contains a list of cities:

public class Country
{
    public Country(string name)
    {
        Name = name;
        Cities = new List<City>();
    }

    public string Name { get; set; }
    public List<City> Cities { get; set; }
}

public class City
{
    public City(string name)
    {
        Name = name;
    }

    public string Name { get; set; }
}

public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        InitializeComponent();
        Countries = new ObservableCollection<Country>(CreateCountries());
        DataContext = this;
    }

    public ObservableCollection<Country> Countries { get; set; }
}

You can create a LongListSelector for the countries containing a LongListSelector with cities like this:

<phone:LongListSelector x:Name="countries" ItemsSource="{Binding Countries}">
  <phone:LongListSelector.ItemTemplate>
    <DataTemplate>
      <StackPanel>
        <TextBlock Text="{Binding Name}"/>
        <phone:LongListSelector x:Name="cities" ItemsSource="{Binding Cities}">
          <phone:LongListSelector.ItemTemplate>
            <DataTemplate>
              <TextBlock Text="{Binding Name}"/>
            </DataTemplate>
          </phone:LongListSelector.ItemTemplate>
        </phone:LongListSelector>
      </StackPanel>
    </DataTemplate>
  </phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

I seriously doubt this will render a userfriendly interface though.

Answer 2

I think you should look into the ExpanderView from Windows Phone Toolkit. Seems like it is exactly what you're searching for.

Here are some tutorials to use it properly.

Answer 3

Thanks guys, it worked longlist. ExpanderView will also be useful. thank you

<Grid x:Name="Layout" >
                <TextBox Height="80" Width="340" InputScope="Search" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                <Image Source="/Assets/pesquisa.png" Height="76" Width="76" HorizontalAlignment="Right" VerticalAlignment="Top"/>

                <phone:LongListSelector x:Name="Conteudo" >
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding Nome}"/>
                                <phone:LongListSelector x:Name="cities" ItemsSource="{Binding Alimentos}">
                                    <phone:LongListSelector.ItemTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding alimentosDoenca}"/>
                                        </DataTemplate>
                                    </phone:LongListSelector.ItemTemplate>
                                </phone:LongListSelector>
                            </StackPanel>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>