Binding not triggered from nested UserControl

[KWodarczyk]

Describe the bug

For some reason when 'Binding' does not fire in the nested usercontrol but when i change it to x:Bind it does work. It also works fine from top level usercontrol.

<Page
    x:Class="WinUI3DesktopMVVM.Views.NestedContorlBindingPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI3DesktopMVVM.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel>
            <TextBlock Text="Nested Contorl binding test" FontSize="20"></TextBlock>

            <local:CustomControlLevel1 Level1StrProperty="{Binding viewModel.Property1}" >
                <local:CustomControlLevel1.NestedControl>
                    <local:ControlLevel2 Level2Property="{Binding viewModel.Property2}" /> <!--this works fine only when I change it to x:Bind why ?-->
                </local:CustomControlLevel1.NestedControl>
            </local:CustomControlLevel1>
        </StackPanel>
    </Grid>
</Page>

page code behind

    public sealed partial class NestedContorlBindingPage : Page
    {
        public NestedContorlBindingPage()
        {
            viewModel = new NestedContorlViewModel();
            this.InitializeComponent();
            this.DataContext = this;
        }

        public NestedContorlViewModel viewModel { get; private set; }
    }

view model

    public class NestedContorlViewModel
    {
        public NestedContorlViewModel()
        {

        }

        public string Property1 => "Property 1 txt";

        public string Property2 => "Property 2 txt";

    }

usercontrol level 1 xaml

<UserControl
    x:Class="WinUI3DesktopMVVM.Views.CustomControlLevel1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI3DesktopMVVM.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel>

        <TextBlock Text="{x:Bind Level1StrProperty}" Foreground="Green"/>

        <TextBlock Text="{x:Bind NestedControl.Level2Property}" Margin="0 20 0 0" Foreground="red"/>

    </StackPanel>
</UserControl>

usecotnrol level 2 code behind

    public sealed partial class CustomControlLevel1 : UserControl
    {
        public CustomControlLevel1()
        {
            this.InitializeComponent();
        }


        public ControlLevel2 NestedControl
        {
            get { return (ControlLevel2)GetValue(NestedControlProperty); }
            set { SetValue(NestedControlProperty, value); }
        }

        public static readonly DependencyProperty NestedControlProperty =
            DependencyProperty.Register("NestedControl", typeof(FrameworkElement), typeof(CustomControlLevel1), new PropertyMetadata(null));


        public string Level1StrProperty
        {
            get { return (string)GetValue(Level1StrPropertyProperty); }
            set { SetValue(Level1StrPropertyProperty, value); }
        }

        public static readonly DependencyProperty Level1StrPropertyProperty =
            DependencyProperty.Register("Level1StrProperty", typeof(string), typeof(CustomControlLevel1), new PropertyMetadata(null));
    }

level 2 usercontrol only code behind

    public class ControlLevel2 : UserControl
    {
        public ControlLevel2()
        {
        }

        public string Level2Property
        {
            get { return (string)GetValue(Level2PropertyProperty); }
            set { SetValue(Level2PropertyProperty, value); }
        }

        public static readonly DependencyProperty Level2PropertyProperty =
            DependencyProperty.Register("Level2Property", typeof(string), typeof(ControlLevel2), new PropertyMetadata(null));
    }

Steps to reproduce the bug

just open the project click on Neste ctrl binding tabl and see that the "Property 2 txt" is not showing up

Expected behavior

expected to see this (works fine with x:bind)

but i see this (when used binding)

Screenshots

NuGet package version

WinUI 3 - Windows App SDK 1.1.1

Windows app type

• UWP
• Win32

Device form factor

Desktop

Windows version

Windows 11 (21H2): Build 22000

Additional context

No response

[KWodarczyk]

WinUI3DesktopMVVM.zip

this is the project it can be reproduced

[HavenDV]

x:Bind doesn't use a DataContext, it uses your control as a starting point for searching. While Binding uses the element's DataContext.

Perhaps it's all about the missing this.InitializeComponent(); in the second control?
But it's also possible that the same call sets the DataContext to null, which prevents your controls from inheriting it.

[KWodarczyk]

ok i need to use Binding not x:bind in the nested control how can make it work then ? also when i inspect the local:ControlLevel2 datacontext in the debugger it's same as in the parent actually

[KWodarczyk]

i have added another full blown usercontrol at level2 to make sure this.InitializeComponent(); is called but the issue remains, so there is an issue between level 1 and level 2 usercontrol

[KWodarczyk]

Update: if i add PropertyChangedCallback for 'ControlLevel2 NestedControl' it does fire but the datacontext for dp i always null.

[HavenDV]

Try {Binding viewModel.Property2, ElementName=Root} and add x:Name="Root" to root element.

[KWodarczyk]

nope, does not make any difference

[KWodarczyk]

soon it's gonna be birth day of this issue and nothing has been done.

[KWodarczyk]

bump