Vertical scrolling on scroll wheel

[MARTIN]

Hello, is there any way to scroll the RadTimeline vertically with the scroll wheel?

Ideally I'd like to have the zoom behaviour be restricted to the horizontal scrollbar (user can drag the horizontal bar's edges to zoom in and out etc), but I'd like to bind the vertical scroll position to the scroll wheel. I've achieved this with a RadChart using the PanAndZoomBehavior, but there is no equivalent for the Timeline.

Is there at least a way to programatically scroll the TimelineScrollBar from behind code when I capture the mouse wheel event?

[MARTIN]

My temporary fix for this was to place the RadTimeline in a ScrollViewer. Disable the VerticalScrollBarVisibility on the RadTimeline, and set the ZoomMode to None.

I then bound a separate RadSlider in Range mode to the same view model properties that the RadTimeline was bound to (with conversion to Ticks). I still feel as though having a property to let the scroll wheel scroll vertically would be nice though, seeing as that is pretty much expected behavior across the board...

[Martin Ivanov]

Hi Martin,

I am glad to hear the you find a solution for this.

Another approach is to handle the PreviewMouseWheel event of the timeline control. You can disable the zooming by setting the argument's Handled property to True. This will prevent the control to call its zooming logic when you scroll the mouse wheel. 

To scroll the vertical slider programmatically you can get the TimelineScrollBar element from the timeline's visual tree and change its Selection in the PreviewMouseWheel event handler. Here is an example for this approach:

private TimelineScrollBar verticalSlider;
private const double VerticalScrollOffset = 0.05;

void timeline_Loaded(object sender, RoutedEventArgs e)
{
   this.verticalSlider = timeline.FindChildByType<TimelineScrollBar>();
}

private void timeline_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
    e.Handled = true;

    var timeline = sender as RadTimeline;
    if (timeline != null)
    {
        var range = this.verticalSlider.SelectionRange;

        if (this.verticalSlider != null)
        {
            var offset = e.Delta > 0 ? -VerticalScrollOffset : VerticalScrollOffset;

            var newStart = this.verticalSlider.SelectionStart + offset;
            var newEnd = this.verticalSlider.SelectionEnd + offset;

            // Take care of the case when the selection is outside the Minimum/Maximum range of the slider
            if (newStart < this.verticalSlider.Minimum)
            {
                newStart = this.verticalSlider.Minimum;
                newEnd = newStart + range;
            }
            else if (newEnd > this.verticalSlider.Maximum)
            {
                newEnd = this.verticalSlider.Maximum;
                newStart = newEnd - range;
            }

            this.verticalSlider.Selection = new SelectionRange<double>(newStart, newEnd);
        }
    }
}

Please keep in mind this implementation is onlya suggestion and it is not well tested. This is why If you decide to use it in your code I recommend you to test it properly and modify it if necessary.

I also attached a sample project demonstrating this approach. I hope it helps.

Regards,
Martin
Telerik