在 MVVM 中的命令上处理 MouseEnter

Question

我有一个带有 ItemControl 的画布，它用自定义 UserControlViewModels 填充 ViewModel。我想给每个 UserControl 一个 MouseEnter 命令什么的。

我的 ViewModel 的 XAML 如下：

<Canvas x:Name="gameFieldCanvas" Width="{Binding CanvasWidth}" Height="{Binding CanvasHeight}">
   <ItemsControl ItemsSource="{Binding GameFieldContent}">
      <ItemsControl.ItemTemplate>
         <DataTemplate DataType="{x:Type local:GameFieldTileViewModel}">
             <Canvas>
                <local:GameFieldTileUserControl X="{Binding TileX}" Y="{Binding TileY}">
                   <local:GameFieldTileUserControl.InputBindings>
                      <MouseBinding MouseAction="LeftClick"
                                                  Command="{Binding DataContext.OnGameFieldTileLeftClicked, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                                                  CommandParameter="{Binding}"/>
                      <MouseBinding MouseAction="RightClick" Command="{Binding DataContext.OnGameFieldTileRightClicked, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                                                  CommandParameter="{Binding}"/>
                   </local:GameFieldTileUserControl.InputBindings>
                </local:GameFieldTileUserControl>
             </Canvas>
         </DataTemplate>
      </ItemsControl.ItemTemplate>
   </ItemsControl>
</Canvas>

如您所见，我已经有用于 Left-/RightClick 的命令，它工作正常。但是 MouseEnterEvents 没有 InputBindings。

我已经阅读了有关可以编写 EventTriggers 或类似内容的 Blend SDK 的信息，但是使用板工具是否可以实现？

我只是想实现当一个 UserControl 被输入时获取它的 UserControlViewModel。

Answer 1

您能否详细说明您最终想要完成的任务？我可能会为您提供更好的答案，但您可以，而且我有很多次覆盖现有控件并添加所需的命令属性。

这是一个具有鼠标移动命令的自定义用户控件。

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace WPF_Question_Answer_App
{
    public partial class MouseMoveCommandUserControl : UserControl
    {
        public MouseMoveCommandUserControl()
        {
            InitializeComponent();
            MouseMove += (s, e) =>
            {
                if (MouseMoveCommand?.CanExecute(MouseMoveCommandParameter) ?? false)
                    MouseMoveCommand.Execute(MouseMoveCommandParameter);
            };
        }

        public ICommand MouseMoveCommand
        {
            get => (ICommand)GetValue(MouseMoveCommandProperty);
            set => SetValue(MouseMoveCommandProperty, value);
        }

        public static readonly DependencyProperty MouseMoveCommandProperty =
            DependencyProperty.Register(nameof(MouseMoveCommand), typeof(ICommand), typeof(MouseMoveCommandUserControl), new PropertyMetadata(null));

        public object MouseMoveCommandParameter
        {
            get => GetValue(MouseMoveCommandParameterProperty);
            set => SetValue(MouseMoveCommandParameterProperty, value);
        }

        public static readonly DependencyProperty MouseMoveCommandParameterProperty =
            DependencyProperty.Register(nameof(MouseMoveCommandParameter), typeof(object), typeof(MouseMoveCommandUserControl), new PropertyMetadata(null));
    }
}

这里在视图中使用 in 很明显。

<Window x:Class="WPF_Question_Answer_App.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF_Question_Answer_App"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <local:MouseMoveCommandUserControl MouseMoveCommand="{Binding SomeMouseMoveCommand}"
                                           MouseMoveCommandParameter="{Binding SomeMouseMoveCommandParameter}"/>
    </Grid>
</Window>

希望这会有所帮助...如果没有，我会删除答案，请告诉我。

Answer 2

只是一个如何使用内置组件来完成它的示例..

您可以利用已经存在的 UI 组件来实现您的大部分目标。有副作用（不能连续两次点击同一个图块，需要修改选择的行为方式等），但这是另一种处理方式。

在您的窗口中，使用带有适当面板的 ListBox。在我的示例中，您可以将此作为井字游戏的基础：

<Window x:Class="TileClicker.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TileClicker"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <ListBox
        ItemsSource="{Binding Tiles}"
        SelectedItem="{Binding SelectedTile}" DisplayMemberPath="Name">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid
                    Rows="3"
                    Columns="3" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>
</Window>

窗口的代码隐藏最少

public MainWindow()
{
    InitializeComponent();
    DataContext = new ViewModel();
}

我们的 tile 由

表示

public class Tile : Notifier
{
    private string _name = "Click me";

    public string Name
    {
        get
        {
            return _name;
        }
        set { _name = value; Notify(); }
    }
}

我们的视图模型使用 SelectedItem 绑定来知道何时单击了图块，并做出适当的响应

public class ViewModel : Notifier
{
    private Tile _tile;
    public ObservableCollection<Tile> Tiles { get; } = new ObservableCollection<Tile> {
        new Tile(), new Tile(), new Tile(), 
        new Tile(), new Tile(), new Tile(), 
        new Tile(), new Tile(), new Tile()
    };
    public Tile SelectedTile
    {
        get
        {
            return _tile;
        }
        set
        {
            _tile = value;
            Notify();
            UpdateName(value);
        }
    }

    private void UpdateName(Tile value)
    {
        if(value.Name == "Click me")
            value.Name = "Woot!";
        else
            value.Name = "Click me";
    }
}

基础只是从上述类中删除了 INPC impl 以方便阅读

public class Notifier : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void Notify([CallerMemberName] string name = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
}