C# WPF MVVM，附加行为更新主窗口数据上下文

Question

简而言之：MVVM 模式中访问主窗口数据上下文并通过行为类更新它是否正确？

long：我正在尝试学习 WPF MVVM 并制作应用程序，其中功能之一是带有可拖动椭圆的画布。我发现很少有可以提供此功能的行为示例，但它们依赖于 TranslateTransform，这不是我想要的解决方案。我想提取椭圆坐标以供进一步使用。
我还使用 ItemsControl 显示画布和相关项目，这使得无法使用 Canvas.SetTop() 命令。

经过几次尝试，我找到了一个可行的解决方案，但我不确定根据 MVVM 模式这是否正确。如果这是实现目标的最简单方法……我将编码作为一种爱好 如果我犯了一些概念错误，请告诉我。

简短的应用程序描述：

• 在应用程序启动时，TestWindow2VM 类的实例被创建并分配给主窗口，因为数据上下文
• TestWindow2VM 类包含 ObservableCollection，其中包含 EllipseVM 类。
• EllipseVM 类保存 X、Y 坐标和一些其他数据（画笔等）。
• 在 ItemsControl 的 XAML 中，ItemsSource 的绑定设置为我的 ObservableCollection。在 ItemsControl Datatemplate 中，我将椭圆属性绑定到 EllipseVM 类中存储的数据，并
• 在 ItemsControl ItemContainerStyle 画布中添加对我的行为类的引用。单击椭圆时，顶部和左侧属性将绑定到我的 ObservableCollection
• 我的行为类访问数据上下文，找到 EllipseVM 的实例类并根据鼠标光标相对于画布的位置更改 X 和 Y 坐标。

代码如下：

行为：

public class CanvasDragBehavior
    {
        private Point _mouseCurrentPos;
        private Point _mouseStartOffset;        

        private bool _dragged;
        private static CanvasDragBehavior _dragBehavior = new CanvasDragBehavior();
        public static CanvasDragBehavior dragBehavior
        {
            get { return _dragBehavior; }
            set { _dragBehavior = value; }
        }

        public static readonly DependencyProperty IsDragProperty =
          DependencyProperty.RegisterAttached("CanBeDragged",
          typeof(bool), typeof(DragBehavior),
          new PropertyMetadata(false, OnDragChanged));

        public static bool GetCanBeDragged(DependencyObject obj)
        {
            return (bool)obj.GetValue(IsDragProperty);
        }

        public static void SetCanBeDragged(DependencyObject obj, bool value)
        {
            obj.SetValue(IsDragProperty, value);
        }

        private static void OnDragChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            var element = (UIElement)sender;
            var isDrag = (bool)(e.NewValue);

            dragBehavior = new CanvasDragBehavior();

            if (isDrag)
            {
                element.MouseLeftButtonDown += dragBehavior.ElementOnMouseLeftButtonDown;
                element.MouseLeftButtonUp += dragBehavior.ElementOnMouseLeftButtonUp;
                element.MouseMove += dragBehavior.ElementOnMouseMove;
            }
            else
            {
                element.MouseLeftButtonDown -= dragBehavior.ElementOnMouseLeftButtonDown;
                element.MouseLeftButtonUp -= dragBehavior.ElementOnMouseLeftButtonUp;
                element.MouseMove -= dragBehavior.ElementOnMouseMove;
            }
        }

        private void ElementOnMouseMove(object sender, MouseEventArgs e)
        {
            if (!_dragged) return;

            Canvas canvas = Extension.FindAncestor<Canvas>(((FrameworkElement)sender));
  
            if (canvas != null)
            {
                _mouseCurrentPos = e.GetPosition(canvas);
                FrameworkElement fe = (FrameworkElement)sender;
                if (fe.DataContext.GetType() == typeof(EllipseVM))
                {
// EllipseVM class contains X and Y coordinates that are used in ItemsControl to display the ellipse
                    EllipseVM ellipseVM = (EllipseVM)fe.DataContext;
                    double positionLeft = _mouseCurrentPos.X - _mouseStartOffset.X;
                    double positionTop = _mouseCurrentPos.Y -  _mouseStartOffset.Y;

                    #region canvas border check
                    if (positionLeft < 0)  positionLeft = 0; 
                    if (positionTop < 0)  positionTop = 0;
                    if (positionLeft > canvas.ActualWidth)  positionLeft = canvas.ActualWidth-fe.Width;
                    if (positionTop > canvas.ActualHeight) positionTop = canvas.ActualHeight-fe.Height;
                    #endregion
                    ellipseVM.left = positionLeft;
                    ellipseVM.top = positionTop;                    
                }
            }    
        }

        private void ElementOnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {

                _mouseStartOffset = e.GetPosition((FrameworkElement)sender);

                _dragged = true;
                ((UIElement)sender).CaptureMouse();

        }

        private void ElementOnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            _dragged = false;
            ((UIElement)sender).ReleaseMouseCapture();

        }

