如何在Avalonia.Xaml.Interactions.Custom中获取拖拽控件的Canvas坐标？

问题背景 #

在Avalonia项目中，将控件的Canvas.Left绑定到ViewModel的Left属性后，使用Avalonia.Xaml.Interactions.Custom中的DragControlBehavior执行拖拽操作时，ViewModel的Left属性无法同步更新控件的实时坐标。

解决方案 #

方法一：绑定DragControlBehavior的X属性（最简洁） #

DragControlBehavior内置了X和Y属性，支持双向绑定。直接将X属性与ViewModel的Left属性双向绑定，拖拽时行为会自动同步坐标到ViewModel，同时Canvas.Left绑定到Left也会同步控件位置：

修改XAML中的Image部分：

<Image Width="100" Height="100" Canvas.Left="{Binding Left}" IsHitTestVisible="True" 
       Source="resm:Avalonia.Skia.Assets.NoiseAsset_256X256_PNG.png?assembly=Avalonia.Skia">
    <i:Interaction.Behaviors>
        <iac:DragControlBehavior X="{Binding Left, Mode=TwoWay}"/>
    </i:Interaction.Behaviors>
</Image>

ViewModel代码保持不变即可，拖拽过程中Left属性会自动同步更新。

方法二：通过行为事件手动更新ViewModel #

如果需要在拖拽过程中添加额外逻辑（比如坐标校验、日志输出），可以监听DragControlBehavior的DragDelta或DragCompleted事件，在事件中获取控件当前坐标并更新ViewModel：

1. 修改XAML添加事件绑定：

<Image Width="100" Height="100" Canvas.Left="{Binding Left}" IsHitTestVisible="True" 
       Source="resm:Avalonia.Skia.Assets.NoiseAsset_256X256_PNG.png?assembly=Avalonia.Skia">
    <i:Interaction.Behaviors>
        <iac:DragControlBehavior DragDelta="DragControlBehavior_DragDelta"
                                 DragCompleted="DragControlBehavior_DragCompleted"/>
    </i:Interaction.Behaviors>
</Image>

2. 在UserControl的后台代码（CustomBehaviorView.xaml.cs）中实现事件处理：

private void DragControlBehavior_DragDelta(object? sender, Avalonia.Xaml.Interactions.Custom.DragDeltaEventArgs e)
{
    if (sender is Control control && DataContext is MainWindowViewModel vm)
    {
        vm.Left = Canvas.GetLeft(control);
    }
}

private void DragControlBehavior_DragCompleted(object? sender, Avalonia.Xaml.Interactions.Custom.DragCompletedEventArgs e)
{
    if (sender is Control control && DataContext is MainWindowViewModel vm)
    {
        vm.Left = Canvas.GetLeft(control);
    }
}

注意事项 #

• 若直接修改Canvas.Left的绑定模式为TwoWay，可能无法生效：因为DragControlBehavior是直接修改控件的附加属性值，而非通过绑定源更新，Avalonia的附加属性双向绑定不一定能捕获到这种直接赋值的变化。
• 确保ViewModel继承了ReactiveObject（或实现了INotifyPropertyChanged接口），RaiseAndSetIfChanged方法能正确触发属性变更通知。

内容的提问来源于stack exchange，提问作者Chenglong Zhang