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

【问题标题】：In WPF, why MouseLeave triggers instead of MouseDown?在 WPF 中，为什么 MouseLeave 触发而不是 MouseDown？
【发布时间】：2016-04-08 08:56:50
【问题描述】：

这是我的代码：

<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事件触发器。

如何解决？谢谢。

【问题讨论】：

看到这个 - social.msdn.microsoft.com/Forums/vstudio/en-US/…
如果您检查默认控件模板，您会看到一些使用视觉状态组（过渡动画），而另一些使用诸如IsMouseOver、IsEnabled 和IsPressed 等属性的触发器.使用其中一种方法，您可能会取得更大的成功。
@PaulF - 我无法通过此链接找到解决方案...
@PieterWitvoet - 你能详细说明一下吗？我对 WPF 很陌生，我将不胜感激。非常感谢！
您可以在 MSDN 上找到示例控件模板。这是 .Net 框架 4 的按钮控件模板：msdn.microsoft.com/en-us/library/ms753328%28v=vs.100%29.aspx - 您也可以在那里选择不同的框架版本（旧示例显示更多属性）。

标签： c# wpf xaml

【解决方案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>

【讨论】：

非常感谢。我试过你的代码，现在当按钮被点击时，边框确实变成了黑色，但是即使鼠标离开它也保持黑色......非常感谢您的帮助！
@Sipo 你想在MouseLeave恢复默认？
是的，在我的原始代码中，它可以工作，但点击时不会变黑。我试过你更新的代码，它可以工作，除了单击按钮后，当我离开它时，它仍然是黑色的。非常感谢！
我看到了你的答案。如果您使用另一个Trigger.ExitActions 为IsPressed 改回它的工作颜色。但在那之后IsMouseOver 不起作用，这很奇怪。 @Sipo
@Sipo 我想我得到了你需要的东西。查看更新。谢谢

【解决方案2】：

我检查了你的代码，

MouseLeave 事件正在发生，只需更改颜色 #570000FF

【讨论】：

当鼠标离开时，我希望颜色是#570000f，但是当鼠标放下时，我希望它是黑色的。所以我不想改变MouseLeave事件的颜色。
您好，您已经给出了填充颜色（）并且在鼠标离开时您已经给出了相同的颜色，那么您如何看到差异
首先颜色为#570000f，然后鼠标进入时变为蓝色，离开时返回#570000f...
在样式“stlNavButtonRectangle”中您提到了相同的填充颜色值和边框颜色值，这就是这里的问题，