如何创建支持绑定的Avalonia触摸屏数字输入自定义控件？

需求回顾 #

需要实现一款适用于触摸屏的单数位数字输入控件，结构为「+按钮→数值标签→-按钮」，支持堆叠作为多位数的各个数位，核心特性：

• 支持外部双向绑定读写数值
• 能感知数值变化并同步UI
• 可从外部设置初始值

最优实现方案：UserControl + StyledProperty（无需额外ViewModel） #

针对你之前遇到的问题，核心是正确实现支持双向绑定的StyledProperty，同时处理属性变更逻辑，以下是完整代码示例：

1. 后台代码定义StyledProperty #

public partial class DigitInputControl : UserControl
{
    // 定义数值的StyledProperty，默认值0，开启双向绑定
    public static readonly StyledProperty<int> ValueProperty =
        AvaloniaProperty.Register<DigitInputControl, int>(nameof(Value), 
            defaultValue: 0, 
            defaultBindingMode: BindingMode.TwoWay);

    public int Value
    {
        get => GetValue(ValueProperty);
        set => SetValue(ValueProperty, value);
    }

    public DigitInputControl()
    {
        InitializeComponent();
        // 监听属性变化，确保数值在0-9范围内（数位控件限制）
        this.PropertyChanged += DigitInputControl_PropertyChanged;
    }

    private void DigitInputControl_PropertyChanged(object? sender, AvaloniaPropertyChangedEventArgs e)
    {
        if (e.Property == ValueProperty)
        {
            var newValue = (int)e.NewValue!;
            // 边界值修正
            if (newValue < 0) Value = 0;
            else if (newValue > 9) Value = 9;
            // 同步标签文本
            ValueLabel.Text = Value.ToString();
        }
    }

    // 加1按钮点击逻辑
    private void AddButton_Click(object? sender, RoutedEventArgs e)
    {
        Value++;
    }

    // 减1按钮点击逻辑
    private void MinusButton_Click(object? sender, RoutedEventArgs e)
    {
        Value--;
    }
}

2. XAML布局与绑定 #

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="YourNamespace.DigitInputControl">
    <StackPanel Orientation="Vertical" Width="60" Margin="5">
        <Button x:Name="AddButton" Content="+" Click="AddButton_Click" />
        <Label x:Name="ValueLabel" HorizontalAlignment="Center" FontSize="24"
               Content="{Binding Value, RelativeSource={RelativeSource AncestorType=UserControl}}" />
        <Button x:Name="MinusButton" Content="-" Click="MinusButton_Click" />
    </StackPanel>
</UserControl>

3. 外部使用示例 #

在父控件中可直接设置初始值或双向绑定：

<StackPanel Orientation="Horizontal">
    <!-- 设置初始值为3 -->
    <local:DigitInputControl Value="3" />
    <!-- 双向绑定到父ViewModel的属性 -->
    <local:DigitInputControl Value="{Binding TensDigit, Mode=TwoWay}" />
</StackPanel>

之前方案的问题分析 #

• Templated Controls：没必要用模板控件，UserControl更适合这种简单固定结构的场景，模板控件主要用于需要自定义外观模板的复杂控件。
• UserControl+ViewModel方案A：额外引入ViewModel属于冗余设计，StyledProperty本身就是控件的依赖属性，天然支持绑定，直接操作控件的Value属性即可实现需求。
• 仅代码后台方案B：你之前可能未设置BindingMode.TwoWay，也没处理属性变更回调，导致外部初始值无法同步到控件内部。

进阶：结合CommunityToolkit.Mvvm（若需ViewModel） #

如果业务逻辑需要分离到ViewModel，无需让UserControl继承ObservableObject，只需将控件的ValueProperty绑定到ViewModel的属性：

1. ViewModel代码

public partial class DigitViewModel : ObservableObject
{
    [ObservableProperty]
    private int _value = 0;

    [RelayCommand]
    public void Increment() => Value = Math.Min(Value + 1, 9);

    [RelayCommand]
    public void Decrement() => Value = Math.Max(Value - 1, 0);
}

2. UserControl的XAML绑定

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="clr-namespace:YourNamespace.ViewModels"
             x:Class="YourNamespace.DigitInputControl">
    <UserControl.DataContext>
        <vm:DigitViewModel />
    </UserControl.DataContext>
    <StackPanel Orientation="Vertical" Width="60" Margin="5">
        <Button Content="+" Command="{Binding IncrementCommand}" />
        <Label HorizontalAlignment="Center" FontSize="24" Content="{Binding Value}" />
        <Button Content="-" Command="{Binding DecrementCommand}" />
    </StackPanel>
</UserControl>

3. 外部绑定ViewModel

<local:DigitInputControl DataContext="{Binding HundredsDigitViewModel}" />

内容的提问来源于stack exchange，提问作者Asier Vicente Sánchez