c# - 在我需要基于 XAML 控件进行计算的情况下，使用 MVVM 与控件交互的正确设计是什么？

Question

我对WPF还是有点新手。我正在重构一个相当大的应用程序，其中所有工作都是在后台代码中完成的。我正在重构以使用 MVVM。

关于应用程序的一些信息:此应用程序包含单个窗口，单个窗口和 XAML 的相关部分如下:

<Grid>
    <Border Style="{StaticResource ClipBorderStyle}" Name="ImageBorder">
        <Grid Style="{StaticResource ClipGridStyle}" Name="ImageGrid">
            <Image Name="KeyImage" Style="{StaticResource MainImageStyle}" Source="{Binding ImageSource}" Cursor="{Binding ImageCursor}"></Image>
            <Canvas Name="KeyCanvas" Height="{Binding Source=KeyImage, Path=Height}" common:CanvasAssistant.BoundChildren="{Binding CanvasControls}"></Canvas>
        </Grid>
    </Border>
</Grid>

当用户点击图像时，我将一个控件放到 Canvas 上用户点击的位置。可以有很多对象和多种控件类型。目前，我为每种不同的控件类型定义了一个 View 模型，并且在主视图模型中保留了它们的可观察集合。我大约进行了一半的重构，并且意识到我在后面的代码中仍有大量工作要做，并且正在大量修改 DataContext 中的对象。我很好奇如何将其中的很多内容从后面的代码中移出到更结构化的格式中(可能进入 View 模型，也可能是另一种模式)。如果它只是简单地修改数据，这不会有问题，但在很多情况下我需要进行转换，并跟踪图像上的位置。用户可以使用鼠标和键盘与应用程序交互(单击以选择一个对象，向左箭头移动它等)。

核心问题当我必须执行以下任何操作时:

 private Point TranslateImageCoordinatesToParentGrid(Point pointOnImage)
 {
     return KeyImage.TransformToVisual(ImageGrid).Transform(pointOnImage);
 }

或

private void Marker_OnMouseLeftButtonUp(object sender, MouseButtonEventArgs mouseButtonEventArgs)
{
    var Marker = (Marker)sender;
    if (Marker.IsMouseCaptured)
        Marker.ReleaseMouseCapture();
}

或

private void Marker_OnMouseLeftButtonDown(object sender, MouseButtonEventArgs mouseButtonEventArgs)
{
    var Marker = (Marker)sender;
    Marker.CaptureMouse();
    _dataContext.SelectedObject = Marker;
    Marker.Focus();
}

或

private void controlMarker_OnMouseMove(object sender, MouseEventArgs e)
{
    var controlMarker = (controlMarker)sender;
    var controlDataContext = ((controlMarkerObject)controlMarker.DataContext);
    if (!controlMarker.IsMouseCaptured) return;

    var tt =
        (TranslateTransform)
            ((TransformGroup)controlMarker.RenderTransform).Children.First(tr => tr is TranslateTransform);
    var currentMousePos = e.GetPosition(ImageGrid);

    // center mouse on controlMarker
    currentMousePos -= controlDataContext.CenterOffsetFromTopLeft;

    var v = _dataContext.Start - currentMousePos;
    tt.X = _dataContext.Origin.X - v.X;
    tt.Y = _dataContext.Origin.Y - v.Y;


    var currentImagePos = TranslateImageGridCoordinatesToChildImage(currentMousePos + controlDataContext.TopLeftOffset);

    controlDataContext.ImagePosition = currentImagePos;
}

1. 这个与 View 和 View 模型(以及控件的 View 模型)交互的逻辑的合适位置在哪里？
2. 代码是否在适当的位置？
3. 我应该在定义鼠标事件的地方使用这个事件模型，还是将它们转换为 ICommand？
4. 是否有更好/更简洁的模式可用于此类应用程序？

Answer 1

WPF 的一个最重要的方面使 MVVM 成为一个很好的使用模式是数据绑定(bind)基础结构。通过将 View 的属性绑定(bind)到 ViewModel，您可以在 VM 和 View 之间实现松耦合，并且完全无需在直接更新 View 的 ViewModel 中编写代码。数据绑定(bind)系统还支持输入验证，它提供了一种将验证错误传输到 View 的标准化方法。

我并没有说您必须遵循该模式，我只是说如果您在 View 的代码隐藏中处理点击，您确实违反了 MVVM 模式。这是事实。

如果你想从后面的代码中删除所有这些代码，我建议使用 Caliburn，或者适用于 WPF 的 System.Windows.Interactivity v4.0:代码交互示例:

<Button Content="Submit">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseLeftButtonUp">
            <i:InvokeCommandAction Command="{Binding SubmitCommand}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>