In WPF, why MouseLeave triggers instead of MouseDown?

Question

Here is my code:

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

It generates those buttons:

When the mouse enters the button, it works as expected, and the border changes color:

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

How to fix it? Thanks.

See this - 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, Apr 08 '16 at 09:29
If you inspect the default control templates, you'll see that some use visual state groups (transition animations), while others use triggers on properties such as `IsMouseOver`, `IsEnabled` and `IsPressed`. You'll likely have more success with one of those approaches. — Pieter Witvoet, Apr 08 '16 at 09:43
@PieterWitvoet - could you please elaborate? I am pretty new to WPF, and I would be grateful. Thanks a lot! — Michael Haddad, Apr 08 '16 at 09:45
You can find example control templates on MSDN. Here's a button control template for .Net framework 4: https://msdn.microsoft.com/en-us/library/ms753328%28v=vs.100%29.aspx - you can also select a different framework version there (the older examples show a few more properties). — Pieter Witvoet, Apr 08 '16 at 10:33
@Gopichandar - I am not currently at work so I cannot test it. I will test it and tell you if it worked for me. Thanks A LOT! — Michael Haddad, Apr 08 '16 at 14:56
@Sipo As a general resource that might help you, look at this: http://stackoverflow.com/questions/2982168/button-mousedown — philkark, Jul 06 '16 at 05:42

Gopichandar · Accepted Answer · 2016-07-06T05:29:24.683

I could not able to find the underlying issue. If I am not wrong, the MouseDown event is swallowed by the Button for Click event. Anyway, I hope the following code will help you to overcome the issue.

Update:

Here is the updated code that will keep the MouseLeave trigger even after the IsPressed is triggered.

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

Following code also works except the case that after clicking the button, After Mouse Enter when we leave the button, it remains black.

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

Thanks a lot. I have tried your code, and now when the button is clicked, the border indeed changes to black, but it stays black even when the mouse leaves... Thank you very much for your help! — Michael Haddad, Apr 08 '16 at 09:54
Yes, and in my original code, it works, but does not go black when clicks. I have tried you updated code, and it works, except after clicking the button, when I leave it, it remains black. Thank's a lot! — Michael Haddad, Apr 08 '16 at 09:58
i see your answer. if you use another `Trigger.ExitActions` for `IsPressed` to change back the color it works. but after that `IsMouseOver` does not work which is strange. @Sipo — M.kazem Akhgary, Apr 08 '16 at 11:05

score -2 · Answer 2 · answered Apr 08 '16 at 09:30

-2

I checked your code,

The MouseLeave Event is happening ,just change the Color #570000FF

answered Apr 08 '16 at 09:30

SiddarthVarunesh

1
4

1

When the mouse leaves, I do want the color to be `#570000f`, but when the mouse is down, I want it to be black. So I do not want to change the color in the `MouseLeave` event. – Michael Haddad Apr 08 '16 at 09:34
Hi, you have given the fill color () and on mouse leave you have given the same color, then how you can see the differences – SiddarthVarunesh Apr 08 '16 at 09:36
1

First, the color is `#570000f`, then when the mouse enters it changes to blue, and then when it leaves, it returns to `#570000f`... – Michael Haddad Apr 08 '16 at 09:40
in the Style "stlNavButtonRectangle" you have mentioned the same Fill Color value and Border Color Value,that's the issue here, – SiddarthVarunesh Apr 08 '16 at 09:44
– SiddarthVarunesh Apr 08 '16 at 09:50
My friend, I do not think so. The first thing the user sees is a rectangle with a light blue color. To achieve that effect, the border is intentionally the same color, so it looks like there is no border. When he put the mouse inside the rectangle, the border changes color to blue, and then when the mouse leaves, it returns back to the original color, so you cannot see it. That is good, and that is what I have tried to do. The problem is that when I click the button, the animation that is fired is not the one I have set in the `MouseDown` event, but the one inside the `MouseLeave` event. – Michael Haddad Apr 08 '16 at 09:52
I have tried your code, but it is not what I want. When using your code the border is becoming black when the mouse leaves the button, but I want it to return to the original color. Only be black when the user clicks... Thank a lot! – Michael Haddad Apr 08 '16 at 09:56
I see that if you remove the MouseLeave event trigger, then the border does go black when you click on the button. It seems the MouseLeave event some how takes priority over the MouseDown event - but I see no eveidence of the MouseLeave event triggering (there is code here that allows you to monitor routed events http://stackoverflow.com/questions/1124348/is-there-a-way-to-watch-wpf-routed-events). I know that is of no help - but I may give you further avenues to pursue. – PaulF Apr 08 '16 at 10:09

In WPF, why MouseLeave triggers instead of MouseDown?

2 Answers2

Related