如何在MVVM中制作MouseOver事件？

Posted 2021-05-06

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

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模式和使用棱镜？

答案

您可以使用互动

声明命名空间

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>

另一答案

我个人更喜欢使用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();
}

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

另一答案

首先，您要为控件设置样式，例如按钮，如问题所示：

    <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文件时，右键单击它，然后在菜单中转到“编辑样式”。然后我去“编辑复制”，它给了我所需要的一切。您可以直接在资源字典中编辑样式。