Binding to UserControl DependencyProperty

Question

I have created a UserControl with some DependencyProperties (in the example here only one string property). When I instantiate the Usercontrol, I can set the property of the UserControl and it is shown as expected. When I am trying to replace the static text by Binding, nothing is displayed.

My UserControl looks as follows:

<User Control x:Class="TestUserControBinding.MyUserControl"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="30" d:DesignWidth="100">
    <Grid>
    <Label Content="{Binding MyText}"/>
  </Grid>
</UserControl>

The Code Behind is:

namespace TestUserControBinding {

  public partial class MyUserControl : UserControl {
    public MyUserControl() {
      InitializeComponent();
      this.DataContext = this;
    }

    public static readonly DependencyProperty MyTextProperty = 
                   DependencyProperty.Register(
                         "MyText", 
                          typeof(string), 
                          typeof(MyUserControl));

    public string MyText {
      get {
        return (string)GetValue(MyTextProperty);
      }
      set {
        SetValue(MyTextProperty, value);
      }
    }// MyText
    
  }
}

When I try this in my MainWindow, everything is as expected:

<Window x:Class="TestUserControBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:TestUserControBinding"
        Title="MainWindow" Height="350" Width="525">
  <StackPanel>
    <local:MyUserControl MyText="Hello World!"/>
  </StackPanel>
</Window>

But this doesn't work:

<Window x:Class="TestUserControBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:TestUserControBinding"
        Title="MainWindow" Height="350" Width="525">
  <StackPanel>
    <local:MyUserControl MyText="{Binding Path=Text}"/>
    <Label Content="{Binding Path=Text}"/>
  </StackPanel>
</Window>

The behaviour of the label is correct, so there is no Problem with the Property "Text"

What is my mistake?

Bedclothes

Answer 1

With the following binding in your UserControl:

<Label Content="{Binding MyText}"/>

I'm not sure how setting the text directly to the MyText property works. You must be setting the DataContext on the UserControl somewhere for this to work.

Regardless, this binding is the issue - as I understand your scenario, you don't want to bind to the DataContext of the UserControl because that will not necessarily have a MyText property. You want to bind to the UserControl itself, and specifically the DependencyProperty you created. To do that, you need to use a RelativeSource binding, like the following:

<Label Content="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:MyUserControl}}, Path=MyText}"/>

This will navigate up the visual tree to MyUserControl and then find the MyText property there. It will not be dependent on the DataContext, which will change based on where you place the UserControl.

In this case, local refers to a namespace you'll need to define in the UserControl:

<UserControl x:Class="TestUserControBinding.MyUserControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:TestUserControBinding"
         ...>

And your second example should work at that point.

Revolting

@Brian... The code "this.DataContext = this;" should take care of setting the DataContext to local. Shouldn't it? – Millburn

Oh, yes, I missed that. But if you're creating a UserControl, I don't think it's a good idea to manually set the DataContext. The DataContext is intended to represent the context inherited or assigned from the container. The RelativeSource binding allows you to achieve the desired result (binding to the DependencyProperty) while not interrupting the standard DataContext inheritance flow. Attempting to override the DataContext as you have will fail if the consumer of your UserControl sets their own DataContext. – Revolting

that was exactly the problem. Instead of setting the DataContext of MyUserControl to itself I use now x:Name="MyName" in the opening tag of MyUserControl and the Binding changes to: <Label Content="{Binding ElementName=MyName, Path=MyText}"/>I think you solution should also work, but it is a little unwieldy. – Bedclothes

Yes, using an ElementName binding will accomplish the same result, and is less wordy, particularly if you're confident others won't be modifying your code and mistakenly change/remove the name. – Revolting

This answer is totally irrelevant to the question. I wonder why this is upvoted this much and even got accepted. – Amethyst

I've been using this solution but switched to ΩmegaMan's solution as his is much clearer. – Boston

Answer 2

There is a misunderstanding of how DataContexts are set. This is working against you...

Ultimately the binding to MyText on the user control, is not bound to the control's MyText dependency property but to the page's DataContext and there is no MyText property.

Let me explain

---

Explanation When the user control is put on your main page, it inherits its controls parent's DataContext (the StackPanel). If the parent's DataContext is not set, it will move up the chain to the StackPanel's parent's DataContext (ad Infinium) until it gets to the page's DataContext (which in your example is set and valid).

When you bind on the main page such as <local:MyUserControl MyText="{Binding Path=Text}"/> it looks for Text property on the main pages DataContext and sets the dependency property MyText to that value. Which is what you expect and it works!

Current State So the state of the user control in your code is this, its DataContext is bound to the page's DataContext and MyText dependency property is set. But the internal control's binding to MyText fails. Why?

The user control has the parent's data context, and you are asking the control to bind to a MyText property on that data context. There is no such property and it fails.

---

Resolution

To bind to the control's instance and get the value from MyText property, just put a name (an element name) on the control such as

<User Control x:Class="TestUserControBinding.MyUserControl"
             ...
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             x:Name="ucMyUserControl"

and then properly path the binding away from the default DataContext and to the elementnamed named instance called ucMyUserControl. Such as:

  <Label Content="{Binding MyText, ElementName=ucMyUserControl }"/>

Note that VS2017/2019 will actually intellisense the ElementName after you have named the control.

---

Side Effect of Just Using The Parents Data Context

A side effect of the original situation without the resolution mentioned, is that you could just bind the user control's binding to Text and it will work because the binding is defaulting to the page's datacontext. Subtle...

<User Control x:Class="TestUserControBinding.MyUserControl"
             mc:Ignorable="d" 
             d:DesignHeight="30" d:DesignWidth="100">
 <Grid>
    <Label Content="{Binding Text}"/>

That works and technically you could remove the dependency property. If the control is not used outside the project, it could be designed to bind to other named properties with no ill effect as well.

Then all usercontrols could become defacto sub controls of the main page, as if you just pasted the internal XAML onto the page.

Lop

you confuse the controls and their datacontexts. you should reword your post to resolve this confusion. – Amethyst