In WPF, why does MouseLeave run instead of MouseDown?

Question

Here is my code:

<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> 

It generates these buttons:

When the mouse enters the button, it works as expected, and the border changes color:

The problem is that when the mouse pointer falls over the button, the border does not change from blue to black, as I tried to do in the MouseDown event MouseDown , but instead disappears, which means MouseLeave event trigger.

How to fix it? Thanks.

Answer 1

I could not find the main problem. If I'm not mistaken, the MouseDown event MouseDown swallowed by the Button event for Click . In any case, I hope the following code helps you overcome this problem.

Update:

Here is the updated code that will contain the MouseLeave trigger even after IsPressed .

 <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> 

The following code also works, except when after clicking the button After entering the mouse, 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> 

Answer 2

I checked your code,

MouseLeave event occurs, just change the color # 570000FF