Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
990
Scrolling on drag?
posted

Is there a cool way to make the carousel scroll it's content in response to mouse dragging on an item? So that you can use the control a bit like Cover Flow on an iPhone?? (if you're a patent lawyer, please look away!)

 John

  • 25
    posted

    I solved this same problem by using Microsoft's built-in inkpanel, which has mouse-gesture functionality built in. With the right configuration and surprisingly little code-behind (I think mine was about 10-12 lines) the drag technique you're talking about can easily be accomplished. Just be sure and place the inkpanel behind the carousel, so that it doesn't interfere with selection or clicks. As for contious scrolling as opposed to one at a time, previously, I had used a slider with transparent borders and backgrounds, and keyed the slider ticks to the number of items in the carousel- it works, but was more of a pain in the ass - with continuosly scrolling lists of smaller size it made it nearly impossible to get the item that I was looking for on the first try. Who knows, I was probably doing it wrong. I found the "one scroll-stop at a time" approach made my whole project feel a hell of a lot less confusing to users, and abandoned my previous approach.

  • 8576
    Offline posted in reply to John
    Hi John -
     
     
     
    BTW - I thought of another option for you to trigger carousel scrolling via mouse movement.  In the 7.2 release we have a MousePanningDecorator element that you can use to provide 'middle-button' mouse panning for any scrollable control.  Simply place the MousePanningDecorator element somewhere above (in the visual tree) the control you want to scroll.  The when the user clicks the middle mouse button over the control, the MousePanningDecorator takes care of displaying the mouse panning glyphs on the screen and automatically scrolling the control as the mouse is moved (as long as you have a ScrollViewer in the template of the control you want to scroll).
     
    This is definitely a different UI scenario than the one you are looking to implement (i.e., dragging an item to initiate the scroll) but I thought you might find it interesting (and it's painless to implement :-) )
     
    Joe Modica
  • 8576
    Offline posted
    Hi John -
     
    You can cause the Carousel to scroll by calling the various scrolling methods on the exposed ScrollInfo object.  For example:
     
    myCarousel.ScrollInfo.LineLeft();
     
    By calling the appropriate ScrollInfo method depending on the direction the user is dragging the item and how far they have dragged the item, you should be able to simulate the behavior you are looking for.
     
    Joe Modica