MouseDown/Up events not working properly in WPF

Question

I have a custom control based on ToggleButton. In its constructor, I create a few elements of type FrameworkElementFactory and to one of them I assign an EventHandler like this:

button.AddHandler(Ellipse.MouseDownEvent, new MouseButtonEventHandler(Toggle));

And here's my event handler:

private void Toggle(object sender, EventArgs e)
{
    var active = GetTemplateChild("Active");
    var button = GetTemplateChild("ToggleButton");
    Storyboard sb = new Storyboard();

    var ta = new ThicknessAnimation();
    Storyboard.SetTargetProperty(ta, new PropertyPath("Margin"));
    Storyboard.SetTarget(ta, button);
    ta.Duration = TimeSpan.FromSeconds(0.2);


    var da = new DoubleAnimation();
    Storyboard.SetTargetProperty(da, new PropertyPath("Width"));
    Storyboard.SetTarget(da, active);
    da.Duration = TimeSpan.FromSeconds(0.2);

    if ((bool)IsChecked)
    {
        ta.To = new Thickness(0);
        da.To = (double)button.GetValue(Ellipse.WidthProperty);
        IsChecked = !IsChecked;
    }
    else
    {
        ta.To = new Thickness(this.Width - (double)button.GetValue(Ellipse.WidthProperty), 0, 0, 0);
        da.To = this.Width;
        IsChecked = !IsChecked;
    }

    sb.Children.Add(ta);
    sb.Children.Add(da);
    sb.Begin();
}

But it doesn't work. Doesn't work in the sense that it works only once. I mean it is supposed to set a slider's width based on the IsChecked property. Initially, it is set to false. When I click it, it expands to the right as expected. But when I click again, it does not move left as expected.

The more surprising thing is that it works perfectly with the MouseEnter event. All other events like MouseDown/Up/LeftMouseButtonUp/PreviewMouseDown..... are not working either.

If you want to reproduce the problem without much editing use the code here. Then just use it in a WPF app and you'll see.

Any help much appreciated.

Edit: Another discovery: It works with Right Clicks and Middle Button Clicks but not with Left Clicks. Wonder why...?? My mouse works fine.

Edit#2: Converters

Out of curiosity, why aren't you using the storyboard and triggers in Xaml? — Ron Beyer, Nov 13 '15 at 13:23
Can't use binding with storyboard...some freezable issue. More info [here](http://stackoverflow.com/questions/2186933/wpf-animation-binding-to-the-to-attribute-of-storyboard-animation) — Fᴀʀʜᴀɴ Aɴᴀᴍ, Nov 13 '15 at 13:23
@user1 It is an `Ellipse`, not a `Button`. I'm sorry I didn't mention it. — Fᴀʀʜᴀɴ Aɴᴀᴍ, Nov 13 '15 at 13:31
Good point... your example is set up for mouse enter is that a typo? — JKennedy, Nov 13 '15 at 13:31
you might want to check if it performs a hit test http://stackoverflow.com/questions/2001930/hit-testing-in-wpf — fuchs777, Nov 13 '15 at 13:34
Any reason you aren't binding the `IsChecked` property to a local control DependencyProperty and simply reacting to the PropertyChangedCallback? Might be a lot simpler... Also, make sure nothing else is stealing your mouse focus! — Berin Loritsch, Nov 13 '15 at 13:39
I understand that this code can be made better and optimized. But if any of those were the case not even the Right Click would have worked, would it? — Fᴀʀʜᴀɴ Aɴᴀᴍ, Nov 13 '15 at 13:41
Why not use something like this http://marcangers.com/animated-switch-togglebutton-style-in-wpf/ ? — Janne Matikainen, Nov 13 '15 at 13:44
Did you try button.AddHandler(Ellipse.MouseDownEvent, new MouseButtonEventHandler(Toggle), true); ? — galakt, Nov 13 '15 at 14:31

score 6 · Answer 1 · edited Aug 28 '20 at 22:57

6

MouseDown and MouseUp events are fired by UserControl. You should use the events: PreviewMouseDown and PreviewMouseUp.

Further, you may use MouseEnter and MouseLeave events in order to address the visual feedback when the mouse is located over your object.

edited Aug 28 '20 at 22:57

AustinWBryan

3,249
3
24
42

answered Jul 15 '16 at 10:01

benoch

59
1
1

score 4 · Accepted Answer · answered Nov 13 '15 at 13:47

4

Having implemented a couple custom controls I've found some interesting behavior dealing with mouse events in particular. Basically, you may be running into a case where another control, possibly even in your ControlTemplate is stealing the mouse focus and consuming the mouse event before you get it.

There are two solutions to the problem:

Use MousePreviewEvents, and be careful not to mark the event consumed
Bind to the actual property that you are wanting to see changed

In this particular case I would have an InternalIsCheckedProperty that you bind to the ToggleButton.IsCheckedProperty to invoke your storyboard.

answered Nov 13 '15 at 13:47

Berin Loritsch

11,400
4
30
57

After seeing your answer, I tried to see if the Event fired at all by using a MessageBox after the storyboard. Quite surprisingly, after I clicked OK, it worked perfectly every time even with the Left Click. – Fᴀʀʜᴀɴ Aɴᴀᴍ Nov 13 '15 at 14:01
I ended up using the second option. – Fᴀʀʜᴀɴ Aɴᴀᴍ Nov 13 '15 at 14:56

MouseDown/Up events not working properly in WPF

2 Answers2