c# - 在 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 事件触发器中尝试做的那样从蓝色变为黑色，而是消失了，这是 MouseLeave 事件触发器。

如何解决？谢谢。

Answer 1

我找不到潜在的问题。如果我没记错的话，MouseDown 事件会被 Button 的 Click 事件吞没。不管怎样，我希望下面的代码能帮助您解决这个问题。

更新:

这里是更新后的代码，即使在 IsPressed 被触发后，它也会保持 MouseLeave 触发。

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