How to properly bind a shared property of a sub-usercontrol dependency property

Question

I've 4 different collections. Currently I display thoses 4 collections, but I can only have one element selected at the time.

The view where I display the 4 collection:

<UserControl x:Class="xxx.yyy.vvv.Menu"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:xxx.yyy.vvv.Menu"
             mc:Ignorable="d" 
             d:DesignHeight="800" d:DesignWidth="450">
    <Grid  Name="RootContainer">
        <Grid.DataContext>
            <local:MenuViewModel/>
        </Grid.DataContext>
        <ItemsControl ItemsSource="{Binding Collection}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <local:CollectionControl Collection="{Binding}" SelectedElement="{Binding Path=DataContext.GlobalSelectedElement,ElementName=RootContainer, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Grid>
</UserControl>

This is bound to a ViewModel:

public class MenuViewModel : SomeBaseViewModelThatHandleTheNotify
{
    public IMyElement GlobalSelectedElement
    {
        get => GetValue<IMyElement>();
        set => SetValue(value); //I NEVER COME HERE!!!)
    }
    public SomeCollectionContainer Collection
    {
        get => GetValue<SomeCollectionContainer>();
        set => SetValue(value);
    }
}

My sub control, has a dependency property, which is changed when the internal ViewModel of the UserControl is changed.

    public IMyElement SelectedElement
    {
        get { return (IMyElement)GetValue(SelectedElementProperty); }
        set { SetValue(SelectedElementProperty, value);/*HERE I COME!*/ }
    }
    public static readonly DependencyProperty SelectedElementProperty =
        DependencyProperty.Register("SelectedElement", typeof(IMyElement), typeof(CollectionControl), new PropertyMetadata(null, OnSelectedElementChanged));

    private static void OnSelectedElementChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
    {
        //Retrieve the sub control ViewModel and set the property
        SubControlViewModel subControlViewModel = (SubControlViewModel)((CollectionControl)dependencyObject).RootContainer.DataContext;
        subControlViewModel.SelectedElement = (IMyElement)dependencyPropertyChangedEventArgs.NewValue;
    }

    //In the constructor, I register to PropertyChanged of the ViewModel, and I set the SelectedElement when it change.

So, basically, I come in the SetValue of the dependency property of the UserControl, but I never come in the GlobalSelectedElement property of my main ViewModel.

What did I miss?

EDIT I tried to directly use two-way binding between my ViewModel and the Dependency Property, doesn't work either:

In my sub control:

<UserControl x:Class="xxx.yyy.vvv.CollectionControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:xxx.yyy.vvv.Menu"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <StackPanel Name="RootContainer" Orientation="Vertical">
        <StackPanel.DataContext>
            <local:CollectionControlViewModel/>
        </StackPanel.DataContext>
        <Label Content="{Binding Collection.Name}" Margin="5,0,0,0" />
        <ListBox ItemsSource="{Binding Collection.Items}" HorizontalContentAlignment="Stretch" Padding="0" BorderThickness="0" SelectedItem="{Binding SelectedElement, RelativeSource={RelativeSource AncestorType={x:Type local:CollectionControl}}, Mode=TwoWay}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    ...
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </StackPanel>
</UserControl>

I feel that my UserControl DependencyProperty is bound from 2 sides

I've tried to make a small diagram to show my classes. So my CollectionControl.SelectedElement are correctly set, but the MenuViewModel.SelectedItem are not.

Answer 1

Try to bind to the DataContext of the parent ItemsControl using a RelativeSource:

<local:CollectionControl Collection="{Binding}" 
                         SelectedElement="{Binding Path=DataContext.GlobalSelectedElement, RelativeSource={RelativeSource AncestorType=ItemsControl}, Mode=TwoWay}"/>

Obviously using an ElementName doesn't work. This is because of namescopes. The CollectionControl element in the ItemTemplate is not in the same namescope as "RootContainer".