XAML：

<ItemsControl ItemsSource="{Binding scrollViewElements}"  >
                <ItemsControl.Resources>
                     <!--some other data templates here-->
                    </DataTemplate>
                    <DataTemplate DataType="{x:Type VM:EllipseVM}" >
                        <Ellipse Width="{Binding width}" 
                                 Height="{Binding height}"
                                 Fill="{Binding fillBrush}" 
                                 Stroke="Red" StrokeThickness="1"
                                 behaviors:CanvasDragBehavior.CanBeDragged="True"
                                 />
                    </DataTemplate>
                </ItemsControl.Resources>

                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas  Background="Transparent" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemContainerStyle>
                    <Style TargetType="ContentPresenter">                 
                        <Setter Property="Canvas.Top" Value="{Binding top}"/>
                        <Setter Property="Canvas.Left" Value="{Binding left}"/>
                    </Style>
                </ItemsControl.ItemContainerStyle>
            </ItemsControl>

Answer 1

MVVM不同的3种对象：

• 视图
• VModel
• 模型

该视图的属性应绑定到VModel，您可以正确地尝试使用EllipSevm绑定视图，就像真实的专家一样！
项目的问题是，您没有单个视图绑定到单个VM，但是您需要无限数量的VModels。

我将列举以下一些反思点：

• 我想挑战您在不同的拖放事件上注册的事实：
  element.mouseleftbuttondown

您只有在创建或破坏对象时才会注册。

• canvasdragbehavior：为什么要使用静态公共财产（没有私有构造函数）实现单身模式？

  ？

• 避免通过字符串注册属性，例如“ canbedragged”找到一种定义和使用接口的方法

Answer 2

您的代码太复杂了，有一些错误。
例如，不需要 canvasdragbehavior 的静态实例属性。看起来您在这里混淆了一些东西。

要将元素放在 canvas 上，只需使用附加属性 canvas.top 和 canvas.left 。

优先使用 preview 前缀的输入事件的隧道版本。例如，请听 PreviewMouseMove 而不是 Mousemove 。

另一个重要的解决方法是使用 weakeventmanager 订阅所附元素的事件。否则，您会创建潜在的内存泄漏（取决于事件发布者和事件侦听器的寿命）。始终记住要遵循以下模式以避免这种内存泄漏：当您订阅事件时，请确保您也会始终退订。如果您无法控制对象寿命，请始终按照弱事件模式并使用 weakeventmanager 观察事件。
在您的情况下：从 itemscontrol.itemssource 中删除项目时，您的行为将无法检测到此更改以便从相应的事件中取消订阅。
在您的上下文中，内存泄漏的风险不是很高，但是要安全比后悔更好，并坚持安全模式。

实施控制或行为时，请尝试避免与数据类型和实现细节紧密耦合。使控制或行为尽可能通用。因此，您的行为不应知道 datacontext 以及拖动哪种类型的元素。这样，您可以简单地扩展代码或重复使用该行为，例如允许拖动矩形。现在，您的代码仅与椭圆或 eLLIPSEVM 一起使用。

通常，您不需要查看模型中的位置数据。如果纯UI拖动＆amp;放下坐标仅是视图的一部分。在这种情况下，您希望将行为附加到项目容器上，而不是将其附加到 dataTemplate 的元素上：您不想拖动数据模型。您想拖动项目容器。
如果您仍然需要模型中的坐标，则可以在 itemscontrol.itemcontainerstyle 中设置一个绑定，如下示例（项目容器的 dataContext 始终是数据项，在您的情况下是类型 ellipsevm ）。

针对拖动项目容器而不是数据模型的简化和改进的版本可以如下。请注意，以下行为仅通过仅使用拖动对象的 uielement 类型来实现。根本不需要元素或数据模型的实际类型。这样，它将与每个形状或控件一起使用（不仅椭圆）。您甚至可以拖动按钮或 datatemplate 中定义的内容。 datacontext 可以是任何类型。

public class CanvasDragBehavior
{
  public static readonly DependencyProperty IsDragEnabledProperty = DependencyProperty.RegisterAttached(
    "IsDragEnabled",
    typeof(bool),
    typeof(CanvasDragBehavior),
    new PropertyMetadata(false, OnIsDragEnabledChanged));

  public static bool GetIsDragEnabled(DependencyObject obj) => (bool)obj.GetValue(IsDragEnabledProperty);
  public static void SetIsDragEnabled(DependencyObject obj, bool value) => obj.SetValue(IsDragEnabledProperty, value);

  private static Point DragStartPosition { get; set; }
  private static ConditionalWeakTable<UIElement, FrameworkElement> ItemToItemHostMap { get; } = new ConditionalWeakTable<UIElement, FrameworkElement>();

