Having trouble with a custom UserControl and it's properties

[taevt-iscte]

Hello there, I've defined a UserControl as follows:

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:AvaloniaTestApp.Controls"
             x:Class="AvaloniaTestApp.Controls.CopyableToClipboardTextBoxUserControl"
			 x:DataType="local:CopyableToClipboardTextBoxUserControl">

    <Grid>
        <StackPanel Orientation="Horizontal" Margin="0,-1,0,-1">
            <Label Content="{Binding Caption}" />
            <Label Content=":" Margin="-8,0,0,0" />
            <Button>
                <Image Source="avares://AvaloniaTestApp/Assets/copy-icon-25.png" Width="10" Height="10"/>
            </Button>
            <TextBlock x:Name="TheTextBlock" Text="{Binding Text}" />
        </StackPanel>
    </Grid>
</UserControl>

And it's code-behind:

using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;

namespace AvaloniaTestApp.Controls;

public partial class CopyableToClipboardTextBoxUserControl : UserControl
{
    // Define Styled Properties for Caption and Text
    public static readonly StyledProperty<string> CaptionProperty =
        AvaloniaProperty.Register<CopyableToClipboardTextBoxUserControl, string>(nameof(Caption), defaultValue: "Caption");

    public string Caption
    {
        get => GetValue(CaptionProperty);
        set => SetValue(CaptionProperty, value);
    }

    public static readonly StyledProperty<string> TextProperty =
        AvaloniaProperty.Register<CopyableToClipboardTextBoxUserControl, string>(nameof(Text), defaultValue: "Text");

    public string Text
    {
        get => GetValue(TextProperty);
        set => SetValue(TextProperty, value);
    }

    public CopyableToClipboardTextBoxUserControl()
    {
        // Ensure DataContext is set if needed.
        InitializeComponent();
    }

    private void InitializeComponent()
    {
        AvaloniaXamlLoader.Load(this);
    }
}

However when I use it as such:
<local:CopyableToClipboardTextBoxUserControl Caption="Id" Text="Id" />
There is no text displayed, can someone help me get it working please?

[s97712]

The same confusion here. I can't find any documentation on how to access properties in XML. Can they not be accessed directly? Is it required to use them with a view model?

[timunie]

Yes, Bindings always use DataContext if not specified otherwise.

[stevemonaco]

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

The Binding here is not correct. By default, Bindings go through the DataContext as its Source. Assigning x:DataType is merely a type check to ensure you set the correct type. It does nothing on its own. It doesn't error because the default is null. You can bind indirectly to controls, see https://docs.avaloniaui.net/docs/guides/data-binding/binding-to-controls

Simplifying the code a bit (keep the styled properties as-is) and demonstrating both approaches:

<UserControl
    x:Class="AvaloniaApplication43.TestControl"
    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"
    xmlns:v="using:AvaloniaApplication43"
    x:Name="root"
    mc:Ignorable="d">
    <StackPanel Orientation="Horizontal">
        <Label Content="{Binding #root.Caption}" />
        <TextBlock x:Name="TheTextBlock" Text="{Binding $parent[v:TestControl].Text}" />
    </StackPanel>
</UserControl>

public partial class TestControl : UserControl
{
    public TestControl()
    {
        InitializeComponent();
    }

    // Just to prove it works
    protected override async void OnLoaded(RoutedEventArgs e)
    {
        base.OnLoaded(e);

        await Task.Delay(3000);
        Text = Path.GetRandomFileName();
        Caption = Path.GetRandomFileName();
    }
    // Properties...
}

I exclusively reserve the DataContext property for ViewModels to avoid surprises though you could have set it to the control instance.

[timunie]

If you need a custom control, I highly suggest to inherit TemplatedControl or ContentControl and use TemplateBindings. See Avalonia.Samples > RatingControl for reference.