[Solved] RadDataBoundListBox performance issues

[Eugene]

In trying to figure out why a particular page takes a long time to load in my app, I've been profiling, and seem to have narrowed the problem down to RadDataBoundListBox in the control. The slowdown only happens when it's displaying items; empty it's pretty fast. My item initialization is happening from a database, and on a separate thread. I add items one-by-one into an ObservableCollection once all the items have been loading into a temporary list; I've got about 30 items overall.

The ItemTemplate is admittedly pretty heavyweight. Enclosing below for reference. Any suggestions would be highly appreciated, specifically around which parts of this template may be responsible for most of the delay.

Thanks!

<DataTemplate x:Key="HistoryItemTemplate">
    <Grid>
      <telerikPrimitives:RadExpanderControl>
        <telerikPrimitives:RadExpanderControl.AnimatedIndicatorContentTemplate>
          <DataTemplate/>
        </telerikPrimitives:RadExpanderControl.AnimatedIndicatorContentTemplate>

        <telerikPrimitives:RadExpanderControl.ContentTemplate>
          <DataTemplate>
            <Grid Margin="0,0,0,8">
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
              </Grid.ColumnDefinitions>
              <Border Background="{StaticResource PhoneAccentBrush}" RenderTransformOrigin="0.5,0.5" Margin="12,0,0,0">
                <Border.RenderTransform>
                  <CompositeTransform SkewX="30"/>
                </Border.RenderTransform>
                <StackPanel Orientation="Horizontal">
                  <TextBlock Grid.Column="0" FontSize="{StaticResource PhoneFontSizeMedium}"
                             Text="{Binding RunDateString}" Foreground="White"
                             RenderTransformOrigin="0.5,0.5" Margin="12,0">
                    <TextBlock.RenderTransform>
                      <CompositeTransform SkewX="-30"/>
                    </TextBlock.RenderTransform>
                  </TextBlock>
                  <ListBox ItemsSource="{Binding UploadedLocations}" ItemTemplate="{StaticResource UploadLocationsStyle}" Margin="12,2,8,2" ItemsPanel="{StaticResource HistoryUploadedLayout}" IsHitTestVisible="False">
                    <ListBox.RenderTransform>
                      <CompositeTransform SkewX="-30"/>
                    </ListBox.RenderTransform>
                  </ListBox>
                </StackPanel>
              </Border>
              <TextBlock Grid.Column="2" Text="{Binding Distance.Value, StringFormat=\{0:n1\}}" FontSize="{StaticResource PhoneFontSizeMedium}"/>
              <TextBlock Grid.Column="3" Text="{Binding Distance.Unit}" FontSize="{StaticResource PhoneFontSizeMedium}" Margin="0,0,8,0"/>
              <Path CacheMode="BitmapCache" Grid.ColumnSpan="4" Data="M20.5,29.3333 L44.0006,29.3333" Fill="{StaticResource PhoneAccentBrush}"
                    Height="1" Margin="44,0,0,0" Stretch="Fill" Stroke="{StaticResource PhoneAccentBrush}" UseLayoutRounding="False" VerticalAlignment="Bottom"/>
            </Grid>
          </DataTemplate>
        </telerikPrimitives:RadExpanderControl.ContentTemplate>
        <telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>
          <DataTemplate>
            <Grid Margin="24,4,0,8">
              <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
              </Grid.ColumnDefinitions>
              <TextBlock Text="{Binding LocalizedResources.HistoryTotalTime, Source={StaticResource LocalizedStrings}}" Style="{StaticResource HeaderStyle}"/>
              <TextBlock Text="{Binding TotalTime.Value}" Grid.Column="1" Style="{StaticResource ValueStyle}"/>
              <TextBlock Text="{Binding LocalizedResources.HistoryWorkoutTime, Source={StaticResource LocalizedStrings}}" Grid.Row="1" Style="{StaticResource HeaderStyle}"/>
              <TextBlock Text="{Binding ExerciseTime.Value}" Grid.Column="1" Style="{StaticResource ValueStyle}" Grid.Row="1"/>
              <TextBlock Text="{Binding LocalizedResources.HistoryCalories, Source={StaticResource LocalizedStrings}}" Grid.Row="2" Style="{StaticResource HeaderStyle}"/>
              <TextBlock Text="{Binding CaloriesBurned.Value, StringFormat=\{0:n1\}}" Grid.Column="1" Style="{StaticResource ValueStyle}" Grid.Row="2"/>
              <TextBlock Text="{Binding LocalizedResources.HistoryAverageSpeed, Source={StaticResource LocalizedStrings}}" Grid.Row="3" Style="{StaticResource HeaderStyle}"/>
              <TextBlock Text="{Binding LocalizedResources.HistoryPeakSpeed, Source={StaticResource LocalizedStrings}}" Grid.Row="4" Style="{StaticResource HeaderStyle}"/>
              <StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="3" Margin="8,0,0,0">
                <TextBlock Text="{Binding AverageSpeed.Value, StringFormat=\{0:n1\}}" Style="{StaticResource ValueStyle}"/>
                <TextBlock Text="{Binding AverageSpeed.Unit}" Margin="6,0,0,0" Style="{StaticResource ValueStyle}"/>
              </StackPanel>
              <StackPanel Orientation="Horizontal" Grid.Row="4" Grid.Column="1" Margin="8,0,0,0">
                <TextBlock Text="{Binding TopSpeed.Value, StringFormat=\{0:n1\}}" Style="{StaticResource ValueStyle}" />
                <TextBlock Text="{Binding TopSpeed.Unit}" Margin="6,0,0,0" Style="{StaticResource ValueStyle}"/>
              </StackPanel>
            </Grid>
          </DataTemplate>
        </telerikPrimitives:RadExpanderControl.ExpandableContentTemplate>

      </telerikPrimitives:RadExpanderControl>
    </Grid>
  </DataTemplate>

[Deyan]

Hi Eugene,

Thanks for writing and for the provided details.

My initial suggestion would be to try simplifying your template. DataBoundListBox does nothing more than creating visual containers (ContentControl instances) and setting their DataContext and Content properties so I doubt if any optimizations are possible in that context.

A possible approach would be to explicitly set sizes of the elements in your Item Template, introduce Canvas panels and explicitly position your elements within them.

Anyway, if you think that there's something that might not be working as expected in RadDataBoundListBox, please send us a sample project that reproduces the case so that we can take a look.

You will need to open a new support ticket to be able to attach your project.

I hope this helps.

Greetings,
Deyan
the Telerik team