none
[Q] What's the best way to use a slider to control a list of images?

    Question

  • Hello,

    I'm working on a gallery and I'd like to use a slider to control the navigation of a curved list of images. The slider will default to the center and when the user scrubs right or left the list is moved left or right. How do I bind the slider to the list? I'm unsure of how to create this behavior. Also, how do I create a list that wraps in a semi-circle? I't almost like a carousel, but in 2D. I'd also like to move the list on mouse in with hot spots on the left and right of the screen. Thanks for the help!

    Saturday, April 09, 2011 6:22 PM

Answers

All replies

  • Okay, So far my idea is to take a simple gauge control and manipulate it's appearance to my needs. Where gauge controls generally only have one needle, I'm going to repeat the needle - and rather than use a needle it will be images. Also I'll need to invert the gauge so that essentially it's upside-down in relation to the slider control which will remain relatively unchanged. This may be challenging, or it may be easy. I'll post my progress.

    Monday, April 11, 2011 12:43 PM
  • Hi,

    We can use PathListBox, follow this tutorial please:

    http://www.microsoft.com/design/toolbox/tutorials/pathlistbox/carousel.aspx

    Tuesday, April 12, 2011 11:14 PM
  • Awesome, I'll try that. I was wrapping a radial listbox and using the slider to control the rotation, but your idea may be a more elegant approach! I'll experiment right now.

    Wednesday, April 13, 2011 10:13 PM
  • Hi, Jerry. Thanks for the help. So far it's working great. Only one problem left... How do I replace the increment and decrement buttons with a slider control within Blend? I'd rather not use the buttons. So close!

    Thursday, April 14, 2011 1:09 AM
  • Neat, I'll familiarize myself with this and get right back to ye!

    Thursday, April 14, 2011 11:59 AM
  • Okay, I've bound the slider to the list increment / decrement commands via DataTrigger with values of 0 and 1. The slider has a default value of .5, this navigates the index at a rate of one list item.

    The behavior I desire is that the slider thumb returns to the center on mouseLeftButtonUp, also I'd like that when the user holds the thumb to the left or right that the list keeps incrementing / decrementing. How do I add this to the slider?

    Thursday, April 14, 2011 6:51 PM
  • Alright, I've added a few events to the slider that return the thumb to the center, but I still need to add a DoubleAnimation to the slider thumb in code, all references for this seem to be out of date so I'll need to dig. All that's left is the increment / decrement logic. How do I do this? The idea is that if the user holds the thumb to the left or right, the list continues to animate through the index. Soooooo Close!!!

    Thursday, April 14, 2011 7:52 PM
  • The idea is that if the user holds the thumb to the left or right, the list continues to animate through the index

    You can use DispatchTimer to call a method every certain seconds.

    http://msdn.microsoft.com/en-us/library/system.windows.threading.dispatchertimer(VS.95).aspx

    You need to handler MouseLeftButtonDown and MouseLeftButtonUP method to control the dispatchTimer start and stop.

    Friday, April 15, 2011 1:47 AM
  • Yep, I thought that was what I needed to do. I've already got the MouseLeftButtonUp event, wherein we also check to see if the MouseLeftButton is down ;)

    Already have the timer, but it's being ignored thusfar. Need to find the secret sauce!

    I'll mess around some more, but right now the timer is still triggered.

     

    Friday, April 15, 2011 11:58 AM
  • I'm having trouble with the event handler.

    Friday, April 15, 2011 12:44 PM
  • //What is the event handler to attach the increment / decrement to the PathListBoxScrollBehavior?

    Something like

    incrementSlider.Value += 0.1;

    Sunday, April 17, 2011 9:41 PM
  • Regarding: incrementSlider.Value += 0.1;

    This is close to what I need, but I'd like to raise an event trigger based on whether the user has scrubbed to the maximum or minimum values of the slider. In this case the maximum is 1 and the minimum is 0. The slider thumb rests at 0.5.

    So, if the user mouses down on the thumb of the slider and drags it all the way to the right or left and holds - I'd like the gallery to keep incrementing through the list. I've already bound the increment / decrement commands to the slider, but it only increments / decrements one list item at a time, even if the thumb is held in place. I think the user would expect that the list keep moving.

    Also, while incrementing / decrementing, how do I also cause the selection to change? I tried to bind both to the slider in Blend, but no worky. I'd like the selected item to change.

    Monday, April 18, 2011 12:08 PM
  • Hi, Jerry.

    How do I bind multiple data templates to PathListBox? I'd like to display different content in my list.

    Wednesday, April 27, 2011 12:09 PM
  • Ah! Multiple item templates via a style property! Figured it out.

    But...

    Back to the title of the post.

    How do I control the scroller of a ListBox with the maximum and minimum values of the slider control?

    Wednesday, April 27, 2011 2:02 PM
  • So I've ditched the idea of a slider for now and mover to a scroller styled to look like a slider. :)

    I've bound the StartItemIndex to the Value of the ScrollBar and the Maximum value of the ScrollBar to the Items.Count of the PathListBox. It seems like the right thing to do here.

    Now all I need to do is implement smooth scrolling. If it's not one thing it's the other, eh?

    Jerry, do you know how to smoothly scroll the PathListBox using a ScrollBar? Right now it's raw and no easing is in place. Implementing a FluidMoveBehavior doesn't seem to work with PathListBox. Am I missing something?

    Friday, April 29, 2011 6:48 PM
  • I've almost got a solution in place. I'll post my results within the next three days. :)

    Monday, May 02, 2011 2:45 PM
  • Surfing the web, I found this blog by James Bore:

    http://coffeefueled.org/

    He explains pretty much everything about how to scroll the PathListBox. Amazing.

    He and I corresponded and swapped sample projects and a great solution for my scenario resulted.

    Never in a million years did I think scrolling a list would be such a pain. If you need some pointers, please visit James' blog or you may ping me with any questions about this tricky bugger.

    Tuesday, May 03, 2011 1:51 PM