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> |