This is a migrated thread and some comments may be shown as answers.
Rad Tile View - Performance Issue
1 Answer 79 Views
This is a migrated thread and some comments may be shown as answers.
Sathya Prasaad
Top achievements
Rank 1
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: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 />
            <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

Sort by
0
Miro Miroslavov
Telerik team
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!
Asked by
Sathya Prasaad
Top achievements
Rank 1
Answers by
Miro Miroslavov
Telerik team
Share this question
or