ScheduleView scrolling performances

[Thomas]

Hi,

I have switched from the old scheduler to the scheduleView and I saw a real performance improvement.
However, in my program, I need to be able to have around 10 000 appointments loaded in the same View and be able to scroll
inside this view smoothly (MinTimeRulerExtent is set to 7000).

The problem is that the component is very slow to scroll when I have more than 1 000 appointments in the same view (but only when I scroll).
I tried to understand the problem with the Application.Current.Host.Settings.EnableRedrawRegions = true; setting, this showed (as we might expect) that each time I scroll the scheduler renders and I guess this is why it is slow.
I tried the CacheMode="BitmapCache" attribute but it does not change anything because it caches only what is on the screen ( the scrollBar and a piece of the Scheduleview) not the scrollable content inside the scrolling panel.
I wanted to know if it was possible to cache the content. It would be really fast since the scrolling would then only show the visible part of this image and thus avoid too much rendering when scrolling.
The image would be really big, maybe 4 000 * 4 000, it should take something like 50 Mo in memory if I am not mistaken. This is much but I Think a modern graphic card can handle it easily.
In fact my problem is similar to this one : http://www.telerik.com/community/forums/silverlight/scheduleview/radscheduleview-cachemode.aspx.

You answered: 
"I think that using hardware acceleration will not help in this case (it might even make things worse). Bitmap caching is for elements that are not changing often. While scrolling we are recycling AppoitmentItems so the whole RadScheduleView will have to be redrawn (because of the invalidated AppointmentItem)."

But is it possible to disable the recycling if we render the whole view in cache? Because in fact the content stays static when we scroll.

Or maybe you have another solution to solve my problem.

Thanks

[Hristo]

Hi Thomas,

I've created sample project simulating your scenario.
1440 appointments per day, and 10 visible days in DayViewDefinition. MinAppointmentWidth = 1000 (so that I can see no more then 2 days in the viewport). Indeed this case scrolling lags. But if you modify the AppointmentItem ControlTemplate you could achieve good scrolling performance (for the test case I have left only single Border and inside TextBlock with Text={Binding Subject}).

I hope that this will be enough to improve the scrolling performance.
Let us know if you need more information.

All the best,
Hristo
the Telerik team

[Thomas]

Hi,

I am a bit disappointed with your answer because when I want to display the scheduler
with MinTimeRulerExtent=4000, I have "big" appointments icons, so I want to display some complex ControlTemplate.
That is one reason why I switched from Scheduler to ScheduleView and I still have performance problems even if it is much better.

I guess I am not the only one to have this performance problem and the ScheduleView description says
that it "allows extremely fast and smooth scrolling of thousands and millions of appointments", that is why I hoped you had a better solution.
What about my theory on Bitmap caching? Isn't it possible, at least in theory, to cache the whole Scheduler on the GPU.

I tried to check if my solution was possible in theory by rendering the scheduler into a writeable bitmap. ( less efficient than using cache with the GPU but just in order to test),

the code looked something like this :

WriteableBitmap bmp = new WriteableBitmap(2500, 2500);
bmp.Render(scheduler,null);
bmp.Invalidate();

I then put the image into a ScrollViewer like this one :

<ScrollViewer Visibility="Collapsed" x:Name="testImPanel" >            

<Image  x:Name="testIm" ></Image>
<ScrollViewer>

The result was lighting fast because the Scheduler was then just an Image and it was just about scrolling an image. It shows that caching
is possible.
However, this solution is bad because I just have an image of the scheduler, and it doesn't react to user input (of course).
Something which shouldn't be the case if we use the CacheMode="BitmapCache" feature for the whole Scheduler.
Do you have any idea if you could do this on the ScheduleView?

Thanks

[Hristo]

Hi Thomas,

It seems that I do not understand your scenario.
Could you please tell me how are you able to show 1000 appointments in the viewport?
It would be best if you could send your project so that I can get better understanding.

Using BitmapCache is not an option because AppointmentItems are reused which means that the have to be redrawn every time when they need to show different value and this is happening very often in case of scrolling.
It may work if we add support to disable virtualization but this will break the Silverlight layout (e.g. elements cannot have desired size more then 32000). Silverlight will not be able to display all appointments because there is a limit of the visual objects deplayed.

Greetings,
Hristo
the Telerik team

[Thomas]

Hi,

"It seems that I do not understand your scenario.
Could you please tell me how are you able to show 1000 appointments in the viewport?
It would be best if you could send your project so that I can get better understanding."

