c# windows app listbox inside listbox binding issue(universal app phone+pc)

Question

I am creating a universal app that needs to have listbox inside a listbox. The first listbox displays a list with messages. Some messages have photos attached that i have to add as another list. I can fill the first listbox with my data but i am not able to set the second listbox. The first Listbox I am setting the ItemSource through the x:Name of it. The second one i cant access in this way. I am sure i am having some thinking problem about the binding.

Here the xaml:

<ListBox x:Name="MessageHistory"  Background="#143b8a" Margin="0,0,0,101">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="5">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid Grid.Column="1">
                            <Grid.RowDefinitions>
                            </Grid.RowDefinitions>
                            <TextBlock Text="{Binding Inbox}" Margin="0,0,50,0" HorizontalAlignment="Left" TextWrapping="Wrap" FontSize="24" Foreground="WhiteSmoke" TextAlignment="Left"/>
                            <TextBlock Text="{Binding Outbox}" Margin="80,0,0,0" HorizontalAlignment="Right" TextWrapping="Wrap" FontSize="24" Foreground="Gray" TextAlignment="Right"/>
                            <!-- start of list for message photo thumbs -->
                                <ListBox ScrollViewer.HorizontalScrollBarVisibility="Auto" 
                                         x:Name="FirstThumbs" />                                   
                                    <ListBox.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <StackPanel Orientation="Horizontal" />
                                        </ItemsPanelTemplate>
                                    </ListBox.ItemsPanel>
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Grid>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition />
                                                    <ColumnDefinition />
                                                </Grid.ColumnDefinitions>
                                                <Image Source="{Binding         Thumb,Mode=OneWay}" Height="90" Width="90" Stretch="UniformToFill"/>
                                                <Grid Grid.Column="1">
                                                    <Grid.RowDefinitions>
                                                    </Grid.RowDefinitions>
                                                </Grid>
                                            </Grid>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                                <!-- end of list for message photo thumbs   -->
                            </Grid>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Then i have two classes. The first is MesHistory.cs:

public class MesHistory
{
    public string Inbox { get; set; }
    public string Outbox { get; set; }
}

Second one ThumbView.cs:

public class ThumbView
{
    public string Thumb { get; set; }
}

The first/ main list i populate by:

List<MesHistory> messageslist = new List<MesHistory>();
...foreach...{
MesHistory newMessage = new MesHistory();
newMessage.Inbox = finalmessagetext.InnerText;
messageslist.Add(newMessage);
}

and then setting the ItemsSource like this:

 MessageHistory.ItemsSource = messageslist;

When i try the same for the inner ListBox I can not access it by setting the ItemsSource through the name:

List<ThumbView> newThumblist = new List<ThumbView>();
...foreach...{
ThumbView newThumb = new ThumbView();
newThumb.Thumb = thumbaddress.Attributes["src"].Value).ToString();
newThumblist.Add(newThumb);
}

and then setting the ItemsSource like this doesnt work:

 FirstThumbs.ItemsSource = newThumblist;

VS tells me "FirstThumbs" doesnt exist in the current context.

How do i access it and bind the data to that list? Also i would like to have a selection event for that whole list if possible...

Answer 1

Try,

Have a view model that having collection for parent list box. Inside that collection have a secondary collection to bind itemssource for child list box.

each item present in the parent list box are datacontext to corresponding child list box.

I have prepared a sample for this scenario. Please find the sample in http://1drv.ms/1qztFgh .

Hope this helps you.

Answer 2

1) You must modify your data model:

public class MesHistory
{
  public string Inbox { get; set; }
  public string Outbox { get; set; }

  public List<ThumbView> ThumbList {get; set;}
}

2) When you create messageslist you must fill the ThumbList property for each MesHistory object:

newMessage.ThumbList = newThumblist

3) Modify item template in XAML like this:

<!-- start of list for message photo thumbs -->
                            <ListBox ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                     ItemSource="{Binding ThumbList}"   
                                     x:Name="FirstThumbs" />                                   
                                <ListBox.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal" />
                                    </ItemsPanelTemplate>
                                </ListBox.ItemsPanel>
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition />
                                                <ColumnDefinition />
                                            </Grid.ColumnDefinitions>
                                            <Image Source="{Binding Thumb}"
                                                   Height="90" Width="90"   Stretch="UniformToFill"/>
                                            <Grid Grid.Column="1">
                                                <Grid.RowDefinitions>
                                                </Grid.RowDefinitions>
                                            </Grid>
                                        </Grid>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                            <!-- end of list for message photo thumbs   -->     

4) You can't get the selection event for the whole list. Just add it to main ListBox and to Listbox inside ItemTemplate