Rad Tile View - Performance Issue

2 posts, 0 answers
  1. Sathya Prasaad
    Sathya Prasaad avatar
    5 posts
    Member since:
    Apr 2010

    Posted 21 Feb 2011 Link to this post

    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>

  2. Miro Miroslavov
    Admin
    Miro Miroslavov avatar
    588 posts

    Posted 24 Feb 2011 Link to this post

    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!
  3. DevCraft banner
Back to Top