My example with WriteableBitmap was just an example to show that if I can render the whole Scheduler
Content to a bitmap, I could scroll inside it smoothly. But There were not 1000 appointments in the viewPort (but I guess I could do it
if I wanted to but they would be so small that we wouldn't be able to see them).

I understand your virtualization strategy,  but even if it is effective in term of memory. It does not seem to be that effective if we want fast scrolling, because in my opinion the problem is about rendering the whole scheduler (just correct me if I am wrong).
The idea of disabling virtualization seems a good solution to me (in the case we want fast scrolling). At least, we can give it a try.
But maybe I don't understand something, you told me that 32000 was the layout limit. This means that the content of the
scheduler can't go over 32000 px? If it is the case it's ok for me because I just need MinTimeRulerExtent between 1000-10000.

Thanks

[Hristo]

Hello Thomas,

We have a lot of optimizations so that scrolling is smooth. It can be even better if you modify the control template and reduce the number of visuals inside.
We do not render the whole RadScheduleView - only the appointments that will be visible (e.g. in the Viewport).

With the current version there is no option to turn off virtualization (unless you measure RadScheduleView with infinity, using ScrollViewer or StackPanel) so if possible please send us your project so that we can profile it and provide you with tips on improving scrolling performance.

All the best,
Hristo
the Telerik team

[Thomas]

Hi,

"We do not render the whole RadScheduleView - only the appointments that will be visible (e.g. in the Viewport)."
yes I understand that you don't draw what is not in the viewport but the more appointments there are outside the Viewport,
the slower it is to render the Viewport, so it shows that the other appointments slow the process.

I tried your trick of putting the Scheduler with big dimensions inside a scrollPanel.
The loading was really really slow. So yes you were right, virtualization helps haha.
The good news was that once the scheduler is in the cache, the scrolling is smooth.
But I can't use this since the loading can take up to one minute.

For obvious reasons, I can't send my whole project. But I have reproduced the same problem on a sample project.
However, I don't think it will be different than your sample project. It's just 1000 appointments per day and it begins to
lag when I scroll in week view.
Here is the link to the solution :

http://www.novealis.com/Novealis_V2/tmp/scheduleViewOverloading.rar

Thanks

[Hristo]

Hello Thomas,

Then you for providing this sample project. It was enough to identify one issue.
I found that there is a bug in Grid panel (sometimes it measure its children with infinity although they are in star row) which slow down scrolling performance. I've managed to workaround it so with Q2 this issue will be resolved.

In your case to further improve scrolling performance you need to edit AppointmentItem ControlTemplate (not Content Template like you did in your sample). When I changed the control template scrolling got much better.

Here is the modified control template:

<UserControl x:Class="SilverlightApplication1.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

    <UserControl.Resources>

        <ControlTemplate x:Key="AppointmentItemControlTemplate" TargetType="telerik:AppointmentItem">
            <Border Background="{TemplateBinding Background}">

                <telerik:CommandManager.InputBindings>
                    <telerik:InputBindingCollection>
                        <telerik:MouseBinding Gesture="LeftDoubleClick" Command="telerik:RadScheduleViewCommands.EditAppointment" />
                    </telerik:InputBindingCollection>
                </telerik:CommandManager.InputBindings>

                <TextBlock Foreground="Black"
                           Text="{Binding Subject}" />
            </Border>
        </ControlTemplate>

        <telerik:OrientedAppointmentItemStyleSelector x:Key="AppointmentItemStyleSelector">
            <telerik:OrientedAppointmentItemStyleSelector.HorizontalStyle>
                <Style TargetType="telerik:AppointmentItem">
                    <Setter Property="Template" Value="{StaticResource AppointmentItemControlTemplate}" />
                </Style>
            </telerik:OrientedAppointmentItemStyleSelector.HorizontalStyle>
            <telerik:OrientedAppointmentItemStyleSelector.VerticalStyle>
                <Style TargetType="telerik:AppointmentItem">
                    <Setter Property="Template" Value="{StaticResource AppointmentItemControlTemplate}" />
                </Style>
            </telerik:OrientedAppointmentItemStyleSelector.VerticalStyle>
        </telerik:OrientedAppointmentItemStyleSelector>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">

        <telerik:RadScheduleView x:Name="scheduler"
                                 Margin="0"
                                 Language="fr-FR"
                                 AppointmentStyleSelector="{StaticResource AppointmentItemStyleSelector}">

            <telerik:RadScheduleView.ViewDefinitions>
                <telerik:DayViewDefinition x:Name="dayViewDef"
                                           TimerulerMajorTickStringFormat="{}{0:%H:mm}"
                                           VisibleDays="1" />
                <telerik:MonthViewDefinition x:Name="monthViewDef" />
                <telerik:WeekViewDefinition x:Name="weekViewDef"
                                            TimerulerMajorTickStringFormat="{}{0:%H:mm}"
                                            VisibleDays="6" />
                <telerik:TimelineViewDefinition x:Name="timelineViewDef" TimerulerMajorTickStringFormat="{}{0:%H:mm}" />
            </telerik:RadScheduleView.ViewDefinitions>
        </telerik:RadScheduleView>
    </Grid>

</UserControl>

I've updated your telerik points for your involvement.

Best wishes,
Hristo
the Telerik team