Why DataBinding is not propagating to UserControl

This morning I asked a question here and doing a simple working sample gave me a different behavior than expected.

Full working sample at GitHub. Main partial code below.

In this present case, the command is never propagated to any UserControl, either if the UserControl is use directly as a child of the Window. It also not work if the UserControl is used as a DataTemplate for a ListBox ItemTemplate.

I also include a hack button to fix the problem where the Command reach the UserControls. The hack come from StackOverflow.

But using the hack does not explain why UserControl does not receive the Command (without it) and using this hack also break the first rule of good coding: "Hi cohesion and Low coupling". The hack should be used in the the window code in order for it to manage the Command in the UserControl, my thought is that it should happen by default.

Why the command is not propagating by default to the UserControl and what should I do to propagate the command to the UserControl in a clean way?

Note: Using only one CommandBinding (removing one or the other) in the UserControl does not fix the problem .

Partial code:

<Window x:Class="CommandRoutingIntoItemTemplate.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CommandRoutingIntoItemTemplate"
        xmlns:system="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>

        <local:UserControlTest></local:UserControlTest>

        <ListBox Grid.Row="1">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="Aqua" BorderThickness="2">
                        <local:UserControlTest></local:UserControlTest>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>

            <ListBox.Items>
                <system:String>1</system:String>
                <system:String>2</system:String>
            </ListBox.Items>
        </ListBox>

        <StackPanel Grid.Row="2" Orientation="Horizontal">
            <Button Command="local:Commands.CommandTest">Put focus on TestBlock and click here to see if command occurs</Button>
            <Button Click="AddHack">Hack</Button>
        </StackPanel>
    </Grid>
</Window>

UserControl:

<UserControl x:Class="CommandRoutingIntoItemTemplate.UserControlTest"
             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:CommandRoutingIntoItemTemplate"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.CommandBindings>
        <CommandBinding Command="local:Commands.CommandTest" CanExecute="CommandTestCanExecuteUserControl" Executed="CommandTestExecuteUserControl"></CommandBinding>
    </UserControl.CommandBindings>
    <Grid>
        <TextBox Text="UserControlTest">
            <TextBox.CommandBindings>
                <CommandBinding Command="local:Commands.CommandTest" CanExecute="CommandTestCanExecuteTextBox" Executed="CommandTestExecuteTextBox"></CommandBinding>
            </TextBox.CommandBindings>
        </TextBox>
    </Grid>
</UserControl>

The reason that you are not getting commands invoked on your user control is that your buttons are not in separate focus scope. For WPF to pick up focused element for command target correctly, it needs to be in separate focus scope from command invoking control.

Framework will just traverse up visual tree from button looking for command bindings in their focus scope (in your case it won't find any). When framework does not find any command bindings in current focus scope, only then it looks into parent focus scope for focused element (In your case, buttons are in Window focus scope which has no parent scope so the search will end there).

Simply setting FocusManager.IsFocusScope="True" on your StackPanel will fix the issue.

You could also specify CommandTarget property on your buttons to point to your user control and not rely on focus.