WPF: prevent mouseleave event from firing with previewmousedown - wpf

Question

I have a customized animated button with this style:
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ControlTemplate.Resources>
<Storyboard x:Key="MenuBtnMouseEnterSb">
<DoubleAnimation Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="btnScaleTransform"
To="0.92"
Duration="0:0:0.1">
<DoubleAnimation.EasingFunction>
<ExponentialEase Exponent="2" EasingMode="EaseInOut"></ExponentialEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="btnScaleTransform"
To="0.92"
Duration="0:0:0.1">
<DoubleAnimation.EasingFunction>
<ExponentialEase Exponent="2" EasingMode="EaseInOut"></ExponentialEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<Storyboard x:Key="MenuBtnMouseExitSb">
<DoubleAnimation Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="btnScaleTransform"
To="1"
Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<BounceEase Bounces="1" Bounciness="5"></BounceEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="btnScaleTransform"
To="1"
Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<BounceEase Bounces="1" Bounciness="5" EasingMode="EaseInOut">
</BounceEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<Storyboard x:Key="MenuBtnMouseClickSb" AutoReverse="True">
<DoubleAnimation Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="btnScaleTransform"
To="0.75"
Duration="0:0:0.2"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="btnScaleTransform"
To="0.75"
Duration="0:0:0.2"></DoubleAnimation>
</Storyboard>
</ControlTemplate.Resources>
<Border x:Name="border" BorderBrush="Transparent" CornerRadius="10" Background="{TemplateBinding Background}" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}" TextBlock.Foreground="{TemplateBinding Foreground}" Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}" RenderTransformOrigin="0.5, 0.5">
<ContentPresenter Margin="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" x:Name="btnScaleTransform"></ScaleTransform>
</TransformGroup>
</Border.RenderTransform>
<Border.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard Storyboard="{DynamicResource MenuBtnMouseEnterSb}" />
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<BeginStoryboard Storyboard="{DynamicResource MenuBtnMouseExitSb}" />
</EventTrigger>
<EventTrigger RoutedEvent="Button.PreviewMouseDown">
<BeginStoryboard Storyboard="{DynamicResource MenuBtnMouseClickSb}" />
</EventTrigger>
</Border.Triggers>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Basically, whenever mouse enters this button - button becomes smaller and when PreviewMouseDown event happens (when I press mouse button) it must become even more small. But what actually happens is that button returns to it's original size when I press a left button - i.e. MouseLeave event is fired and when I release left mouse button MouseEnter is fired again.
I added handlers for PreviewMouseDown and MouseLeave events and after PreviewMouseDown is handled - MouseLeave is handled immediately which I suppose is causing the MouseExit animation to run instead of MouseClick.
I've tested it again with Console.Writelines in each handler and it seems that MouseLeave handler is not called but animation still works as I described earlier.
I removed MouseLeave eventtrigger and now proper mousedown animation is running but it returns only to 0.92 scale (MouseEnter animation) and cannot return to original size when cursor is outside (that's what MouseLeave animation did).

Answer 1

The solution for my problem is simple: Use VisualStates instead of Triggers for such task.
I just copied my animations into VisualStates and they now work as I expected:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="btnScaleTransform"
To="1"
Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<BounceEase Bounces="1" Bounciness="5"></BounceEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="btnScaleTransform"
To="1"
Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<BounceEase Bounces="1" Bounciness="5" EasingMode="EaseInOut">
</BounceEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="btnScaleTransform"
To="0.92"
Duration="0:0:0.1">
<DoubleAnimation.EasingFunction>
<ExponentialEase Exponent="2" EasingMode="EaseInOut"></ExponentialEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="btnScaleTransform"
To="0.92"
Duration="0:0:0.1">
<DoubleAnimation.EasingFunction>
<ExponentialEase Exponent="2" EasingMode="EaseInOut"></ExponentialEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="btnScaleTransform"
To="0.75"
Duration="0:0:0.2">
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="btnScaleTransform"
To="0.75"
Duration="0:0:0.2">
</DoubleAnimation>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Although it is kind of weird how Trigger based animations work...