Cross-ListBox Selects in a Nested ListBox WP7 App

Question

A known "issue" with nesting ListBoxes in a Windows Phone 7 App is that for each parent category their respective child ListBox retains its own SelectedItems list. Well, I have a situation where this is expected behavior, but I'm having issues capturing both the Parent and Child ListBox selected lists.

Current Functionality: 1. List item 2. List item 3. Loading of Parent and Child ListBox data is working 4. Multi-select of Parent ListBox items works prefectly 5. Multi-select of Child ListBox items works, but is not accessible 6. Multi-select of Child ListBox items for a number of different parents works in the UI, but the selection is lost when scrolling large list sets and is not accessible 7. lstCategory is accessible directly, but lstSubCategory is not accessible directly (possibly, I just don't know how) 8. I'm bound to a ViewModel with one complex object that represents the two ListBoxes as two List objects.

Expected Functionality: I would like to be able to select both Category (parent) and SubCategory (child) ListBox items as follows; (X) Denotes Selected:

• Bread (X)
  • Loaf (X)
  • Croissant
  • Buscuit (X)
  • Donut
• Fruit
  • Pinaple (X)
  • Strawberry
• Drinks (X)
  • Water
  • Milk (X)
  • Juice (X)
  • Soda
• Snacks (X)
  • Chips
  • Fries
  • Trail Mix

I would like to retain the selections even if this was a long list. So, what I want to capture and work with is:

• Bread (X)
• Loaf (X)
• Buscuit (X)
• Pinaple (X)
• Drinks (X)
• Milk (X)
• Juice (X)
• Snacks (X)

Since I have a CategoryID in each of the items' objects, I can strip the heirarchy information on capture.

For breivity, here is the essence of the code:

        <ListBox 
            x:Name="lstCategory"
            SelectionMode="Multiple" 
            ItemsSource="{Binding Categories}" 
            FontSize="32" 
            Margin="0,0,0,67">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="{Binding CategoryName}"
                                        FontSize="36"
                                        TextWrapping="Wrap"
                                        Margin="20,0,0,0"
                                        VerticalAlignment="Top"/>
                            <StackPanel  Orientation="Vertical" Margin="60,0,0,0">
                                <ListBox
                                    x:Name="lstSubCategory"
                                    SelectionMode="Multiple" 
                                    ItemsSource="{Binding SubCategories}">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding SubCategoryName}"
                                                       FontSize="28"
                                                       TextWrapping="Wrap"
                                                       VerticalAlignment="Top"/>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                            </StackPanel>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

And the ViewModel:

    public List<Category> Categories { get; set; }

    public PostCategorySelectVM()
    {
        Categories = new List<Category>()
        {
            new Category() 
            { 
                CategoryID = 0, 
                CategoryName = "Bread",
                SubCategories = new List<SubCategory>()
                {
                    new SubCategory() {
                        CategoryID = 001,
                        SubCategoryName = "Loaf"
                    },
                    new SubCategory() {
                        CategoryID = 002,
                        SubCategoryName = "Croissant"
                    }
                    // ...
                }
                // ...
            }
            // ...
        }
    }

Category Class:

public class Category
{
    public int CategoryID { get; set; }
    public string CategoryName { get; set; }
    public List<SubCategory> SubCategories { get; set; }
}

SubCategory Class:

public class SubCategory
{
    public int CategoryID { get; set; }
    public string SubCategoryName { get; set; }
}

Save Button Click Event:

    private void btnSave_Click(object sender, RoutedEventArgs e)
    {
        foreach (Category item in lstCategory.SelectedItems)
        {
            catList.Add(item);
        }

        foreach (Category cat in catList)
        {
            scatList = cat.SubCategories;
            foreach (SubCategory scat in scatList)
            {
                // How do I select the "Selected" SubCategories?
                // How do I select the lstSubCategory control?
            }
        }
    }

Final Notes:

• The only lead I have has do do with dependancy properties, but the only examples I've seen require the FrameworkPresentation.dll which is not available on WP7.
• The nested ListBox has the expected UI functionality (except for large lists removing cross-selections on scroll)
• The user experience feels best when both Category and SubCategory are shown on the same screen.
• Consider the UI functionality like a directory search engine. You may want to select the general category and/or the sub categories in different combinations, but the parent should not require a child and a child should not require a parent, yet both child and parent could exist (for specificity).

Answer 1

You could use checkboxes instead of textboxes in your data templates, and then bind the IsChecked property of the checkboxes to an IsSelected property in your Category/Subcategory classes:

    <ListBox x:Name="lstCategory"
        ItemsSource="{Binding Categories}" 
        FontSize="32" 
        Margin="0,0,0,67">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <CheckBox Content="{Binding CategoryName}"
                                FontSize="36"
                                IsChecked="{Binding IsSelected,Mode=TwoWay}"
                                Margin="20,0,0,0"
                                VerticalAlignment="Top"/>
                    <ListBox ItemsSource="{Binding SubCategories}" Margin="60,0,0,0">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <CheckBox Content="{Binding SubCategoryName}"
                                            FontSize="28"
                                            IsChecked="{Binding IsSelected,Mode=TwoWay}"
                                            VerticalAlignment="Top"/>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

You should also have your category/subcategory classes implement INotifyPropertyChanged to properly fire notifications when IsSelected is set.

assuming that, your save would look something like (this isnt' exact!)

private void btnSave_Click(object sender, RoutedEventArgs e)
{
    catList.Clear();
    catList.AddRange( lstCategory.Items.OfType<Category>().Where(x=>x.IsSelected));

    scatList.Clear();
    foreach (Category cat in catList)
    {
        scatList.AddRange(cat.SubCategories.Where(x=>x.IsSelected));
    }
}