Hi there, im expirencing some heavy performance problems when my tileview renders, the rendering takes abnormal amount of time and im wondering if can use this control for my application considering that i at the moment only have two tiles and these with static test data at the moment. My tiles are supposed to display charts and data grids and yesterday when adding my second tile containing a SplineArea Chart the rendering of the page takes seconds, this with static data. I have of coursed assured that any code in the codebehind isnt causing the problem. What i have found out is that if I install my silverlight application as out of the browser application, the rendering performance problems is gone, it is only when rendering in the browser.
1. Can you spot in my XAML if im doing something wrong?
2. Why is the rendering doing fine when running as standalone application?
3. I have seen in visual studios output window a binding expression like below and i dont think this error is caused by me, why is this happening?
Any help very much appreciated!!
Regards Niclas
| <navigation:Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" |
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
| xmlns:d="http://schemas.microsoft.com/expression/blend/2008" |
| xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" |
| xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" |
| xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" |
| xmlns:activity="clr-namespace:System.Windows.Controls;assembly=ActivityControl" |
| x:Class="VFES.Admin.Silverlight.Home" d:DesignWidth="640" |
| xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting" |
| xmlns:telerikCharting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting" |
| xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" |
| xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" |
| xmlns:telerikGrid="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView" |
| d:DesignHeight="480" |
| mc:Ignorable="d" Title="Dashboard"> |
| <navigation:Page.Resources> |
| <!-- Blue spline brushes--> |
| <SolidColorBrush x:Key="SplineBorderBrush" Color="#FF0491D0"/> |
| <LinearGradientBrush x:Key="SplineBackgroundBrush" EndPoint="0.5,0" StartPoint="0.5,1"> |
| <GradientStop Color="#FF75B8D6"/> |
| <GradientStop Color="#FF0491D0" Offset="1"/> |
| </LinearGradientBrush> |
| <!-- Green spline brushes--> |
| <LinearGradientBrush x:Key="SplineBackgroundGreenBrush" EndPoint="0.5,0" StartPoint="0.5,1"> |
| <GradientStop Color="#FF7CF294" Offset="0"/> |
| <GradientStop Color="#FF00AD23" Offset="1"/> |
| </LinearGradientBrush> |
| <SolidColorBrush x:Key="SplineBorderGreenBrush" Color="#FF00AD23"/> |
| <Style x:Key="SplineAreaStyle" TargetType="telerikCharting:SelfDrawingSeries"> |
| <Setter Property="BorderLineStyle"> |
| <Setter.Value> |
| <Style TargetType="Shape"> |
| <Setter Property="Stroke" Value="{StaticResource SplineBorderBrush}" /> |
| <Setter Property="StrokeThickness" Value="3" /> |
| </Style> |
| </Setter.Value> |
| </Setter> |
| <Setter Property="BackgroundStyle"> |
| <Setter.Value> |
| <Style TargetType="Shape"> |
| <Setter Property="Fill" Value="{StaticResource SplineBackgroundBrush}" /> |
| <Setter Property="Opacity" Value="0.5" /> |
| </Style> |
| </Setter.Value> |
| </Setter> |
| </Style> |
| </navigation:Page.Resources> |
| <Grid> |
| <Grid.ColumnDefinitions> |
| <ColumnDefinition Width="*"></ColumnDefinition> |
| </Grid.ColumnDefinitions> |
| <Grid.RowDefinitions> |
| <RowDefinition Height="Auto" /> |
| <RowDefinition Height="Auto" /> |
| <RowDefinition Height="*" /> |
| </Grid.RowDefinitions> |
| <controlsToolkit:HeaderedContentControl Grid.Row="0" Header="DashBoard" |
| Style="{StaticResource HeaderedContentControlStyle}"> |
| </controlsToolkit:HeaderedContentControl> |
| <TextBlock Grid.Row="1" |
| Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor bibendum magna, tincidunt imperdiet sapien facilisis ut." |
| Margin="5,10,0,10" /> |
| <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" |
| VerticalScrollBarVisibility="Auto" Padding="0" BorderThickness="0" Grid.Row="2"> |
| <!-- Insert the main tile view for statistics. --> |
| <telerikNavigation:RadTileView x:Name="RadTileView" MaxColumns="2" Width="1080" HorizontalAlignment="Left"> |
| <!-- Insert Visitors statistics. --> |
| <telerikNavigation:RadTileViewItem Padding="2" Margin="0" Style="{StaticResource RadTileViewItemStyle}"> |
| <telerikNavigation:RadTileViewItem.Header> |
| <TextBlock Text="Visitors" /> |
| </telerikNavigation:RadTileViewItem.Header> |
| <telerikNavigation:RadTileViewItem.Content> |
| <telerik:RadFluidContentControl SmallToNormalThreshold="500, 0" NormalToSmallThreshold="500, 0" |
| NormalToLargeThreshold="800, 0" LargeToNormalThreshold="800, 0"> |
| <telerik:RadFluidContentControl.SmallContent> |
| <Border Width="180" Height="30"> |
| <TextBlock Text="Small Content" /> |
| </Border> |
| </telerik:RadFluidContentControl.SmallContent> |
| <telerik:RadFluidContentControl.Content> |
| <Grid Width="500" VerticalAlignment="Top" HorizontalAlignment="Left"> |
| <Grid.RowDefinitions> |
| <RowDefinition Height="Auto" /> |
| </Grid.RowDefinitions> |
| <telerikChart:RadChart Height="250" Width="500" telerik:StyleManager.Theme="Summer" |
| LegendStyle="{StaticResource NULLChartLegendStyle}" Background="Transparent" |
| BorderBrush="Transparent" ItemsSource="{Binding Visitors}" Margin="5"> |
| <telerikChart:RadChart.DefaultView> |
| <telerikCharting:ChartDefaultView> |
| <telerikCharting:ChartDefaultView.ChartArea> |
| <telerikCharting:ChartArea LegendName="chartLegend" |
| Background="White" FontSize="10"> |
| <telerikCharting:ChartArea.AxisX> |
| <telerikCharting:AxisX IsDateTime="True" |
| DefaultLabelFormat="dd-MM-yyyy" |
| StripLinesVisibility="Collapsed" LayoutMode="Normal" /> |
| </telerikCharting:ChartArea.AxisX> |
| <telerikCharting:ChartArea.AxisY> |
| <telerikCharting:AxisY DefaultLabelFormat="#VAL" |
| AutoRange="True" StripLinesVisibility="Collapsed" |
| MajorGridLinesVisibility="Visible" |
| MinorGridLinesVisibility="Collapsed" /> |
| </telerikCharting:ChartArea.AxisY> |
| </telerikCharting:ChartArea> |
| </telerikCharting:ChartDefaultView.ChartArea> |
| </telerikCharting:ChartDefaultView> |
| </telerikChart:RadChart.DefaultView> |
| <telerikChart:RadChart.SeriesMappings> |
| <telerikCharting:SeriesMapping> |
| <telerikCharting:SeriesMapping.SeriesDefinition> |
| <telerikCharting:StackedSplineSeriesDefinition /> |
| </telerikCharting:SeriesMapping.SeriesDefinition> |
| <telerikCharting:SeriesMapping.ItemMappings> |
| <telerikCharting:ItemMapping DataPointMember="XValue" |
| FieldName="Date" /> |
| <telerikCharting:ItemMapping DataPointMember="YValue" |
| FieldName="Visitors" /> |
| </telerikCharting:SeriesMapping.ItemMappings> |
| </telerikCharting:SeriesMapping> |
| </telerikChart:RadChart.SeriesMappings> |
| </telerikChart:RadChart> |
| </Grid> |
| </telerik:RadFluidContentControl.Content> |
| <telerik:RadFluidContentControl.LargeContent> |
| <Grid Width="800" VerticalAlignment="Top" HorizontalAlignment="Left"> |
| <Grid.RowDefinitions> |
| <RowDefinition Height="Auto" /> |
| <RowDefinition Height="Auto" /> |
| <RowDefinition Height="Auto" /> |
| </Grid.RowDefinitions> |
| <TextBlock Grid.Row="0" Margin="5,10,0,10" |
| Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor bibendum magna, tincidunt imperdiet sapien facilisis ut." /> |
| <telerikGrid:RadGridView Grid.Row="1" telerik:StyleManager.Theme="Summer" |
| ItemsSource="{Binding Visitors}" AutoGenerateColumns="False" |
| IsReadOnly="True" SelectionMode="Extended" FontSize="10" Margin="5,5,5,0"> |
| <telerikGrid:RadGridView.Columns> |
| <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding Date}" |
| Header="Date" DataFormatString="{} {0:dd-MM-yyyy}" /> |
| <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding Visitors}" |
| Header="Visitors" /> |
| <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding UniqueVisitors}" |
| Header="Unique Visitors" /> |
| <telerikGrid:GridViewDataColumn |
| DataMemberBinding="{Binding UniqueVisitorsDiff}" |
| Header="Unique Visitors %" /> |
| <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding NewVisitors}" |
| Header="New Visitors" /> |
| <telerikGrid:GridViewDataColumn |
| DataMemberBinding="{Binding ReturningVisitors}" |
| Header="Returning Visitors" /> |
| <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding RunningTotal}" |
| Header="Total Running Visitors" /> |
| </telerikGrid:RadGridView.Columns> |
| </telerikGrid:RadGridView> |
| <telerikGrid:RadDataPager Grid.Row="2" Margin="5,0,5,5" PageSize="30" |
| Source="{Binding Items, ElementName=radGridView}" DisplayMode="All" |
| AutoEllipsisMode="Both" NumericButtonCount="5" IsTotalItemCountFixed="True" |
| telerik:StyleManager.Theme="Summer" /> |
| </Grid> |
| </telerik:RadFluidContentControl.LargeContent> |
| </telerik:RadFluidContentControl> |
| </telerikNavigation:RadTileViewItem.Content> |
| </telerikNavigation:RadTileViewItem> |
| <!-- Insert Transaction statistics. --> |
| <telerikNavigation:RadTileViewItem Padding="2" Margin="0" Style="{StaticResource RadTileViewItemStyle}"> |
| <telerikNavigation:RadTileViewItem.Header> |
| <TextBlock Text="Transactions" /> |
| </telerikNavigation:RadTileViewItem.Header> |
| <telerikNavigation:RadTileViewItem.Content> |
| <telerik:RadFluidContentControl SmallToNormalThreshold="500, 0" NormalToSmallThreshold="500, 0" |
| NormalToLargeThreshold="800, 0" LargeToNormalThreshold="800, 0"> |
| <telerik:RadFluidContentControl.SmallContent> |
| <Border Width="180" Height="30"> |
| <TextBlock Text="Small Content" /> |
| </Border> |
| </telerik:RadFluidContentControl.SmallContent> |
| <telerik:RadFluidContentControl.Content> |
| <Grid Width="500" VerticalAlignment="Top" HorizontalAlignment="Left"> |
| <Grid.RowDefinitions> |
| <RowDefinition Height="Auto" /> |
| </Grid.RowDefinitions> |
| <telerikChart:RadChart x:Name="radChart" Height="250" Width="500" |
| Background="Transparent" BorderBrush="Transparent" |
| LegendStyle="{StaticResource NULLChartLegendStyle}" |
| FontSize="10"> |
| <telerikChart:RadChart.DefaultView> |
| <telerikCharting:ChartDefaultView> |
| <telerikCharting:ChartDefaultView.ChartArea> |
| <telerikCharting:ChartArea LegendName="chartLegend"> |
| <telerikCharting:ChartArea.AxisX> |
| <telerikCharting:AxisX IsDateTime="True" |
| DefaultLabelFormat="dd-MM-yyyy" LayoutMode="Auto" |
| StepLabelLevelCount="2" TicksDistance="300" |
| AutoRange="True" /> |
| </telerikCharting:ChartArea.AxisX> |
| <telerikCharting:ChartArea.AxisY> |
| <telerikCharting:AxisY DefaultLabelFormat="#VAL" |
| ExtendDirection="Smart" AutoRange="True" |
| StripLinesVisibility="Collapsed" |
| MajorGridLinesVisibility="Visible" |
| MinorGridLinesVisibility="Collapsed" /> |
| </telerikCharting:ChartArea.AxisY> |
| <telerikCharting:ChartArea.DataSeries> |
| <!-- Line Chart --> |
| <telerikCharting:DataSeries> |
| <telerikCharting:DataSeries.Definition> |
| <telerikCharting:SplineAreaSeriesDefinition |
| ShowItemLabels="True" |
| ShowItemToolTips="True" |
| SeriesStyle="{StaticResource SplineAreaStyle}"> |
| </telerikCharting:SplineAreaSeriesDefinition> |
| </telerikCharting:DataSeries.Definition> |
| <telerikCharting:DataPoint YValue="154" XCategory="Jan" /> |
| <telerikCharting:DataPoint YValue="138" XCategory="Feb" /> |
| <telerikCharting:DataPoint YValue="143" XCategory="Mar" /> |
| <telerikCharting:DataPoint YValue="120" XCategory="Apr" /> |
| <telerikCharting:DataPoint YValue="135" XCategory="May" /> |
| <telerikCharting:DataPoint YValue="125" XCategory="Jun" /> |
| <telerikCharting:DataPoint YValue="179" XCategory="Jul" /> |
| <telerikCharting:DataPoint YValue="170" XCategory="Aug" /> |
| <telerikCharting:DataPoint YValue="198" XCategory="Sep" /> |
| <telerikCharting:DataPoint YValue="187" XCategory="Oct" /> |
| <telerikCharting:DataPoint YValue="193" XCategory="Nov" /> |
| <telerikCharting:DataPoint YValue="176" XCategory="Dec" /> |
| </telerikCharting:DataSeries> |
| </telerikCharting:ChartArea.DataSeries> |
| </telerikCharting:ChartArea> |
| </telerikCharting:ChartDefaultView.ChartArea> |
| </telerikCharting:ChartDefaultView> |
| </telerikChart:RadChart.DefaultView> |
| </telerikChart:RadChart> |
| </Grid> |
| </telerik:RadFluidContentControl.Content> |
| <telerik:RadFluidContentControl.LargeContent> |
| <Grid Width="800" VerticalAlignment="Top" HorizontalAlignment="Left"> |
| <Grid.RowDefinitions> |
| <RowDefinition Height="Auto" /> |
| <RowDefinition Height="Auto" /> |
| </Grid.RowDefinitions> |
| <telerikGrid:RadGridView Grid.Row="0" telerik:StyleManager.Theme="Summer" |
| ItemsSource="{Binding Visitors}" AutoGenerateColumns="False" |
| IsReadOnly="True" SelectionMode="Extended" FontSize="10" Margin="5,5,5,0"> |
| <telerikGrid:RadGridView.Columns> |
| <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding Date}" |
| Header="Date" DataFormatString="{} {0:dd-MM-yyyy}" /> |
| <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding Visitors}" |
| Header="Visitors" /> |
| <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding UniqueVisitors}" |
| Header="Unique Visitors" /> |
| <telerikGrid:GridViewDataColumn |
| DataMemberBinding="{Binding UniqueVisitorsDiff}" |
| Header="Unique Visitors %" /> |
| <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding NewVisitors}" |
| Header="New Visitors" /> |
| <telerikGrid:GridViewDataColumn |
| DataMemberBinding="{Binding ReturningVisitors}" |
| Header="Returning Visitors" /> |
| <telerikGrid:GridViewDataColumn DataMemberBinding="{Binding RunningTotal}" |
| Header="Total Running Visitors" /> |
| </telerikGrid:RadGridView.Columns> |
| </telerikGrid:RadGridView> |
| <telerikGrid:RadDataPager Grid.Row="1" Margin="5,0,5,5" PageSize="30" |
| Source="{Binding Items, ElementName=radGridView}" DisplayMode="All" |
| AutoEllipsisMode="Both" NumericButtonCount="5" IsTotalItemCountFixed="True" |
| telerik:StyleManager.Theme="Summer" /> |
| </Grid> |
| </telerik:RadFluidContentControl.LargeContent> |
| </telerik:RadFluidContentControl> |
| </telerikNavigation:RadTileViewItem.Content> |
| </telerikNavigation:RadTileViewItem> |
| </telerikNavigation:RadTileView> |
| </ScrollViewer> |
| </Grid> |
| </navigation:Page> |
1 Answer, 1 is accepted
0
Hello Nixon,
Performance issues may be caused by a myriad of factors and considering the use of rather complex controls like the chart and gridview, the problem in your scenario may actually not be caused by the TileView control. However, without proper investigation I will not be able to tell for sure. I can try to recreate your scenario based on the code you pasted but it would be better if you can send me a project that you can confirm to reproduce the performance problem. Let me know if you cannot send me the project and you want me to create a similar setup.
The code you provided looks OK, but without being able to run it I cannot tell the reason for the performance problem. It also seems very strange that when run in out-of-browser mode the application performs fine because even when it's run "out-of-browser", a browser process is still being used.
P.S. Since this is a forum post, you are allowed to attach only images to your posts. If you want to send me your project you can do so by uploading it to Skydrive and providing a link or emailing it directly to me: tihomir[dot]petkov[at]telerik[dot]com.
Kind regards,
Tihomir Petkov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Performance issues may be caused by a myriad of factors and considering the use of rather complex controls like the chart and gridview, the problem in your scenario may actually not be caused by the TileView control. However, without proper investigation I will not be able to tell for sure. I can try to recreate your scenario based on the code you pasted but it would be better if you can send me a project that you can confirm to reproduce the performance problem. Let me know if you cannot send me the project and you want me to create a similar setup.
The code you provided looks OK, but without being able to run it I cannot tell the reason for the performance problem. It also seems very strange that when run in out-of-browser mode the application performs fine because even when it's run "out-of-browser", a browser process is still being used.
P.S. Since this is a forum post, you are allowed to attach only images to your posts. If you want to send me your project you can do so by uploading it to Skydrive and providing a link or emailing it directly to me: tihomir[dot]petkov[at]telerik[dot]com.
Kind regards,
Tihomir Petkov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.