logo标签列表

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

c#wpfxaml
6

这是我的代码：

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

它生成这些按钮：

enter image description here

当鼠标进入按钮时，它按预期工作，并且边框的颜色会改变: 鼠标进入时图片添加了蓝色边框 问题在于当鼠标按下按钮时，边框不会从蓝色变为黑色，就像我在MouseDown事件触发器中尝试的那样，而是消失了，这是MouseLeave事件触发器。
如何解决？谢谢。
请参见此链接 - https://social.msdn.microsoft.com/Forums/vstudio/en-US/1069c828-bf5b-4777-a3ab-30e39369a83f/mousedown-event-also-triggers-mouseleave-and-mouseenter-events?forum=wpf - PaulF
如果您检查默认控件模板，您会发现有些使用视觉状态组（过渡动画），而其他一些则使用属性上的触发器，例如“IsMouseOver”，“IsEnabled”和“IsPressed”。您可能会在其中一种方法上取得更多成功。 - Pieter Witvoet
@PaulF - 我从这个链接中找不出解决方案... - Michael Haddad
@Sipo，请查看我的更新答案。希望对你有所帮助。谢谢。 - Gopichandar
@Gopichandar - 我现在不在工作岗位上，所以无法测试它。我会测试一下并告诉你是否对我有效。非常感谢！ - Michael Haddad
显示剩余3条评论
2个回答
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>
非常感谢。我已经尝试了您的代码，现在当按钮被点击时，边框确实会变成黑色，但即使鼠标离开后它仍然保持黑色...非常感谢您的帮助！ - Michael Haddad
@Sipo 你想在“MouseLeave”事件中返回默认值吗？ - Gopichandar
是的，在我的原始代码中，它可以工作，但是当单击时不会变黑。我尝试了您更新的代码，并且它可以工作，但是在单击按钮后离开它时，它仍然是黑色的。非常感谢！ - Michael Haddad
1
我看到了你的回答。如果你使用另一个Trigger.ExitActions来改变按下时的颜色，它是可以工作的。但之后IsMouseOver不起作用了，这很奇怪。@Sipo - M.kazem Akhgary
1
@Sipo 我想我明白你需要什么了。请查看更新。谢谢。 - Gopichandar
-2

我检查了你的代码，

鼠标离开事件正在发生，只需将颜色更改为 #570000FF

1
当鼠标离开时，我希望颜色为#570000f，但当鼠标按下时，我希望它变成黑色。因此，我不想在MouseLeave事件中更改颜色。 - Michael Haddad
嗨，你已经设置了填充颜色（<Setter Property="Fill" Value="#570000FF"/>），并在鼠标离开时也设置了相同的颜色，那么你如何看到区别呢？ - SiddarthVarunesh
1
首先，颜色是#570000f，然后当鼠标进入时它会变成蓝色，当鼠标离开时，它会恢复为#570000f... - Michael Haddad
<EventTrigger RoutedEvent="MouseLeave"> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="Black" Duration="0:0:0.25" /> </Storyboard> </BeginStoryboard> </EventTrigger> - SiddarthVarunesh
我的朋友，我不这么认为。用户看到的第一件事是一个浅蓝色的矩形。为了达到这种效果，边框故意与相同颜色，所以看起来没有边框。当他把鼠标放在矩形内时，边框会变成蓝色，然后当鼠标离开时，它会返回到原始颜色，所以你看不到它。这很好，也是我尝试做的。问题是当我点击按钮时，触发的动画不是我在“MouseDown”事件中设置的动画，而是在“MouseLeave”事件中设置的动画。 - Michael Haddad
显示剩余3条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接