WPF中如何修改ItemsControl内元素的Canvas.Top与Canvas.Left属性

问题根源 #

1. 附加属性绑定对象错误：你设置的Canvas.Top/Canvas.Left是绑定在ContentPresenter（ItemsControl的容器元素）上的，而非DataTemplate里的Rectangle，直接修改Rectangle的附加属性不会生效。
2. ViewModel通知错误：属性的OnPropertyChanged传入了字段名（nameof(_X)/nameof(_Y)），而非属性名（nameof(X)/nameof(Y)），导致UI无法收到属性变更通知。
3. 不符合MVVM规范：直接用后台事件处理逻辑，违背了MVVM的分离原则，应该通过命令实现交互。

修正步骤 #

1. 修正ElementViewModel的属性通知

将属性的OnPropertyChanged参数改为对应属性名，确保UI能接收变更通知：

private double _X;
public double X
{
    get => _X;
    set
    {
        _X = value;
        OnPropertyChanged(nameof(X)); // 改为属性名X
    }
}

private double _Y;
public double Y
{
    get => _Y;
    set
    {
        _Y = value;
        OnPropertyChanged(nameof(Y)); // 改为属性名Y
    }
}

2. 在ElementViewModel中添加命令（实现ICommand）

添加用于修改位置的命令，点击时直接更新X/Y属性：

public ICommand ChangeLocationCommand { get; }

public ElementViewModel()
{
    ChangeLocationCommand = new RelayCommand(ExecuteChangeLocation);
}

private void ExecuteChangeLocation()
{
    // 可自定义位置逻辑，示例设为200,200
    X = 200;
    Y = 200;
}

若没有RelayCommand，可自定义简单实现：

public class RelayCommand : ICommand
{
    private readonly Action _execute;
    private readonly Func<bool> _canExecute;

    public event EventHandler CanExecuteChanged;

    public RelayCommand(Action execute, Func<bool> canExecute = null)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter) => _canExecute?.Invoke() ?? true;

    public void Execute(object parameter) => _execute();

    public void RaiseCanExecuteChanged() => CanExecuteChanged?.Invoke(this, EventArgs.Empty);
}

3. 修改XAML，绑定命令替代后台事件

移除MouseLeftButtonDown的后台事件，改用命令绑定：

方法一：使用行为库（推荐）

先添加NuGet包Microsoft.Xaml.Behaviors.Wpf，再修改DataTemplate：

<DataTemplate>
    <Rectangle Width="50" Height="50">
        <b:Interaction.Triggers>
            <b:EventTrigger EventName="MouseLeftButtonDown">
                <b:InvokeCommandAction Command="{Binding ChangeLocationCommand}"/>
            </b:EventTrigger>
        </b:Interaction.Triggers>
    </Rectangle>
</DataTemplate>

需在XAML根节点添加命名空间：xmlns:b="http://schemas.microsoft.com/xaml/behaviors"

方法二：使用InputBinding（无需额外库）

<DataTemplate>
    <Rectangle Width="50" Height="50">
        <Rectangle.InputBindings>
            <MouseBinding MouseAction="LeftClick" Command="{Binding ChangeLocationCommand}"/>
        </Rectangle.InputBindings>
    </Rectangle>
</DataTemplate>

4. 确保ElementListingViewModel正确初始化集合

在构造函数中实例化集合，避免空引用：

public ObservableCollection<ElementViewModel> _elements { get; set; }
public IEnumerable<ElementViewModel> Elements => _elements;

public ElementListingViewModel()
{
    _elements = new ObservableCollection<ElementViewModel>();
    // 示例添加测试元素
    _elements.Add(new ElementViewModel { X = 50, Y = 50 });
}

原代码无效原因说明 #

你之前调用Canvas.SetLeft(sender as Rectangle, 200)是修改了Rectangle的附加属性，但ItemsControl中控制元素位置的是ContentPresenter的Canvas.Left/Canvas.Top，这两个属性绑定到ViewModel的X/Y，只有修改ViewModel的X/Y并正确触发PropertyChanged，才能让UI更新位置。

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