This is a migrated thread and some comments may be shown as answers.

Slow performance on loading app due to RadCalendar control

15 Answers 163 Views

Calendar

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Doru asked on 08 Mar 2013, 04:53 PM

I was wondering if there is a way to improve the performance of the calendar control by setting some properties during load.

My first page has a RadCalendar control. In my perf testing using EQATEC profiler (same machine, same environment) I collected the following numbers. The numbers in themselves are not important but the percentage decrease in performance is.

Launching app numbers:
223 ms - Brand new Windows phone 7.5 project no Telerik RAD controls

889 ms (- 400%) - Added references only to Telerik.Windows.Control.Input, Telerik.Windows.Controls.Primitives and Telerik.Windows.Core.

4254 ms ~ 4 seconds (- 2000%) - added the RadCalendar control to the main page (with no customization, no event handlers, no styling i.e. exactly how it is by default).

The RadCalendar control is the focus point of my application so I cannot disable it, delete it, or get rid of it unless I redesign the whole application (which is already on the market).
With the newer windows phones there is no problem, but with Nokia 610 the performance is really really bad (and Nokia 610 is my second phone usage in terms of downloads and my biggest source of perf complains).

I know the control itself is a very complex one and it takes time to render, but I was wondering if I can improve the speed by not using some of the generic functionality - if possible. I would greatly appreciate any help or hints you can provide.

15 Answers, 1 is accepted

answered on 09 Apr 2013, 12:32 PM

Hello Alex,

RadCalendar is a complex component and it is normal that it takes some time to load itself and populate all cells with the correct date information and appointments. If you need a faster, but not-so-functional calendar, you can remove the RadDatePicker control that we use to change the month. This can be achieved by modifying the control's template and commenting out the month info related parts:

<Style TargetType="telerikInput:RadCalendar">

<Setter Property="HorizontalAlignment" Value="Stretch"/>

<Setter Property="VerticalAlignment" Value="Top"/>

<Setter Property="BorderThickness" Value="1" />

<Setter Property="IsTabStop" Value="False" />

<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}" />

<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}" />

<Setter Property="Background" Value="Transparent"/>

<Setter Property="GridLinesBrush" Value="{StaticResource PhoneForegroundBrush}"/>

<Setter Property="ItemTemplate">

<Setter.Value>

<DataTemplate>

<Grid Margin="5">

<TextBlock Text="{Binding DetailText}" FontSize="7" MaxHeight="25" VerticalAlignment="Top" Margin="0,-2,0,0"/>

<TextBlock Text="{Binding Text}" x:Name="TextPresenter" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>

</Grid>

</DataTemplate>

</Setter.Value>

</Setter>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerikInput:RadCalendar">

<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="DayNamesNotVisible">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="MonthTextContainer"

Storyboard.TargetProperty="Margin">

<DiscreteObjectKeyFrame KeyTime="0" Value="-4, -10, 0, 30" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<!--<telerikInput:RadDatePicker Culture="{TemplateBinding Culture}" x:Name="DatePicker" Width="1" Height="1" Opacity="0" SelectorFormat="my"/>-->

<Canvas Grid.Row="1" IsHitTestVisible="False" Margin="0,-20,0,0">

<Rectangle Canvas.Left="0" Canvas.Top="0" x:Name="OldContentPresenterCopy" CacheMode="BitmapCache"/>

</Canvas>

<Grid Grid.Row="1" x:Name="CalendarViewContainer" Margin="0,-20,0,0">

<Canvas IsHitTestVisible="False">

<Rectangle Canvas.Left="0" Canvas.Top="0" x:Name="OldContentPresenter" CacheMode="BitmapCache"/>

</Canvas>

<telerikPrimitives:RadUniformGrid FirstRowVisibility="{TemplateBinding DayNamesVisibility}" FirstColumnVisibility="{TemplateBinding WeekNumbersVisibility}" x:Name="CalendarPanel" PreserveSpaceForCollapsedChildren="True" NumberOfRows="7" NumberOfColumns ="8" />

