I have a slider with two thumbs, call them High and Low.
[----------L----------H-------]
The High thumb can never be slid to the left of the Low thumb, and the Low thumb can never be slid to the right of the High thumb. However, the two thumbs CAN have the same value, so you can drag the High thumb on top of the Low thumb, or vice versa; their thumbs will overlap.
[----------#-----------------]
I would like the behavior where, if the thumbs are overlapping, clicking the thumb and moving the mouse left will cause the Low thumb to move, while clicking the thumb and moving the mouse right will cause the High thumb to move. The other thumb would remaing at the same position.
[--------#>>>H--------------] or [--------L<<<#------------]
Currently, when the user clicks on the pair of thumb , only the topmost thumb gets activated (in my particular case, the Low thumb). To move the High thumb, the user has to move the Low thumb out of the way, then drag the High thumb.
Is there a way to determine whether the thumbs are stacked on top of the mouse click, and then activate/drag one or the other based on how the mouse is moved?
Hello Ed,
Thank you for your post.
Currently, if you slide a thumb over another thumb and then try to slide one of them, the one that will slide will always be the one that was "moved over" the other one, as that one will be on top of the other one. I am unsure how you would pass the currently dragging slider based on a mouse move, so to achieve your requirement, I would recommend that you implement a third, initially hidden thumb.
This third thumb will only become visible when the other two thumbs' values are equal. I would recommend handling the DragCompleted event on each of these thumbs for the following, and you will also want to handle the ValueChanged event on the initially hidden thumb as well. In the DragCompleted event for the two initially visible thumbs, I would recommend checking the value of the one that was just dragged (the sender of the event), and the other initially visible thumb. If they are equal, hide them and make the invisible thumb visible at the value of the two, now hidden thumbs. You will also want to make the initially visible thumbs have an interaction mode of SliderThumbInteractionMode.Free at this point, or the third thumb will not be able to move.
On the third thumb's ValueChanged event, I would recommend setting the other two thumbs to be visible again, since they will appear as one thumb because they are on the same value point. In the DragCompleted event for the third thumb, you will want to check the value of the third thumb to see if it is higher or lower than the value of the other two, initially visible thumbs. If it is higher, move the high thumb to that value and hide the third thumb. Vice versa for if it is lower. Then, set the InteractionModes of the thumbs back to SliderThumbInteractionMode.Lock so they can't move past each other again.
I have attached a sample application to demonstrate the above.
Please let me know if you have any other questions or concerns on this matter.
Sincerely,AndrewAssociate DeveloperInfragistics Inc.www.infragistics.com/support
Just checking in, did you have any other questions or concerns on this matter?
Hello, Andrew. Thanks for your help on the question. I found that I could programatically switch the active thumb by doing something like this:
thumb.RaiseEvent(new MouseButtonEventArgs(Mouse.PrimaryDevice, e.Timestamp, MouseButton.Left) { RoutedEvent = UIElement.MouseLeftButtonUpEvent, Source = thumb });otherThumb.RaiseEvent(new MouseButtonEventArgs(Mouse.PrimaryDevice, e.Timestamp, MouseButton.Left) { RoutedEvent = UIElement.MouseLeftButtonDownEvent, Source = otherThumb });
So I can wait for the PreviewMouseMove event on each thumb, and when two thumbs are on top of each other, I can figure out which direction the mouse is moving, and choose which thumb I want to move.
Thanks, Ed
I am glad you were able to find a resolution to this issue.