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

Answer 1

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.

Answer 2

Hi,

We can use PathListBox, follow this tutorial please:

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

Answer 3

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.

Answer 4

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!

Answer 5

Hi,

We can use ElementBinding.

http://vbcity.com/blogs/canoz/archive/2010/05/19/beginning-silverlight-element-binding.aspx

Answer 6

Neat, I'll familiarize myself with this and get right back to ye!

Answer 7

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?

Answer 8

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

Answer 9

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.

Answer 10

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.

 

Answer 11

I'm having trouble with the event handler.

Answer 12

//What is the event handler to attach the increment / decrement to the PathListBoxScrollBehavior?

Something like

incrementSlider.Value += 0.1;

Answer 13

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.

Answer 14

Hi, Jerry.

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

Answer 15

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?

Answer 16

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?

Answer 17

I've almost got a solution in place. I'll post my results within the next three days. :)

Answer 18

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.