如何正确绑定Avalonia UI自定义用户控件属性？禁用框问题修复

问题分析 #

你的代码存在三个核心问题导致控件显示异常：

1. XAML标签嵌套语法错误，多余的闭合标签破坏了控件结构
2. XAML的类名与后台代码类名不匹配
3. TextBlock的绑定未正确指向用户控件的Dot属性

具体修复步骤 #

1. 修复XAML结构与类名匹配 #

修改Slot.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"
             xmlns:controls="clr-namespace:Avalonia.Controls;assembly=Avalonia.Controls"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             xmlns:cc="clr-namespace:Diagnostica.CustomControls;assembly=Diagnostica.CustomControls"
             x:Class="Diagnostica.CustomControls.Slot"
>
    <Button>
        <TextBlock Text="{Binding Dot, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
    </Button>
</UserControl>

2. 完善后台代码结构 #

确保Slot.axaml.cs包含必要的构造方法，且类名与XAML一致：

namespace Diagnostica.CustomControls;

public partial class Slot : UserControl
{
    public string Dot
    {
        get => GetValue(DotProperty);
        set => SetValue(DotProperty, value);
    }

    public static readonly StyledProperty<string> DotProperty =
            AvaloniaProperty.Register<Slot, string>(nameof(Dot), defaultValue: "Black");

    public Slot()
    {
        InitializeComponent();
    }
}

注意：如果后台代码没有InitializeComponent()方法，需确保XAML文件的生成操作设置为"Avalonia XAML"，编译时会自动生成该方法。

3. 修正绑定指向 #

TextBlock的绑定通过RelativeSource指定绑定源为父级UserControl，确保能正确获取控件自身的Dot属性值（默认绑定上下文为DataContext，无法直接访问控件属性）。

验证修复 #

完成修改后重新编译运行，MainView中传递的Dot值会正确显示在Button内部的TextBlock中，控件也不会再显示禁用框。

内容的提问来源于stack exchange，提问作者Karina Kozarova