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

Rad Tile View - Performance Issue

1 Answer 142 Views

TileView

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

Sathya Prasaad asked on 21 Feb 2011, 01:02 PM

Hi Telerik,

We’re having a RadTileView control inside a RadSplit container. While loading the page containing these controls, we notice that CPU usage is hitting 100%. We stumbled upon this while investigating an intermittent WSOD issue. We were thinking if this possible performance issue (CPU usage 100%) could be the reason for WSOD. Could you please let us know if there is a fix for this performance issue? The sample code is placed below.

Thanks,

Sathya

UserControl x:Class="SilverlightApplication1.MainPage"

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:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"

xmlns:telerikDock="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"

xmlns:radDock="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"

xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" mc:Ignorable="d">

<Grid ShowGridLines="True">

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition Height="250" />

</Grid.RowDefinitions>

<telerikDock:RadDocking>

<telerikDock:RadDocking.DocumentHost>

<telerikDock:RadSplitContainer Height="Auto" x:Name="TileArea" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

<telerikDock:RadPaneGroup Background="Transparent" BorderBrush="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

<telerikDock:RadPane CanUserClose="False" Background="Transparent" BorderBrush="Green" Height="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0" >

<telerikNavigation:RadTileView x:Name="RadTileView1" MaxRows="1">

<telerikNavigation:RadTileViewItem>

<telerikNavigation:RadTileViewItem.Header>

<TextBlock Text="Tile 1" />

</telerikNavigation:RadTileViewItem.Header>

<telerikNavigation:RadTileViewItem.Content>

<telerik:RadFluidContentControl SmallToNormalThreshold="190, 140"

NormalToSmallThreshold="190, 140" NormalToLargeThreshold="300, 160"

LargeToNormalThreshold="300, 160">

<telerik:RadFluidContentControl.SmallContent>

<TextBlock Text="Small content" />

</telerik:RadFluidContentControl.SmallContent>

<telerik:RadFluidContentControl.Content>

<TextBlock Text="Normal content" />

</telerik:RadFluidContentControl.Content>

<telerik:RadFluidContentControl.LargeContent>

<TextBlock Text="Large content" />

</telerik:RadFluidContentControl.LargeContent>

</telerik:RadFluidContentControl>

</telerikNavigation:RadTileViewItem.Content>

</telerikNavigation:RadTileViewItem>

<telerikNavigation:RadTileViewItem>

<telerikNavigation:RadTileViewItem.Header>

<TextBlock Text="Tile 2" />

</telerikNavigation:RadTileViewItem.Header>

<telerikNavigation:RadTileViewItem.Content>

<telerik:RadFluidContentControl SmallToNormalThreshold="190, 140"

NormalToSmallThreshold="190, 140" NormalToLargeThreshold="300, 160"

LargeToNormalThreshold="300, 160">

<telerik:RadFluidContentControl.SmallContent>

<TextBlock Text="Small content" />

</telerik:RadFluidContentControl.SmallContent>

<telerik:RadFluidContentControl.Content>

<TextBlock Text="Normal content" />

</telerik:RadFluidContentControl.Content>

<telerik:RadFluidContentControl.LargeContent>

<TextBlock Text="Large content" />

</telerik:RadFluidContentControl.LargeContent>

</telerik:RadFluidContentControl>

</telerikNavigation:RadTileViewItem.Content>

</telerikNavigation:RadTileViewItem>

<telerikNavigation:RadTileViewItem>

<telerikNavigation:RadTileViewItem.Header>

<TextBlock Text="Tile 3" />

</telerikNavigation:RadTileViewItem.Header>

<telerikNavigation:RadTileViewItem.Content>

<telerik:RadFluidContentControl SmallToNormalThreshold="190, 140"

NormalToSmallThreshold="190, 140" NormalToLargeThreshold="300, 160"

LargeToNormalThreshold="300, 160">

<telerik:RadFluidContentControl.SmallContent>

<TextBlock Text="Small content" />

</telerik:RadFluidContentControl.SmallContent>

<telerik:RadFluidContentControl.Content>

<TextBlock Text="Normal content" />

</telerik:RadFluidContentControl.Content>

<telerik:RadFluidContentControl.LargeContent>

<TextBlock Text="Large content" />

</telerik:RadFluidContentControl.LargeContent>

</telerik:RadFluidContentControl>