  private static void OnIsDragEnabledChanged(object attachingElement, DependencyPropertyChangedEventArgs e)
  {
    if (attachingElement is not UIElement uiElement)
    {
      return;
    }

    var isEnabled = (bool)e.NewValue;
    if (isEnabled)
    {
      WeakEventManager<UIElement, MouseButtonEventArgs>.AddHandler(uiElement, nameof(uiElement.PreviewMouseLeftButtonDown), OnDraggablePreviewMouseLeftButtonDown);
      WeakEventManager<UIElement, MouseEventArgs>.AddHandler(uiElement, nameof(uiElement.PreviewMouseMove), OnDraggablePreviewMouseMove);
      WeakEventManager<UIElement, MouseButtonEventArgs>.AddHandler(uiElement, nameof(uiElement.PreviewMouseLeftButtonUp), OnDraggablePreviewMouseLeftButtonUp);
    }
    else
    {
      WeakEventManager<UIElement, MouseButtonEventArgs>.RemoveHandler(uiElement, nameof(uiElement.PreviewMouseLeftButtonDown), OnDraggablePreviewMouseLeftButtonDown);
      WeakEventManager<UIElement, MouseEventArgs>.RemoveHandler(uiElement, nameof(uiElement.PreviewMouseMove), OnDraggablePreviewMouseMove);
      WeakEventManager<UIElement, MouseButtonEventArgs>.RemoveHandler(uiElement, nameof(uiElement.PreviewMouseLeftButtonUp), OnDraggablePreviewMouseLeftButtonUp);
    }
  }

  private static void OnDraggablePreviewMouseMove(object sender, MouseEventArgs e)
  {
    if (e.LeftButton == MouseButtonState.Released)
    {
      return;
    }

    var draggable = sender as UIElement;
    if (!ItemToItemHostMap.TryGetValue(draggable, out FrameworkElement draggableHost))
    {
      return;
    }

    Point newDragEndPosition = e.GetPosition(draggableHost);
    newDragEndPosition.Offset(-DragStartPosition.X, -DragStartPosition.Y);
    Canvas.SetLeft(draggable, newDragEndPosition.X);
    Canvas.SetTop(draggable, newDragEndPosition.Y);
  }

  private static void OnDraggablePreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  {
    var draggable = sender as UIElement;       
    if (!ItemToItemHostMap.TryGetValue(draggable, out _))
    {
      if (!TryGetVisualParent(draggable, out Panel draggableHost))
      {
        return;
      }

      ItemToItemHostMap.Add(draggable, draggableHost);
    }

    DragStartPosition = e.GetPosition(draggable);
    draggable.CaptureMouse();
  }

  private static void OnDraggablePreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e) 
    => (sender as UIElement)?.ReleaseMouseCapture();

  private static bool TryGetVisualParent<TParent>(DependencyObject element, out TParent parent) where TParent : DependencyObject
  {
    parent = null;

    if (element is null)
    {
      return false;
    }

    element = VisualTreeHelper.GetParent(element);
    if (element is TParent parentElement)
    {
      parent = parentElement;
      return true;
    }

    return TryGetVisualParent(element, out parent);
  }
}

用法示例

dataitem.cs

class DataItem : INotifyPropertyChanged
{
  // Allow this item to change its coordinates aka get dragged
  private bool isPositionDynamic;
  public bool IsPositionDynamic 
  { 
    get => this.isPositionDynamic;
    set 
    {
      this.isPositionDynamic = value; 
      OnPropertyChanged();
    }
  }

  public event PropertyChangedEventHandler PropertyChanged;
  private void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
    => this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

mainwindow.xaml

<Window>
  <ItemsControl ItemsSource="{Binding DataItems}"
                Height="1000" 
                Width="1000">
    <ItemsControl.Resources>
      <DataTemplate DataType="{x:Type local:DataItem}">
        <Ellipse Width="50"
                 Height="50"
                 Fill="Red"
                 Stroke="Black"
                 StrokeThickness="1" />
      </DataTemplate>
    </ItemsControl.Resources>

    <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
        <Canvas Width="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl}, Path=ActualWidth}"
                Height="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl}, Path=ActualHeight}"
                Background="Gray" />
      </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemContainerStyle>
      <Style TargetType="ContentPresenter">

        <!-- If every item is draggable, simply set this property to 'True' -->
        <Setter Property="local:CanvasDragBehavior.IsDragEnabled"
                Value="{Binding IsPositionDynamic}" />

        <!-- Optional binding if you need the coordinates in the view model.
             This example assumes that the view model has a Top and Left property -->
        <Setter Property="Canvas.Top"
                Value="{Binding Top, Mode=TwoWay}" />
        <Setter Property="Canvas.Left"
                Value="{Binding Left, Mode=TwoWay}" />
      </Style>
    </ItemsControl.ItemContainerStyle>
  </ItemsControl>
</Window>