使用 Prism-MVVM 正确使用委派命令

Question

我正在尝试使用带有 Prism 库的 MVVM 框架来获取与 wpf 控件（在这种情况下为 Canvas）相关的鼠标位置。

我已经有了解决方案，但我不确定这是否是使用 MVVM 框架的正确方法。

主Window：

<Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="250"/>
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0" BorderBrush="Gray" BorderThickness="1">
            <Canvas HorizontalAlignment="Center" VerticalAlignment="Center"  
            Width="{Binding CanvasWidth}" Height="{Binding CanvasHeight}">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseMove">
                        <prism:InvokeCommandAction Command="{Binding MouseMove}"/>
                    </i:EventTrigger>
                    <i:EventTrigger EventName="Loaded">
                        <prism:InvokeCommandAction Command="{Binding Loaded}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
                <Image Source="{Binding Image}" />
            </Canvas>
        </Border>
        <TextBlock Grid.Column="1" Text="{Binding Text}"/>
        <StackPanel  Grid.Column="1">
            <TextBlock Text="{Binding MouseX, StringFormat='X={0}'}" Grid.Column="1" />
            <TextBlock Text="{Binding MouseY, StringFormat='Y={0}'}" Grid.Column="1" />
        </StackPanel>
    </Grid>

在这个 XAML 剪切代码中，canvas 有 2 个事件触发器，我用于转换：

• "MouseMove" 事件给 XY 指针 position
• 以及棘手部分所在的“加载”事件。 这里我通过这个EventTrigger将实例obj从Canvas传递到controller，在controller中我使用这个代码：

Loaded 和 MouseMove 命令定义：

    public DelegateCommand<MouseEventArgs> MouseMove { get; private set; } 
    public DelegateCommand<RoutedEventArgs> Loaded { get; private set; }

构造函数：

public MainWindowViewModel()
    {
        MouseMove = new DelegateCommand<MouseEventArgs>(GetMousePosition);
        Loaded = new DelegateCommand<RoutedEventArgs>(GetCanvas);
    }

属性定义：

private string _mouseX;
public string MouseX
{
    get { return _mouseX; }
    set { SetProperty(ref _mouseX, value); }
}

private string _mouseY;
public string MouseY
{
    get { return _mouseY; }
    set { SetProperty(ref _mouseY, value); }
}

private System.Windows.Controls.Canvas _canvas;
public System.Windows.Controls.Canvas Canvas
{
   get { return _canvas; }
   set { SetProperty(ref _canvas, value); }
}

命令调用的方法：

private void GetCanvas(RoutedEventArgs obj)
{
    Canvas = (System.Windows.Controls.Canvas)obj.Source;
}

private void GetMousePosition(MouseEventArgs eventParam)
{
    Point position = eventParam.GetPosition(Canvas);
    MouseX = position.X.ToString();
    MouseY = position.Y.ToString();
}

这种方式是正确的用法吗？ 即使这样工作，我也想将 Canvas obj 传递给 controller 我正在做类似“代码背后”的事情。

先谢谢了！

Answer 1

我正在使用转换器来执行GetPosition 。 它通过了源和事件参数，因此您可以在没有LoadedCommand的情况下逃脱，并且您可以将MouseEventArgs排除在您的视图 model 之外。

xaml：

<i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseMove">
        <i:InvokeCommandAction Command="{Binding MouseMoveCommand}" PassEventArgsToCommand="True" EventArgsConverter="{StaticResource GetPositionConverter}"/>
    </i:EventTrigger>
</i:Interaction.Triggers>

查看 model：

public DelegateCommand<Point?> MouseMoveCommand { get; }

转换器：

internal class GetPositionConverter : IValueConverter
{
    public object Convert( object value, Type targetType, object parameter, CultureInfo culture )
    {
        var mouseEventArgs = (MouseEventArgs)value;
        return mouseEventArgs.GetPosition( (IInputElement)mouseEventArgs.Source );
    }

    public object ConvertBack( object value, Type targetType, object parameter, CultureInfo culture )
    {
        throw new NotImplementedException();
    }
}

转换器应该至少有最小的错误处理，但这只是一个例子:-)

Answer 2

是的，您违反了 MVVM。您不应在ViewModel中引用任何 UI 类型。

我建议如下（您可以使用相同的方法将所需的任何数据从View传递到ViewModel并使它们彼此分开）：

首先。 从您的 ViewModel 中删除DelegateCommand ！ 以及您那里的所有代码片段！

第二。 从.xaml中删除<i:Interaction.Triggers/>代码块

第三。 像这样在Canvas中正常定义MouseMove ： <Canvas MouseMove="Canvas_OnMouseMove" ，然后像这样在.xaml.cs中定义处理程序（在此处定义 MousePosition 变量）

private string _mouseX;
private string _mouseY;

private void MainWindow_OnMouseMove(object sender, MouseEventArgs e)
{
    Point position = e.GetPosition(sender as Canvas);
    _mouseX = position.X.ToString();
    _mouseY = position.Y.ToString();
}

最后，当ViewModel想要了解 Mouse 坐标时，它可以执行以下操作：

1. 在ViewModel的命名空间中定义接口：

public interface IUiServices
{
    (string mouseX, string mouseY) GetMouseCoordinates();
}

2. 让承载<Canvas/>的 Window（或 UserControl）实现此接口

public partial class TheView: IUiServices { }

3. 在MainWindow_OnMouseMove回调下方实现GetMouseCoordinates() function！

public (string mouseX, string mouseY) GetMouseCoordinates() => (_mouseX, _mouseY);

任何一个：

4. 在protected override void RegisterTypes(IContainerRegistry containerRegistry){}方法中，像这样注册IUiServices ：

protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
    // ...
    containerRegistry.RegisterSingleton<IUiServices, TheView>();
    // ...
}

在ViewModel中，您可以将其注入构造函数中

public TheViewModel(.. , IUiServices UiServices){
  //..
}

或者：

4. 在ViewModel中定义一个方法以允许注入服务

private IUiServices UiServices {set; get;}
public SetUiService(IUiServices s){
    UiServices = s;
}

并在TheView.xaml.cs的构造函数中进行注入（确保已设置DataContext ）。

(this.DataContext as TheViewModel)?.SetUiService(this);

5. 在ViewModel中需要时调用它

private void SomeMethod(){
    // ..
    var tuple = UiServices.GetMouseCoordinates();
    // ..
}

---

从现在开始，任何ViewModel想要从View获得的服务，只要在IUiServices接口中定义，在View中实现，在ViewModel中使用即可