</telerikNavigation:RadTileViewItem.Content>

</telerikNavigation:RadTileViewItem>

<telerikNavigation:RadTileViewItem>

<telerikNavigation:RadTileViewItem.Header>

<TextBlock Text="Tile 4" />

</telerikNavigation:RadTileViewItem.Header>

<telerikNavigation:RadTileViewItem.Content>

<telerik:RadFluidContentControl SmallToNormalThreshold="190, 140"

NormalToSmallThreshold="190, 140" NormalToLargeThreshold="300, 160"

LargeToNormalThreshold="300, 160">

<telerik:RadFluidContentControl.SmallContent>

<TextBlock Text="Small content" />

</telerik:RadFluidContentControl.SmallContent>

<telerik:RadFluidContentControl.Content>

<TextBlock Text="Normal content" />

</telerik:RadFluidContentControl.Content>

<telerik:RadFluidContentControl.LargeContent>

<TextBlock Text="Large content" />

</telerik:RadFluidContentControl.LargeContent>

</telerik:RadFluidContentControl>

</telerikNavigation:RadTileViewItem.Content>

</telerikNavigation:RadTileViewItem>

<telerikNavigation:RadTileViewItem>

<telerikNavigation:RadTileViewItem.Header>

<TextBlock Text="Tile 5" />

</telerikNavigation:RadTileViewItem.Header>

<telerikNavigation:RadTileViewItem.Content>

<telerik:RadFluidContentControl SmallToNormalThreshold="190, 140"

NormalToSmallThreshold="190, 140" NormalToLargeThreshold="300, 160"

LargeToNormalThreshold="300, 160">

<telerik:RadFluidContentControl.SmallContent>

<TextBlock Text="Small content" />

</telerik:RadFluidContentControl.SmallContent>

<telerik:RadFluidContentControl.Content>

<TextBlock Text="Normal content" />

</telerik:RadFluidContentControl.Content>

<telerik:RadFluidContentControl.LargeContent>

<TextBlock Text="Large content" />

</telerik:RadFluidContentControl.LargeContent>

</telerik:RadFluidContentControl>

</telerikNavigation:RadTileViewItem.Content>

</telerikNavigation:RadTileViewItem>

<telerikNavigation:RadTileViewItem>

<telerikNavigation:RadTileViewItem.Header>

<TextBlock Text="Tile 6" />

</telerikNavigation:RadTileViewItem.Header>

<telerikNavigation:RadTileViewItem.Content>

<telerik:RadFluidContentControl SmallToNormalThreshold="190, 140"

NormalToSmallThreshold="190, 140" NormalToLargeThreshold="300, 160"

LargeToNormalThreshold="300, 160">

<telerik:RadFluidContentControl.SmallContent>

<TextBlock Text="Small content" />

</telerik:RadFluidContentControl.SmallContent>

<telerik:RadFluidContentControl.Content>

<TextBlock Text="Normal content" />

</telerik:RadFluidContentControl.Content>

<telerik:RadFluidContentControl.LargeContent>

<TextBlock Text="Large content" />

</telerik:RadFluidContentControl.LargeContent>

</telerik:RadFluidContentControl>

</telerikNavigation:RadTileViewItem.Content>

</telerikNavigation:RadTileViewItem>

<telerikNavigation:RadTileViewItem>

<telerikNavigation:RadTileViewItem.Header>

<TextBlock Text="Tile 7" />

</telerikNavigation:RadTileViewItem.Header>

<telerikNavigation:RadTileViewItem.Content>

<telerik:RadFluidContentControl SmallToNormalThreshold="190, 140"

NormalToSmallThreshold="190, 140" NormalToLargeThreshold="300, 160"

LargeToNormalThreshold="300, 160">

<telerik:RadFluidContentControl.SmallContent>

<TextBlock Text="Small content" />

</telerik:RadFluidContentControl.SmallContent>

<telerik:RadFluidContentControl.Content>

<TextBlock Text="Normal content" />

</telerik:RadFluidContentControl.Content>

<telerik:RadFluidContentControl.LargeContent>

<TextBlock Text="Large content" />

</telerik:RadFluidContentControl.LargeContent>

</telerik:RadFluidContentControl>

</telerikNavigation:RadTileViewItem.Content>

</telerikNavigation:RadTileViewItem>

