In WPF, why MouseLeave triggers instead of MouseDown?
<p>Here is my code:</p>

<pre><code>&lt;StackPanel&gt;
    &lt;StackPanel.Resources&gt;
        &lt;Style x:Key="stlNavButtonBorder" TargetType="Border"&gt;
            &lt;Setter Property="BorderBrush" Value="#570000FF" /&gt;
            &lt;Setter Property="BorderThickness" Value="5" /&gt;
            &lt;Setter Property="Height" Value="100" /&gt;
            &lt;Setter Property="Width" Value="200" /&gt;
            &lt;Setter Property="Margin" Value="10" /&gt;

            &lt;Style.Triggers&gt;
                &lt;EventTrigger RoutedEvent="MouseEnter"&gt;
                    &lt;BeginStoryboard&gt;
                        &lt;Storyboard&gt;
                            &lt;ColorAnimation
                                Storyboard.TargetProperty="BorderBrush.Color"
                                To="blue"
                                Duration="0:0:0.25"/&gt;
                        &lt;/Storyboard&gt;
                    &lt;/BeginStoryboard&gt;
                &lt;/EventTrigger&gt;
                &lt;EventTrigger RoutedEvent="MouseLeave"&gt;
                    &lt;BeginStoryboard&gt;
                        &lt;Storyboard&gt;
                            &lt;ColorAnimation
                                Storyboard.TargetProperty="BorderBrush.Color"
                                To="#570000FF"
                                Duration="0:0:0.25" /&gt;
                        &lt;/Storyboard&gt;
                    &lt;/BeginStoryboard&gt;
                &lt;/EventTrigger&gt;
                &lt;EventTrigger RoutedEvent="MouseDown"&gt;
                    &lt;BeginStoryboard&gt;
                        &lt;Storyboard&gt;
                            &lt;ColorAnimation
                                Storyboard.TargetProperty="BorderBrush.Color"
                                To="Black"
                                Duration="0:0:0.25" /&gt;
                        &lt;/Storyboard&gt;
                    &lt;/BeginStoryboard&gt;
                &lt;/EventTrigger&gt;
            &lt;/Style.Triggers&gt;
        &lt;/Style&gt;
        &lt;Style x:Key="stlNavButtonRectangle" TargetType="Rectangle"&gt;
            &lt;Setter Property="Fill" Value="#570000FF"/&gt;
        &lt;/Style&gt;

        &lt;Style TargetType="Button"&gt;
            &lt;Setter Property="Template"&gt;
                &lt;Setter.Value&gt;
                    &lt;ControlTemplate TargetType="Button"&gt;
                        &lt;Border Style="{StaticResource stlNavButtonBorder}"&gt;
                            &lt;Grid&gt;
                                &lt;Rectangle Style="{StaticResource stlNavButtonRectangle}"/&gt;
                                &lt;ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/&gt;
                            &lt;/Grid&gt;
                        &lt;/Border&gt;
                    &lt;/ControlTemplate&gt;
                &lt;/Setter.Value&gt;
            &lt;/Setter&gt;
        &lt;/Style&gt;
    &lt;/StackPanel.Resources&gt;

    &lt;Button Content="Button 1" /&gt;
    &lt;Button Content="Button 2"/&gt;
    &lt;Button Content="Button 3" /&gt;
&lt;/StackPanel&gt;
</code></pre>

<p>It generates those buttons:</p>

<p><a href="https://i.stack.imgur.com/qPZzV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qPZzV.png" alt="enter image description here"></a></p>

<p>When the mouse enters the button, it works as expected, and the border changes color:
<a href="https://i.stack.imgur.com/pNtb4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pNtb4.png" alt="Blue border added to the picture when the mouse enters"></a></p>

<p>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 <code>MouseDown</code> event trigger, but instead, disappears, which is the <code>MouseLeave</code> event trigger.</p>

<p>How to fix it? Thanks.</p>