Multi-level databinding on UserControl menu dependant on each other

Question

I have a property Tours :

• Tours is an ObservableCollection of class Tour
  • Each "Tour" has an ObservableCollection Parties of class Partie
    • Each Partie has an ObservableCollection Equipes of class Equipe

I have 3 menus :

1. The first is is bond with the property Tours
2. The second must be bond with the SelectedItem property of the first menu (so it has an ObservableCollection of class Partie)
3. The third must be bond with the SelectedItem property of the second menu. (so it has an ObservableCollection of class Equipes)

Right now, this is the working code :

<StackPanel>
    <ListView Name="lvTours" ItemsSource="{Binding Tours}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Label Content="{Binding Name}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ListView>
    <ListView Name="lvParties" ItemsSource="{Binding ElementName=lvTours, Path=SelectedItem.Parties}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Label Content="{Binding Name}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ListView>
    <ListView Name="lvEquipes" ItemsSource="{Binding ElementName=lvParties, Path=SelectedItem.Equipes}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Label Content="{Binding Name}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ListView>
</StackPanel>

And then I can change the view of the context depending on the SelectedItem of the menus :

<StackPanel Grid.Column="1">
    <local:StatistiquesTour DataContext="{Binding ElementName=lvTours, Path=SelectedItem}" />
    <local:StatistiquesParties DataContext="{Binding ElementName=lvParties, Path=SelectedItem}" />
    <local:StatistiquesEquipes DataContext="{Binding ElementName=lvEquipes, Path=SelectedItem}" />            
</StackPanel>

My problem is if my menus becomes Usercontrol, I can't seem to make the databinding between the menu and the ListView (that I named : lvMenu) inside the MenuUserControl. I though it would be as simple as doing something like this :

<local:MenuUserControl x:Name="MenuTours" DataContext="{Binding Tours}" />
<local:MenuUserControl x:Name="MenuParties" DataContext="{Binding ElementName=MenuTours.lvMenu, Path=SelectedItem}" />
<local:MenuUserControl x:Name="MenuEquipes" DataContext="{Binding ElementName=MenuParties.lvMenu, Path=SelectedItem}" />

And then the context would be reachable the same way :

<local:StatistiquesTour DataContext="{Binding ElementName=MenuTours.lvMenu, Path=SelectedItem}" />
<local:StatistiquesParties DataContext="{Binding ElementName=MenuParties.lvMenu, Path=SelectedItem}" />
...

The lvMenu (the ListView) in MenuUserControl has its ItemsSource="{Binding}" to bind it to the context.

Does anyone have a clue how to do that? (sorry for my english)

Answer 1

One way is DependencyProperty in the usercontrol

Another simple way is

Create a ViewModel for the MenuTours usercontrol

In MenuTours Bind ListViews selectedItem with a property in ViewModel as TwoWayBinding

Now in your main window subscribe to propertyChanged event of MenuToursViewModel

MenuToursViewModel.PropertyChanged += OnpropertyChanged;

    void OnPropertyChanged(Sender s, PropertyChangedEventArgs e)
    {
        if(e.PropertyName == "SelectedTour")
        {
           MenuPartiesViewModel.Items = SelectedTour.parties;
        }
    }

the main advantage is this code is testable and Scalable.

Hope this helps.