如何在 MVVM 中制作 MouseOver 事件？

Question

我使用以下代码在单击按钮时导航：

XAML:

<Button x:Name ="Btn_Import" Grid.Row="33" Grid.Column="15" Grid.ColumnSpan="36" Grid.RowSpan="36" Command="{Binding NavigateCommand}"  CommandParameter="ViewImportProgress"/>

视图模型：

public DelegateCommand<string> NavigateCommand { get; set; }

public MainButtonsViewModel(IRegionManager regionManager, IMainMenuTooltipViewer mainMenuTooltipViewer)
        {
            NavigateCommand = new DelegateCommand<string>(Navigate); 
        }

 private void Navigate(string uri)
        {
            regionManager.RequestNavigate("ScreenNavigationRegion", uri); 


        }

而且效果很好。现在我的问题是什么是使导航在 MouseOver 事件而不是 MouseClick 事件上工作的等效代码，当然是在 MVVM 模式中并使用 Prism？

Answer 1

您可以使用互动

声明命名空间

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

你可以将命令绑定到事件

<Button Content="Navigate" >

    <i:Interaction.Triggers>

        <i:EventTrigger EventName="MouseEnter">

            <i:InvokeCommandAction Command="{Binding NavigateCommand}"   CommandParameter="ViewImportProgress"/>

        </i:EventTrigger>

    </i:Interaction.Triggers>

</Button>

Answer 2

我个人更喜欢使用 EventToCommand 因为 PassEventArgsToCommand 属性:

xmlns:cmd ="http://www.galasoft.ch/mvvmlight"

<i:Interaction.Triggers>
    <i:EventTrigger EventName="KeyDown">
        <cmd:EventToCommand Command="{Binding KeyDownCommand}" PassEventArgsToCommand="True" />
    </i:EventTrigger>
</i:Interaction.Triggers>

然后你可以这样使用：

public ICommand KeyDownCommand { get { return new RelayCommand<KeyEventArgs>(OnKeyDown); } }
private void OnKeyDown(KeyEventArgs args)
{
    if (args.Key == Key.Insert)
        InsertSomething();
}

在实践中，鼠标消息并不那么重要，因为我通常用代理替换参数，除其他外，它还允许我的视图模型引发 capture/release 事件等。虽然它很方便对于需要获取参数的击键或关闭事件等，使用代理只是添加了另一个不必要的抽象层。

Answer 3

首先，你想为你的控件设置样式，比如一个按钮，如问题：

    <Style x:Key="MyButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="{StaticResource SomeBrush}"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Template" Value="{DynamicResource MyButtonTemplate}"/>
</Style>
<ControlTemplate x:Key="MyButtonTemplate" TargetType="{x:Type ButtonBase}">
    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="Button.IsDefaulted" Value="True">
            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" TargetName="border" Value="{Binding IsMouseOverMenuButton, Converter={StaticResource BoolToBrushConverter}}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="#FF3C7FB1"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

接下来，在您的 VM 中设置属性：

public bool IsMouseOverMenuButton
    {
        get => _isMouseOverMenuButton;
        set
        {
            if (_isMouseOverMenuButton != value)
            {
                _isMouseOverMenuButton = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("IsMouseOverMenuButton"));
            }
        }
    }

并且不要忘记转换器。

顺便说一句，如果你想要一个简单的技巧，当你控制 XAML 文件时，右键单击它，然后在菜单中转到 'Edit Style' 。然后我去 'Edit Copy' 它给了我我需要的一切。您可以直接在资源词典中编辑样式。

如何在 MVVM 中制作 MouseOver 事件？

How to make MouseOver event in MVVM?

wpf

prism

mvvm