Manually scrolling a ScrollBar on a ScrollViewer

Question

I have the following structure on my page:

By default there is a ScrollBar on the ScrollViewer.

var scrollbars = this.ScrollView.GetDescendantsOfType<ScrollBar>().ToList();
_scrollBar = scrollbars.FirstOrDefault(x => x.Orientation == Orientation.Horizontal);

I bind the _scrollBar value to the value of the slider and the maximum to the maximum.

var valueBinding = new Binding();            
valueBinding.Source = _scrollBar;
valueBinding.Mode = BindingMode.TwoWay;
valueBinding.Path = new PropertyPath("Value");
BindingOperations.SetBinding(this.Slider, Slider.ValueProperty, valueBinding);

var maximumBinding = new Binding();
maximumBinding.Source = _scrollBar;
maximumBinding.Mode = BindingMode.OneWay;
maximumBinding.Path = new PropertyPath("Maximum");
BindingOperations.SetBinding(this.Slider, Slider.MaximumProperty, maximumBinding);

When I open my page there is a slider and the default scrollbar. When I slide/scroll the scrollViewer both, the slider and scrollbar, are sliding/scrolling synchronously. Now when I'm moving the slider the scrollbar is moving as well but not the scrollViewer. The scrollbar scroll event is also not fired. When I'm moving the scrollbar with the mouse pointer the slider and also the scrollViewer are moving and the scrollbar scroll event is fired.

What do I need to change that I can move the slider and the scrollViewer is moving synchronously?

Many thanks

Answer 1

You can implement an attached property/behavior that will add support for binding to offsets of a ScrollViewer. Your behavior object would respond to property value changes by calling e.g. ScrollToVerticalOffset() on the ScrollViewer and respond to ViewChanged events by updating the property value.

Answer 2

I have produced the same functionality using but using event handlers instead of binding. That aside the big difference to the way I do it is I use the HorizontalOffset property of the Scrollviewer instead of the horizontal scrollbar within the ScrollViewer. Perhaps this will work for you?

Here is a sample of how I did it.

sorry that it is in VB

The only thing missing here I believe is that I set the maximum value for the slider to 100.

Private Sub myslider_ValueChanged(sender As System.Object, e As System.Windows.RoutedPropertyChangedEventArgs(Of System.Double)) Try

        Dim sliderPercentage As Integer = myslider.Value

        If (sliderPercentage > 0) Then

            sv.ScrollToHorizontalOffset((sv.ScrollableWidth / 100) * myslider.Value)

            myscrollviwer.ScrollToHorizontalOffset((myscrollviwer.ScrollableWidth / 100) * myslider.Value)

        Else
            sv.ScrollToHorizontalOffset(0)
            myscrollviwer.ScrollToHorizontalOffset(0)
        End If

    Catch ex As Exception

    End Try
End Sub

Private Sub myscrollviwer_ScrollChanged(sender As System.Object, e As System.Windows.Controls.ScrollChangedEventArgs)

    Try

        Dim scrollPercentage As Double = 0

        If (myscrollviwer.HorizontalOffset > 0) Then

            scrollPercentage = (myscrollviwer.HorizontalOffset / myscrollviwer.ScrollableWidth) * 100

            myslider.Value = scrollPercentage
        Else
            myslider.Value = 0
        End If

    Catch ex As Exception

    End Try
End Sub