在 WPF 中,为什么触发 MouseLeave 而不是 MouseDown? [英] In WPF, why MouseLeave triggers instead of MouseDown?
问题描述
这是我的代码:
<StackPanel>
<StackPanel.Resources>
<Style x:Key="stlNavButtonBorder" TargetType="Border">
<Setter Property="BorderBrush" Value="#570000FF" />
<Setter Property="BorderThickness" Value="5" />
<Setter Property="Height" Value="100" />
<Setter Property="Width" Value="200" />
<Setter Property="Margin" Value="10" />
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="BorderBrush.Color"
To="blue"
Duration="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="BorderBrush.Color"
To="#570000FF"
Duration="0:0:0.25" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseDown">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="BorderBrush.Color"
To="Black"
Duration="0:0:0.25" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
<Style x:Key="stlNavButtonRectangle" TargetType="Rectangle">
<Setter Property="Fill" Value="#570000FF"/>
</Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Style="{StaticResource stlNavButtonBorder}">
<Grid>
<Rectangle Style="{StaticResource stlNavButtonRectangle}"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Button Content="Button 1" />
<Button Content="Button 2"/>
<Button Content="Button 3" />
</StackPanel>
它生成这些按钮:
鼠标进入按钮时,按预期工作,边框变色:
When the mouse enters the button, it works as expected, and the border changes color:
问题是当鼠标在按钮上按下时,边框不会像我在 MouseDown
事件触发器中尝试做的那样从蓝色变为黑色,而是消失了,这是 MouseLeave
事件触发器.
The problem is that when the mouse is down on the button, the border does not changes from blue to black, as I tried to do in the MouseDown
event trigger, but instead, disappears, which is the MouseLeave
event trigger.
如何解决?谢谢.
推荐答案
我无法找到根本问题.如果我没猜错的话,MouseDown
事件被 Button
吞下,用于 Click
事件.不管怎样,我希望下面的代码能帮助你解决这个问题.
I could not able to find the underlying issue. If I am not wrong, the MouseDown
event is swallowed by the Button
for Click
event. Anyway, I hope the following code will help you to overcome the issue.
更新:
这是更新后的代码,即使在 IsPressed
被触发后,它也会保持 MouseLeave
触发器.
Here is the updated code that will keep the MouseLeave
trigger even after the IsPressed
is triggered.
<StackPanel>
<StackPanel.Resources>
<Style x:Key="stlNavButtonBorder" TargetType="Border">
<Setter Property="BorderBrush" Value="#570000FF" />
<Setter Property="BorderThickness" Value="5" />
<Setter Property="Height" Value="100" />
<Setter Property="Width" Value="200" />
<Setter Property="Margin" Value="10" />
</Style>
<Style x:Key="stlNavButtonRectangle" TargetType="Rectangle">
<Setter Property="Fill" Value="#570000FF"/>
</Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Style="{StaticResource stlNavButtonBorder}" x:Name="border">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(BorderBrush).(SolidColorBrush.Color)"
To="Black"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(BorderBrush).(SolidColorBrush.Color)"
To="Blue"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Rectangle Style="{StaticResource stlNavButtonRectangle}"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Button Content="Button 1" />
<Button Content="Button 2"/>
<Button Content="Button 3" />
</StackPanel>
以下代码也有效,除了点击按钮后,当我们离开按钮时,鼠标进入后,它仍然是黑色的.
Following code also works except the case that after clicking the button, After Mouse Enter when we leave the button, it remains black.
<StackPanel>
<StackPanel.Resources>
<Style x:Key="stlNavButtonBorder" TargetType="Border">
<Setter Property="BorderBrush" Value="#570000FF" />
<Setter Property="BorderThickness" Value="5" />
<Setter Property="Height" Value="100" />
<Setter Property="Width" Value="200" />
<Setter Property="Margin" Value="10" />
</Style>
<Style x:Key="stlNavButtonRectangle" TargetType="Rectangle">
<Setter Property="Fill" Value="#570000FF"/>
</Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Style="{StaticResource stlNavButtonBorder}" x:Name="border">
<Grid>
<Rectangle Style="{StaticResource stlNavButtonRectangle}"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="BorderBrush.Color"
To="Blue"
Duration="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="BorderBrush.Color"
To="#570000FF"
Duration="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="BorderBrush.Color"
To="Black"
Duration="0:0:0.25" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Button Content="Button 1" />
<Button Content="Button 2"/>
<Button Content="Button 3" />
</StackPanel>
这篇关于在 WPF 中,为什么触发 MouseLeave 而不是 MouseDown?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!