Binding ScrollBar with CoverFlow control

I'm using the CoverFlow example code and I want to try to bind it to a horizontal scrollbar. What I want is when I move the scrollbar, the index selected will increase or decrease by 1. I've tried to bind it by:

private void ScrollBar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if (e.NewValue > e.OldValue)
            {
                coverFlow1.SelectedIndex = coverFlow1.SelectedIndex + 1;
                scrollBar.Value = (double)coverFlow1.SelectedIndex;

            }
            else if (e.NewValue < e.OldValue)
            {
                coverFlow1.SelectedIndex = coverFlow1.SelectedIndex - 1;
                scrollBar.Value = (double)coverFlow1.SelectedIndex;
            }

        }

It wasn't working the way I wanted it to. Because when I scroll left or right, it goes from the ends of the coverflow control.

Hello

The easiest way to get a scrollbar to control a CoverFlow is to use data binding in xaml. In a Window or Page, you'll have a CoverFlow control and a ScrollBar. On the ScrollBar, set the Minimum property to 0 and the Maximum property to the number of items in the CoverFlow minus one. This will match the logical range of the ScrollBar to the logical range of the CoverFlow. To set the Maximum property of the ScrollBar, you could either hard code this value, or you could use a binding to Items.Count of the CoverFlow, and use an instance of our ArithmeticConverter to subtract 1. On the CoverFlow, you'd use a TwoWay binding to bind the SelectedIndex of the CoverFlow to the Value property of the ScrollBar.

After doing this, you may find that the thumb of the ScrollBar is rather small. The reason for this is the ScrollBar doesn't have any veiwport to relate to. If you want to resolve this, you can set the ViewportSize property of the ScrollBar. The value that you use to set this property will depend on how big you want the ScrollBar thumb to be. I've found that a good value is the number of items in the CoverFlow divided by 5 or 10. Larger ViewportSize values will make the ScrollBar thumb larger.

Here is some example code to further explain what I have described here. Note that the ScrollBar and the CoverFlow have been given names so you can use ElementName in the bindings. The ArithmeticConverter would go in a resource dictionary. The ItemsSource of the CoverFlow is binding to a Data property on the DataContext of the Window or Page.

<ms:ArithmeticConverter x:Key="MinusOne" Additive="-1" />

<ScrollBar Orientation="Horizontal" Minimum="0"
           Maximum="{Binding Items.Count, Converter={StaticResource MinusOne}, ElementName=CoverFlow}"
           SmallChange="1" LargeChange="3"
           Name="ScrollBar" ViewportSize="2" />

<ms:CoverFlow ItemWidth="180" ItemHeight="180"
              ItemsSource="{Binding Data}"
              SelectedIndex="{Binding Value, ElementName=ScrollBar, Mode=TwoWay}"
              Name="CoverFlow" />

Let me know if you need help with any of this.

Jason Fauchelle

Thanks your example really helped me out :)