<telerikNavigation:RadTileViewItem>

<telerikNavigation:RadTileViewItem.Header>

<TextBlock Text="Tile 8" />

</telerikNavigation:RadTileViewItem.Header>

<telerikNavigation:RadTileViewItem.Content>

<telerik:RadFluidContentControl SmallToNormalThreshold="190, 140"

NormalToSmallThreshold="190, 140" NormalToLargeThreshold="300, 160"

LargeToNormalThreshold="300, 160">

<telerik:RadFluidContentControl.SmallContent>

<TextBlock Text="Small content" />

</telerik:RadFluidContentControl.SmallContent>

<telerik:RadFluidContentControl.Content>

<TextBlock Text="Normal content" />

</telerik:RadFluidContentControl.Content>

<telerik:RadFluidContentControl.LargeContent>

<TextBlock Text="Large content" />

</telerik:RadFluidContentControl.LargeContent>

</telerik:RadFluidContentControl>

</telerikNavigation:RadTileViewItem.Content>

</telerikNavigation:RadTileViewItem>

</telerikNavigation:RadTileView>

</telerikDock:RadPane>

</telerikDock:RadPaneGroup>

</telerikDock:RadSplitContainer>

</telerikDock:RadDocking.DocumentHost>

<telerikDock:RadSplitContainer InitialPosition="DockedRight" Width="800" Height="Auto" Grid.Row="1">

<telerikDock:RadPaneGroup>

<telerikDock:RadPane Header="Lookup1" IsTabStop="True" CanDockInDocumentHost="False" CanUserPin="True" IsPinned="False" CanUserClose="False">

<radDock:RadPane.HeaderTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal">

<TextBlock Text="Lookup1" />

</StackPanel>

</DataTemplate>

</radDock:RadPane.HeaderTemplate>

<radDock:RadPane.Effect>

<DropShadowEffect Color="Gray"/>

</radDock:RadPane.Effect>

<ScrollViewer VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" Padding="0" BorderThickness="0" >

<StackPanel Orientation="Vertical" Height="Auto">

</StackPanel>

</ScrollViewer>

</telerikDock:RadPane>

<telerikDock:RadPane x:Name="PaneLookup" Header="Lookup2 " IsTabStop="True" CanUserPin="True" IsPinned="False" CanUserClose="False">

<radDock:RadPane.HeaderTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal">

<TextBlock Text="Lookup2" />

</StackPanel>

</DataTemplate>

</radDock:RadPane.HeaderTemplate>

<radDock:RadPane.Effect>

<DropShadowEffect Color="Gray"/>

</radDock:RadPane.Effect>

<ScrollViewer VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" Padding="0" BorderThickness="0" >

<StackPanel Orientation="Vertical" Height="Auto" Width="800">

</StackPanel>

</ScrollViewer>

</telerikDock:RadPane>

</telerikDock:RadPaneGroup>

</telerikDock:RadSplitContainer>

<telerikDock:RadSplitContainer Width="140" Height="Auto" InitialPosition="DockedRight" Grid.Row="2">

<telerikDock:RadPaneGroup >

<telerikDock:RadPane x:Name="PaneButtons" Header="Actions" IsTabStop="True" IsPinned="True" CanFloat="False" CanDockInDocumentHost="False" CanUserPin="False" CanUserClose="False" Background="#CCDDE4" >

<ScrollViewer VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" Padding="0" BorderThickness="0">

<Button Grid.Row="1" Content="test" Margin="50" />

</ScrollViewer>

</telerikDock:RadPane>

</telerikDock:RadPaneGroup>

</telerikDock:RadSplitContainer>

</telerikDock:RadDocking>

<Button Grid.Row="3" Content="Remove the second tile" Click="Button_Click" Margin="50" />

</Grid>

</UserControl>

1 Answer, 1 is accepted

answered on 24 Feb 2011, 01:42 PM

Hello Sathya Prasaad,

The TileView used to have some bad performance problems, but with Q1.2011 (we've just released the official Beta) we've release entirely new TileView, which is performing times faster, it's also virtualized and is doing Render animations, instead of Layout ones. You can give a try with the new TileView. We'll release the official version in a few weeks.
Thank you for your feedback.

Kind regards,
Miro Miroslavov
the Telerik team

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Rad Tile View - Performance Issue

1 Answer, 1 is accepted