Can't get binding to work when moving to UserControl

We had a bit of XAML that we wanted to reuse. In this example, I've reduced it to a textbox.

<TextBlock Text="{Binding MyProperty.Value}"/>

We want to reuse the component, so I put it in a UserControl. (Not sure if this is the right way) Note that the data binding is still the same; "{Binding MyProperty.Value}"

<controls:MyControl ControlValue="{Binding MyProperty.Value}"/>

The component works, in that if I put a constant (e.g. "25") instead of the binding, it is updated as expected.
But it doesn't respond to changes in the model.

Why does it work in the original XAML, but not with the UserControl? What am I missing here?

MyControl.xaml

<UserControl
    x:Class="Project.UI.Elements.Common.Controls.MyControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Project.UI.Elements.Common.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="25"
    d:DesignWidth="100">

    <TextBlock Text="{Binding ControlProperty}"/>
</UserControl>

MyControl.xaml.cs

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

// The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236

namespace Project.UI.Elements.Common.Controls
{
    public sealed partial class MyControl : UserControl
    {
        public static readonly DependencyProperty ControlValueProperty =
            DependencyProperty.Register("ControlValue", typeof(double), typeof(MyControl), new PropertyMetadata(0.0));

        public MyControl()
        {
            this.InitializeComponent();
            DataContext = this;
        }

        public double ControlValue
        {
            get { return (double)GetValue(ControlValue); }
            set { SetValue(ControlValue, value); }
        }
    }
}

According to the current scenario you provided, it is recommended to use {x:bind} in UserControl.

MainPage.xaml

<TextBlock Text="{Binding MainPageControlValue, Mode=OneWay}"/>
<local:MyControl ControlValue="{Binding MainPageControlValue, Mode=OneWay}"/>

MainPage.xaml.cs

public static readonly DependencyProperty MainPageValueProperty =
    DependencyProperty.Register("MainPageControlValue", typeof(string), typeof(MainPage), new PropertyMetadata("default"));

public MainPage()
{
    this.InitializeComponent();
    this.DataContext = this;
}

public string MainPageControlValue
{
    get { return (string)GetValue(MainPageValueProperty); }
    set { SetValue(MainPageValueProperty, value); }
}

MyControl.xaml

 <Grid>
    <TextBlock Text="{x:Bind ControlValue, Mode=OneWay}"/>
 </Grid>

MyControl.xaml.cs

public sealed partial class MyControl : UserControl
{
    public static readonly DependencyProperty ControlValueProperty =
        DependencyProperty.Register("ControlValue", typeof(string), typeof(MyControl), new PropertyMetadata("default"));

    public MyControl()
    {
        this.InitializeComponent();
    }
    public MyViewModel VM { get; set; }
    public string ControlValue
    {
        get { return (string)GetValue(ControlValueProperty); }
        set { SetValue(ControlValueProperty, value); }
    }
}

Please don't use DataContext = this in UserControl When you try to use x:bind, otherwise you will get the following binding error.

> MainPageControlValue UserControlTest.MyControl.ControlValue,
> Name='myControl' String BindingExpression path error:
> 'MainPageControlValue' property not found on
> 'UserControlTest.MyControl'

For x:bind, the DataContext is current page, it will find the property in the current Code-Bebind class. But for Binding, assumes, by default, that you're binding to the DataContext of your markup page.

If you need to use Binding, it is recommended that you use Custom Control. You can refer to this thread.

By the way, there are XAML Binding Failures Window in Visual Studio and Top tips on APP when debugging.

in the BatteryLevelControl class, you set the data context to this. However, since the class is derived from UserControl, it does not support the INotifyPropertyChanged and thus does not receive any changes. Try setting the data context to your class that was derived from INotifyPropertyChanged and that contains your dependency properties.