Saturday, April 09, 2011 6:22 PM
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!
Monday, April 11, 2011 12:43 PM
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.
Tuesday, April 12, 2011 11:14 PM
We can use PathListBox, follow this tutorial please:
Wednesday, April 13, 2011 10:13 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.
Thursday, April 14, 2011 1:09 AM
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:11 AM
We can use ElementBinding.
Thursday, April 14, 2011 11:59 AM
Neat, I'll familiarize myself with this and get right back to ye!
Thursday, April 14, 2011 6:51 PM
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 7:52 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!!!
Friday, April 15, 2011 1:47 AM
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.
You need to handler MouseLeftButtonDown and MouseLeftButtonUP method to control the dispatchTimer start and stop.
Friday, April 15, 2011 11:58 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 12:44 PM
I'm having trouble with the event handler.
Sunday, April 17, 2011 9:41 PM
//What is the event handler to attach the increment / decrement to the PathListBoxScrollBehavior?
incrementSlider.Value += 0.1;
Monday, April 18, 2011 12:08 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.
Wednesday, April 27, 2011 12:09 PM
How do I bind multiple data templates to PathListBox? I'd like to display different content in my list.
Wednesday, April 27, 2011 2:02 PM
Ah! Multiple item templates via a style property! Figured it out.
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?
Friday, April 29, 2011 6:48 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?
Monday, May 02, 2011 2:45 PM
I've almost got a solution in place. I'll post my results within the next three days. :)
Tuesday, May 03, 2011 1:51 PM
Surfing the web, I found this blog by James Bore:
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.