在WPF中，为什么MouseLeave会触发而不是MouseDown？

Question

这是我的代码：

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

它会生成这些按钮：

当鼠标进入按钮时，它按预期工作，边框改变颜色：

问题是，当鼠标按下按钮时，边框不会从蓝色变为黑色，正如我在MouseDown事件触发器中尝试的那样，而是消失，这是{ {1}}事件触发器。

如何解决？感谢。

Answer 1

我无法找到潜在的问题。如果我没有错，MouseDown事件会因Button事件而被Click事件吞没。无论如何，我希望以下代码可以帮助您克服这个问题。

<强>更新

以下是更新后的代码，即使在MouseLeave被触发后也会保留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>

以下代码也有效，除了点击按钮后当我们离开按钮时鼠标输入后，它仍为黑色。

<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

我检查了你的代码，

发生MouseLeave事件，只需更改颜色＃570000FF