<telerikPrimitives:RadUniformGrid FirstRowVisibility="{TemplateBinding DayNamesVisibility}" FirstColumnVisibility="{TemplateBinding WeekNumbersVisibility}" x:Name="GridLinesPanel" PreserveSpaceForCollapsedChildren="True" NumberOfRows="7" NumberOfColumns ="8" />

</Grid>

<Grid Margin="22,10,0,15" x:Name="MonthInfoLargeContainer">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<!--<telerikPrimitives:RadTransitionControl x:Name="YearTextContainer" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="{StaticResource PhoneFontSizeMedium}">

<telerikPrimitives:RadTransitionControl.Transition>

<telerikPrimitives:RadFadeTransition PlayMode="Simultaneously"/>

</telerikPrimitives:RadTransitionControl.Transition>

</telerikPrimitives:RadTransitionControl>

<telerikPrimitives:RadTransitionControl Margin="-4, -10, 0, 0" Grid.Row="1" x:Name="MonthTextContainer" FontFamily="{StaticResource PhoneFontFamilySemiLight}" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}">

<telerikPrimitives:RadTransitionControl.Transition>

<telerikPrimitives:RadFadeTransition PlayMode="Simultaneously"/>

</telerikPrimitives:RadTransitionControl.Transition>

</telerikPrimitives:RadTransitionControl>-->

</Grid>

<Grid x:Name="MonthInfoSmallContainer" Margin="3,0,0,0">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<!--<telerikPrimitives:RadTransitionControl x:Name="MonthTextContainerSmall" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="{StaticResource PhoneFontSizeMedium}">

<telerikPrimitives:RadTransitionControl.Transition>

<telerikPrimitives:RadFadeTransition PlayMode="Simultaneously"/>

</telerikPrimitives:RadTransitionControl.Transition>

</telerikPrimitives:RadTransitionControl>

<telerikPrimitives:RadTransitionControl Grid.Column="1" Margin="5,0,0,0" FontFamily="{StaticResource PhoneFontFamilySemiBold}" x:Name="YearTextContainerSmall" FontSize="{StaticResource PhoneFontSizeMedium}">

<telerikPrimitives:RadTransitionControl.Transition>

<telerikPrimitives:RadFadeTransition PlayMode="Simultaneously"/>

</telerikPrimitives:RadTransitionControl.Transition>

</telerikPrimitives:RadTransitionControl>-->

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

This is the control's default style with comments on the parts that you may exclude in order to reduce the loading time. This will remove the month name on top of the calendar, but you can easily add a simple TextBlock and bind the value of its Text property to the RadCalendar's DisplayDate. To change the months, you can use buttons like suggested in this post.

I hope this information helps.

Kind regards,
Todor
the Telerik team

Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.

answered on 12 Apr 2013, 10:58 AM

CalendarTestWP7.zip

Hello Alex,

The measurements that I have made with the loading time of RadCalendar with and without the style that I have suggested in my previous post show that the control loads for a little more than a second with its default style and for about half a second with the suggested style. You can see these observations with the project that I have attached. Simply run the application and press each of the Buttons (on a separate run of the application), which will navigate you to a page with RadCalendar and TextBlock that shows the time it takes for the page to load.

Let me know if it doesn't work as expected on your side.

Regards,
Todor
the Telerik team

Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.

answered on 12 Apr 2013, 11:22 AM

In Release, default page opens within 1700-1800 ms on Lumia 800.
Suggested page takes 800-900 ms to open.

When default page opens several times, all subsequent openings take 900-1000 ms.

Well, while in this project it makes difference, still 800 ms is too long.

I used same technique to measure open page time in our app, and it's 1500-1600 first time.

Here's the code we use:

<telerikInput:RadCalendar Grid.Row="1" Margin="0,0,0,0" Style="{StaticResource CalendarStyle}"

Culture="ru-RU" Height="440"

SelectedValue="{Binding SelectedDate, Mode=TwoWay}"

