Mouse-scrolling to zoom and pan to navigate in the control?

[Johannes]

Is it possible to use mouse-scrolling to zoom the current view of the ScheduleView.
E.g. in day view the hours from 00:00 to 10:00 fit on one screen, scrolling the mousewheel down zooms out so that the whole day fits into one screen, while scrolling the mouse-wheel up zooms in.

And is it possible to use panning to scroll in the views?
I do not need to drag&drop appointments, so I was wondering if it would work to use the mouse to navigate/scroll in the view.

These two things combined would be very useful in timeline view. The user could zoom in and out using the mouse-wheel and navigate by panning.

Any suggestions how to do this?

[Konstantina]

Hi Johannes,

There is no such feature out of the box. However, you can try to implement it yourself. All you need to do is the following:
- in order to get the MouseWheel event to fire for the ScheduleView, you will have to generate its template. The easiest way is to drag-n-drop a ScheduleView control in the Expression Blend's design surface, right-click it and choose from the menu Edit Template->Edit a Copy. Then, Blend will generate all the needed resources. Find the ControlTemplate of the RadScheduleView. It contains the Border, on which MouseWheel event you will have to hook. It is the first, most outer border in the ControlTemplate.
- this event will be fired every time the mouse wheel is used. You can check if the ActiveViewDefinition is Timeline, using the ActiveViewDefinitionIndex property of the ScheduleView.
- you can use this online demo as an example how to create the zoom functionality. Usually, you will have to update the MaxTimeRulerExtent property with an appropriate value for each mouse wheel scroll.

Hope this information helps. Please let us know if you were able to achieve the desired effect.

All the best,
Konstantina
the Telerik team

[Johannes]

Thanks for your reply!

I've managed to catch the scrolling. When the user scrolls up, I increase the value of MaxTimeRulerExtent, when he scrolls down, the value is decreased. But there is no change in the Timeline View. I want that the timeline is getting smaller and smaller as long as the user scrolls down. And I want it to get bigger and bigger as long as the user scrolls up. Just like in any modern browser when Ctrl + Scrolling.
This is the code I am using:

this.MouseWheel += (s, e) =>
{
        if (e.Delta > 0)
        {
            if(double.IsNaN(SchedViewr.ActiveViewDefinition.MaxTimeRulerExtent) || double.IsInfinity(SchedViewr.ActiveViewDefinition.MaxTimeRulerExtent))
                SchedViewr.ActiveViewDefinition.MaxTimeRulerExtent = 100.0;
            SchedViewr.ActiveViewDefinition.MaxTimeRulerExtent += 30.0;
        }
        else if (e.Delta < 0)
        {
            if(double.IsNaN(SchedViewr.ActiveViewDefinition.MaxTimeRulerExtent) || double.IsInfinity(SchedViewr.ActiveViewDefinition.MaxTimeRulerExtent))
                SchedViewr.ActiveViewDefinition.MaxTimeRulerExtent = 100.0;
            SchedViewr.ActiveViewDefinition.MaxTimeRulerExtent -= 30.0;
        }
};

And what about panning? My customer want's to drag the view to navigate instead of scrolling - "panning" - just like the navigation in a view on modern smartphones. Tap and drag the view around.

But the most important thing is that zooming works - zoom out until the whole timeline fits in the view and zoom in until only a few hours are displayed in the view.

[George]

Hi Johannes,


I would suggest using the MinTimeRuler instead of MaxTimeRuler property in TimelineView. Please, give it a try and let me know if this helps.

About the second scenario - currently we don't support  this feature. You could try to implement it manually handling MouseLeftButtonDown using the AddHandler:

this.AddHandler(RadScheduleView.MouseLeftButtonDownEvent, new MouseButtonEventHandler(MainWindow_MouseLeftButtonDown), true);

Then on MouseMove you could check whether the LeftButton is down, and if it is true, you could change the Horizontal/Vertical OffSet.

I hope this helps.


Best wishes,
George
the Telerik team

[Johannes]

I had to set both, MinTimeRulerExtend and MaxTimeRulerExtend, to the same value to achieve the desired zoom-effect.
Thanks for your hint regarding implementing panning.

[Johannes]

Aaah, there's another problem: I don't know exactly where and how to hook my MouseWheel-eventhandlers.
Currently the window's MouseWheel-event is captured, but the MouseWheel-events from ScheduleView don't bubble up to the window.
A ViewDefinition doesn't have a MouseWheel-event to attach to.
So, how could I hook in the timeline-view's MouseWheel event?

[Konstantina]

Hi Johannes,

To hook to the MouseWheel event you will have to inherit the ScheduleView and override the event. Or you could generate the template of the ScheduleView in Expression Blend as explained in my first post.

Hope this info is helpful.

Best wishes,
Konstantina
the Telerik team