AvaloniaUI UserControl property cannot bind to another property

Question

I'm trying to understand AvaloniaUI property binding (I have strong WPF background). I've already checked possible duplicates, with no solution for my problem.

I created a user control, let's keep is simple:

public partial class UserBox : UserControl
{
    public string BoxInfo
    {
        get { return (string)GetValue(BoxInfoProperty); }
        set { SetValue(BoxInfoProperty, value); }
    }

    public static readonly StyledProperty<string> BoxInfoProperty =
        AvaloniaProperty.Register<UserBox, string>(nameof(BoxInfo), defaultValue: string.Empty, defaultBindingMode: Avalonia.Data.BindingMode.OneWay);

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

and the axaml:

<UserControl xmlns="https://github.com/avaloniaui"
             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"
             mc:Ignorable="d" d:DesignWidth="400" d:DesignHeight="250"
             x:Class="MyAvaloniaTest.UserBox"
             x:CompileBindings="False">
    <Grid>
        <TextBlock Text="{Binding BoxInfo, Mode=OneWay}" />
    </Grid>
</UserControl>

Now, in main window I can use this control as follows:

<local:UserBox BoxInfo="Some text" />

This works.

I can give it a name:

<local:UserBox x:Name="MyBox" BoxInfo="Some text" />

and then use it in the code:

if (this.GetControl<UserBox>("MyBox") is UserBox ub) ub.BoxInfo = "Some text";

And this also works.

But then, when I define a property in the view model of main window:

private string _mainBoxMessage = string.Empty;

public string MainBoxMessage 
{
    get => this._mainBoxMessage ;
    set 
    { 
        this._mainBoxMessage = value; 
        OnPropertyChanged(nameof(MainBoxMessage ));
    }
}

Then in axaml of main window:

<local:UserBox x:Name="MyBox" BoxInfo="{Binding MainBoxMessage}" />

And in main window code:

if (this.DataContext is MainWindowViewModel dc) dc.MainBoxMessage = "Some bound text";

This doesn't work.

I've tried setting x:CompileBindings to true, it didn't help either.

What am I missing?

Btw., if I add another control, like this:

<TextBlock Text="{Binding MainBoxMessage}" />

its content is set according to the value of MainBoxMessage.

Answer 1

Similar to WPF, the Binding expression

BoxInfo="{Binding MainBoxMessage}" 

requires that the UserBox control inherits the value of its DataContext property from its parent element. This is however not happening because you are overriding the property value inheritance by explictly assigning the DataContext in the UserBox constructor. So just remove that assignment from the constructor.

In general, a control with bindable properties should never set its own DataContext - neither in WPF nor in Avalonia - because doing so breaks the standard data binding behaviour of the framework.

public UserBox()
{
    InitializeComponent();
    // DataContext = this; --- remove this line
}

In the UserControl's XAML, Bindings of its own properties would now declare the UserControl as RelativeSource e.g. like

<TextBlock Text="{Binding BoxInfo,
    RelativeSource={RelativeSource AncestorType=UserControl}}" />

---

As a note, unlike in WPF you do not need to cast the return value of the GetValue method, so the property declaration would look like this:

public string BoxInfo
{
    get { return GetValue(BoxInfoProperty); } // no cast necessary
    set { SetValue(BoxInfoProperty, value); }
}