x:Name="calendar">

</telerikInput:RadCalendar>

And the style itself:

<Style x:Key="RadCalendarDefaultStyleKey" TargetType="telerikInput:RadCalendar">

<Setter Property="HorizontalAlignment" Value="Stretch"/>

<Setter Property="VerticalAlignment" Value="Top"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="IsTabStop" Value="False"/>

<Setter Property="Background" Value="Transparent"/>

<Setter Property="MonthInfoDisplayMode" Value="None"></Setter>

<Setter Property="GridLinesBrush" Value="{StaticResource PhoneForegroundBrush}"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerikInput:RadCalendar">

<Border Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

Padding="{TemplateBinding Padding}">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal"/>

<VisualState x:Name="DayNamesNotVisible">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MonthTextContainer" Storyboard.TargetProperty="Margin">

<DiscreteObjectKeyFrame KeyTime="0" Value="-4, -10, 0, 30"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="416"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Canvas Grid.Row="1"

IsHitTestVisible="False" Height="416"

Margin="0,-20,0,0" VerticalAlignment="Top">

<Rectangle x:Name="OldContentPresenterCopy"

Canvas.Left="0"

Canvas.Top="0"

CacheMode="BitmapCache"/>

</Canvas>

<Grid x:Name="CalendarViewContainer"

Row="1" VerticalAlignment="Top" Height="416"

Margin="0,-20,0,0">

<Canvas IsHitTestVisible="False">

<Rectangle x:Name="OldContentPresenter"

Canvas.Left="0"

Canvas.Top="0"

CacheMode="BitmapCache"/>

</Canvas>

<telerikPrimitives:RadUniformGrid x:Name="CalendarPanel" Height="416"

FirstRowVisibility="{TemplateBinding DayNamesVisibility}"

FirstColumnVisibility="{TemplateBinding WeekNumbersVisibility}"

PreserveSpaceForCollapsedChildren="True"

NumberOfRows="7"

NumberOfColumns="8"/>

<telerikPrimitives:RadUniformGrid x:Name="GridLinesPanel" Height="416"

FirstRowVisibility="{TemplateBinding DayNamesVisibility}"

FirstColumnVisibility="{TemplateBinding WeekNumbersVisibility}"

PreserveSpaceForCollapsedChildren="True"

NumberOfRows="7"

NumberOfColumns="8"/>

</Grid>

<Grid x:Name="MonthInfoLargeContainer" Margin="22,10,0,15" Visibility="Collapsed">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

</Grid>

<Grid x:Name="MonthInfoSmallContainer" Margin="0,0,0,0" >

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

</Grid>

<Border Background="{StaticResource PhoneBackgroundBrush}" Height="20" HorizontalAlignment="Stretch"></Border>

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Style TargetType="telerikInput:RadCalendar" x:Key="CalendarStyle" BasedOn="{StaticResource RadCalendarDefaultStyleKey}" >

<Setter Property="DayNamesVisibility" Value="Visible"/>

<Setter Property="Foreground" Value="#3b4b61"/>

<Setter Property="IsTodayHighlighted" Value="False"/>

<Setter Property="GridLinesBrush" Value="{StaticResource PhoneBackgroundBrush}"/>

</Style>

answered on 13 May 2013, 09:32 AM

Thanks, Todor!
Will try it right now.
---
It is much faster, but now any of these lines throw exception
calendar.SelectableDateStart = new DateTime(2013, 04, 07);
calendar.SelectableDateEnd = new DateTime(2013, 04, 23);
calendar.SelectedValue = new DateTime(2013, 04, 22);

{System.ArgumentOutOfRangeException: Invalid SelectableDateStart value.
Parameter name: sender
at Telerik.Windows.Controls.RadCalendar.OnSelectableDateStartChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)}
---
I worked it out, this build requires setting SelectedDate* properties in Loaded event.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Slow performance on loading app due to RadCalendar control

15 Answers, 1 is accepted