Nested Listbox how to set parent listbox selectedItem on child listbox mouse double click

Question

I have a Nested ListBox. On inner listbox mouse double click event, I need to open a new window based on some logic and for that I need the inner ListBox SelectedItem and its corresponding Outer ListBox SelectedItem. How can get this in an MVVM manner?

<ListBox ItemsSource="{Binding OuterCollection}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding OuterProperty1}" />
                            <ListBox Width="200" ItemsSource="{Binding InnerCollection}">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding InnerProperty1}" />
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Things to remember:

1) There is no relation between the inner collection and outer collection item.

2) I'm using MVVMLight Toolkit and as a temporary solution I just passes inner ListBox Mouse Double Click event argument to the View model and traverse through the tree to find the Outer ListBox item. I know this is against the MVVM rules, so how can I do it in a proper MVVM manner?

Answer 1

Got one possible solution

You can use the property SelectedItem property on both the ListBox.

Here is the code which I used to solve your problem. Though I used Cinch it should not be a problem with light framework

MainWindow.xaml

<Window x:Class="TestWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        Title="MainWindow" Height="350" Width="525">
    <ListBox ItemsSource="{Binding OuterCollection}" SelectedItem="{Binding OuterListBoxSelectedItem}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding}" />
                    <ListBox Width="150" DataContext="{Binding DataContext, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}"
                             ItemsSource="{Binding InnerCollection}"
                             SelectedItem="{Binding InnerListBoxSelectedItem}">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseDoubleClick">
                                <i:InvokeCommandAction Command="{Binding TestCommand}"
                                                       CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}, AncestorLevel=2},Path=SelectedItem}"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding}" />
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Window>

MainWindow.xaml.cs

using System.Windows;

namespace TestWPF
{

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new ViewModel();
        }
    }
}

Last but not the least my model

using System.Collections.ObjectModel;
using System.Windows.Input;
using Cinch;

namespace TestWPF
{
    public class ViewModel : ViewModelBase
    {
        public ICommand TestCommand { get; private set; }
        public ObservableCollection<string> OuterCollection { get; private set; }
        public string OuterListBoxSelectedItem { get; set; }
        public ObservableCollection<string> InnerCollection { get; private set; }
        public string InnerListBoxSelectedItem { get; set; }

        public ViewModel()
        {
            OuterCollection = new ObservableCollection<string> { "Outer 1", "Outer 2", "Outer 3", "Outer 4" };
            InnerCollection = new ObservableCollection<string> { "Inner 1", "Inner 2", "Inner 3" };
            TestCommand = new SimpleCommand<object, object>(Test);
            NotifyPropertyChanged("OuterCollection");
            NotifyPropertyChanged("InnerCollection");
            NotifyPropertyChanged("TestCommand");
        }
        public void Test(object o)
        {
            var a = InnerListBoxSelectedItem;
            var b = OuterListBoxSelectedItem;
            "".ToString();
        }
    }
}

I also needed to add one more reference to System.Windows.Interactivity

I hope this helps