Horrible performance ListBox Wp7

Question

I have a ListBox with ~100 elements.

When I try to scroll, my listbox randomly freezing for 0-3 sec and often gets out beyond the scroll.When I removed all code which loads images the performance doesn't improved. If I replace the "refreshbox" in "listbox" the performance also doesn't improved. Please help me.

  <!--LayoutRoot is the root grid where all page content is placed-->
  <Grid x:Name="LayoutRoot">
    <!--Pivot Control-->
    <controls:Pivot Title="Новости" FontSize="17">
      <controls:Pivot.HeaderTemplate>
        <DataTemplate>
          <TextBlock Text="{Binding}" FontSize="28"/>
        </DataTemplate>
      </controls:Pivot.HeaderTemplate>
      <controls:PivotItem x:Name="zapisi" Header="записи" Margin="12,8,12,0" >

        <Grid Grid.Row="2" Grid.ColumnSpan="2" Margin="0,0,0,21" >
          <toolkit:PerformanceProgressBar
            VerticalAlignment="Top"
            x:Name="ProgBar"/>
          <sharpgis:RefreshBox PullRefresh="UpdateNews" IsSynchronizedWithCurrentItem="{x:Null}"   ScrollViewer.ManipulationMode="Control" x:Name="newslistBox">
            <sharpgis:RefreshBox.ItemTemplate>
              <DataTemplate>
                <local:FoodTemplateSelector Content="{Binding}">
                  <local:FoodTemplateSelector.WithAudio>
                    <DataTemplate>
                      <Grid Margin="{StaticResource PhoneTouchTargetOverhang}" Width="417">
                        <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="Auto" />
                          <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Image  Source="{Binding image_uri}" Width="50" Height="50" VerticalAlignment="Top" Stretch="None" />
                        <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="7,0,0,0" Width="380">
                          <Line  Stroke="#4284B0" StrokeDashArray="4 2" X2="380"/>
                          <TextBlock Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Margin="5,0,-17,0" MinHeight="20" Width="372" Text="{Binding author_name}">
                            <TextBlock.Foreground>
                                <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
                            </TextBlock.Foreground>
                          </TextBlock>
                          <TextBlock Foreground="Black" Margin="5,0,-5,0" MinHeight="30" RenderTransformOrigin="0.499,0.473" Text="{Binding text}"/>
                          <StackPanel Height="50" Orientation="Horizontal" Margin="5,0,4,0" MinHeight="50">
                            <TextBlock Text="{Binding audio_text}" Style="{StaticResource PhoneTextSmallStyle}" Margin="0" Width="223" TextWrapping="Wrap" MaxHeight="120">
                                <TextBlock.Foreground>
                                    <SolidColorBrush Color="{StaticResource PhoneBorderColor}"/>
                                </TextBlock.Foreground>
                            </TextBlock>
                            <Button Click="PlayMedia" Width="80"  Height="70" VerticalAlignment="Top" Padding="0" Content="Play" Margin="-8,-10,0,0" />
                            <Button Click="PauseMedia" Content="Pause"   Width="80" Padding="0"  Height="70" Margin="-13,-10,0,-10" />
                          </StackPanel>
                          <!--<MediaElement x:Name="audiop_Copy" Source="{Binding audioUri}" Stretch="None" HorizontalAlignment="Left" AutoPlay="False"/>-->
                          <TextBlock Text="{Binding Date_Time}" Style="{StaticResource PhoneTextSmallStyle}" Margin="5,0,0,0" Height="20" HorizontalAlignment="Left" Width="133"/>
                          <Image HorizontalAlignment="Right" Margin="0,-20,199,0" Source="/Images/like.png" Stretch="Fill" Width="20" VerticalAlignment="Top"/>
                          <TextBlock Style="{StaticResource PhoneTextSmallStyle}" Margin="164,-20,0,0" Width="77" HorizontalAlignment="Left" Height="20" Text="{Binding likes_count}"/>
                          <TextBlock Style="{StaticResource PhoneTextSmallStyle}" Margin="271,-20,0,0" Width="77" HorizontalAlignment="Left" Height="20" Text="{Binding comm_count}"/>
                          <Image Source="ico_comments.png" Stretch="Fill" HorizontalAlignment="Left" Width="20" Margin="245,-20,0,0" VerticalAlignment="Center"/>
                        </StackPanel>
                      </Grid>
                    </DataTemplate>
                  </local:FoodTemplateSelector.WithAudio>
                  <local:FoodTemplateSelector.WithPhoto>
                    <DataTemplate>
                      <Grid Margin="0,5">
                        <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="Auto"/>
                          <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Image  Source="{Binding image_uri}" Width="50" Height="50" VerticalAlignment="Top" Stretch="None" />
                        <StackPanel  Grid.Column="1" VerticalAlignment="Top" Width="380" Margin="5,0,0,0">
                          <Line  Stroke="#4284B0" StrokeDashArray="4 2" X2="380"/>
                          <TextBlock  Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" MinHeight="20" Width="365" Text="{Binding author_name}">
                    <TextBlock.Foreground>
                        <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
                    </TextBlock.Foreground>
                          </TextBlock>
                          <TextBlock Text="{Binding text}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" MinHeight="30" MinWidth="180"/>
                          <Image  Source="{Binding image_src}" HorizontalAlignment="Left" Stretch="None" Margin="{StaticResource PhoneHorizontalMargin}" />
                          <TextBlock Text="{Binding Date_Time}" Style="{StaticResource PhoneTextSmallStyle}" Margin="5,0,0,0" HorizontalAlignment="Left" Width="133"/>
                          <TextBlock Style="{StaticResource PhoneTextSmallStyle}" Margin="168,-21,0,0" Width="74" HorizontalAlignment="Left" Height="20" Text="{Binding likes_count}"/>
                          <TextBlock Style="{StaticResource PhoneTextSmallStyle}" Margin="270,-20,0,0" Width="77" HorizontalAlignment="Left" Height="20" Text="{Binding comm_count}"/>
                          <Image  HorizontalAlignment="Right" Margin="0,-17,215,0" Source="/Images/like.png" Stretch="Fill" Width="20"/>
                          <Image  Source="ico_comments.png" Stretch="Fill" HorizontalAlignment="Left" Width="20" Margin="247,-16,0,0"/>
                        </StackPanel>
                      </Grid>
                    </DataTemplate>
                  </local:FoodTemplateSelector.WithPhoto>
                  <local:FoodTemplateSelector.WithNote>
                    <DataTemplate >
                      <Grid Margin="{StaticResource PhoneTouchTargetOverhang}">
                        <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="Auto"/>
                          <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Image  Source="{Binding image_uri}" Width="50" Height="50" Margin="0,0,0,24"/>
                        <StackPanel Grid.Column="1" VerticalAlignment="Top" Width="380" >
                          <Line  Stroke="#4284B0" StrokeDashArray="4 2" X2="380"/>
                          <TextBlock  Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Margin="5,0,3,0" MinHeight="20" Width="372" Text="{Binding author_name}"/>
                          <TextBlock Text="{Binding text}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Margin="5,0,3,0" MinHeight="30" Width="372"/>
                          <TextBlock Text="{Binding Date_Time}" Style="{StaticResource PhoneTextSmallStyle}" Margin="5,0,0,0" Height="20" HorizontalAlignment="Left" Width="133"/>
                          <TextBlock Text="{Binding likes_count}" Style="{StaticResource PhoneTextSmallStyle}" Margin="169,-20,0,0" Height="20" Width="77" HorizontalAlignment="Left"/>
                          <TextBlock Text="{Binding comm_count}" Style="{StaticResource PhoneTextSmallStyle}" Margin="271,-20,0,0" Height="20" Width="77" HorizontalAlignment="Left"/>
                          <Image HorizontalAlignment="Right" Height="21" Margin="0,-19,214,0" Source="/Images/like.png" Stretch="Fill" Width="21"/>
                          <Image Source="ico_comments.png" Stretch="Fill" HorizontalAlignment="Left" Width="21" Height="21" Margin="246,-19,0,0" />
                        </StackPanel>
                      </Grid>
                    </DataTemplate>
                  </local:FoodTemplateSelector.WithNote>
                  <local:FoodTemplateSelector.WithLink>
                    <DataTemplate >
                      <Grid Margin="{StaticResource PhoneTouchTargetOverhang}">
                        <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="Auto"/>
                          <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding image_uri}" Width="50" Height="50" Margin="0,0,0,23"/>
                        <StackPanel  Grid.Column="1" VerticalAlignment="Top" Width="380"  Margin="7,0,-7,0">
                          <Line  Stroke="#4284B0" StrokeDashArray="4 2" X2="380"/>
                          <TextBlock  Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Margin="5,0,8,0" MinHeight="20" Text="{Binding author_name}">
                            <TextBlock.Foreground>
                                <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
                            </TextBlock.Foreground>
                          </TextBlock>
                          <TextBlock Text="{Binding text}"  Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Margin="5,0,8,0" MinHeight="30"/>
                          <TextBlock Text="{Binding Date_Time}" Style="{StaticResource PhoneTextSmallStyle}" Margin="5,0,0,0" Height="20" HorizontalAlignment="Left" Width="133"/>
                          <TextBlock Style="{StaticResource PhoneTextSmallStyle}" Margin="161,-20,0,0" Width="77" HorizontalAlignment="Left" Height="20" Text="{Binding likes_count}"/>
                          <TextBlock Style="{StaticResource PhoneTextSmallStyle}" Margin="271,-20,0,0" Width="77" HorizontalAlignment="Left" Height="20" Text="{Binding comm_count}"/>
                          <Image HorizontalAlignment="Right" Margin="0,-17,221,0" Source="/Images/like.png" Stretch="Fill" Width="20" VerticalAlignment="Top"/>
                          <Image Source="ico_comments.png" Stretch="Fill" HorizontalAlignment="Left" Width="20" Margin="245,-20,0,0" VerticalAlignment="Center"/>
                        </StackPanel>
                      </Grid>
                    </DataTemplate>
                  </local:FoodTemplateSelector.WithLink>
                  <local:FoodTemplateSelector.WithPoll>
                    <DataTemplate >
                      <Grid Margin="{StaticResource PhoneTouchTargetOverhang}">
                        <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="Auto"/>
                          <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding image_uri}" Width="50" Height="50" VerticalAlignment="Top" d:LayoutOverrides="Height" Stretch="None" />
                        <StackPanel  Grid.Column="1" VerticalAlignment="Top" Width="380"  Margin="5,0,0,0">
                          <Line  Stroke="#4284B0" StrokeDashArray="4 2" X2="380"/>
                          <TextBlock  Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Margin="5,0,3,0" MinHeight="20" Width="365" Text="{Binding author_name}">
                            <TextBlock.Foreground>
                                <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
                            </TextBlock.Foreground>
                          </TextBlock>
                          <TextBlock Text="{Binding text}"  Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Margin="5,0,3,0" MinHeight="30" Width="372"/>
                          <Image HorizontalAlignment="Left" Height="40" Source="Opros.png" Stretch="Fill" Width="40" Margin="5,-53,0,-86"/>
                          <TextBlock Text="{Binding poll_question}"  Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Margin="47,0,3,0" MinHeight="30">
                            <TextBlock.Foreground>
                                <SolidColorBrush Color="{StaticResource PhoneDisabledColor}"/>
                            </TextBlock.Foreground>
                          </TextBlock>
                          <TextBlock Text="{Binding Date_Time}" Style="{StaticResource PhoneTextSmallStyle}" Margin="5,0,0,0" Height="20" HorizontalAlignment="Left" Width="133"/>
                          <TextBlock Style="{StaticResource PhoneTextSmallStyle}" Margin="161,-20,0,0" Width="77" HorizontalAlignment="Left" Height="20" Text="{Binding likes_count}"/>
                          <TextBlock Style="{StaticResource PhoneTextSmallStyle}" Margin="271,-20,0,0" Width="77" HorizontalAlignment="Left" Height="20" Text="{Binding comm_count}"/>
                          <Image HorizontalAlignment="Right" Margin="0,-17,221,0" Source="/Images/like.png" Stretch="Fill" Width="20" VerticalAlignment="Top"/>
                          <Image Source="ico_comments.png" Stretch="Fill" HorizontalAlignment="Left" Width="20" Margin="245,-20,0,0" VerticalAlignment="Center"/>
                        </StackPanel>
                      </Grid>
                    </DataTemplate>
                  </local:FoodTemplateSelector.WithPoll>
                  <local:FoodTemplateSelector.WithStandart>
                    <DataTemplate >
                      <Grid Margin="{StaticResource PhoneHorizontalMargin}" Width="480">
                        <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="Auto"/>
                          <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding image_uri}" Width="50" Height="50" VerticalAlignment="Top" Stretch="None" />
                        <StackPanel  Grid.Column="1" >
                          <Line  Stroke="#4284B0" StrokeDashArray="4 2" X2="380"/>
                          <TextBlock  Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Margin="{StaticResource PhoneHorizontalMargin}" MinHeight="20" Text="{Binding author_name}">
                        <TextBlock.Foreground>
                            <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
                        </TextBlock.Foreground>
                          </TextBlock>
                          <TextBlock Text="{Binding text}"  Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Margin="{StaticResource PhoneHorizontalMargin}" MinHeight="40" MaxHeight="180"/>
                          <TextBlock Text="{Binding Date_Time}" Style="{StaticResource PhoneTextSmallStyle}" Margin="{StaticResource PhoneHorizontalMargin}" Height="20" HorizontalAlignment="Left" Width="133"/>
                          <TextBlock Text="{Binding likes_count}" Style="{StaticResource PhoneTextSmallStyle}" Margin="181,-20,0,0" Height="20" Width="77" HorizontalAlignment="Left"/>
                          <TextBlock Text="{Binding comm_count}" Style="{StaticResource PhoneTextSmallStyle}" Margin="289,-20,0,0" Height="20" Width="77" HorizontalAlignment="Left"/>
                          <Image Height="21" Margin="154,-19,0,0" Source="/Images/like.png" Stretch="Fill" HorizontalAlignment="Left" Width="21"/>
                          <Image Source="ico_comments.png" Stretch="Fill" HorizontalAlignment="Left" Width="21" Height="21" Margin="264,-19,0,0" />
                        </StackPanel>
                      </Grid>
                    </DataTemplate>
                  </local:FoodTemplateSelector.WithStandart>
                </local:FoodTemplateSelector>
              </DataTemplate>
            </sharpgis:RefreshBox.ItemTemplate>
            <sharpgis:RefreshBox.ItemsPanel>
              <ItemsPanelTemplate>
                <StackPanel/>
              </ItemsPanelTemplate>
            </sharpgis:RefreshBox.ItemsPanel>
          </sharpgis:RefreshBox>
        </Grid>
      </controls:PivotItem>
      <controls:PivotItem x:Name="otmetki"  Header="отметки">
        <Grid/>
      </controls:PivotItem>
      <controls:PivotItem x:Name="photo"  Header="фотографии">
        <Grid/>
      </controls:PivotItem>
      <controls:PivotItem x:Name="druzja"  Header="друзья">
        <Grid/>
      </controls:PivotItem>
    </controls:Pivot>
  </Grid>
</phone:PhoneApplicationPage>

Answer 1

did you try a VirtualizingStackPanel ?

<sharpgis:RefreshBox.ItemsPanel>
    <ItemsPanelTemplate>
        <VirtualizingStackPanel/>
    </ItemsPanelTemplate>
</sharpgis:RefreshBox.ItemsPanel>

if your ListBox is databound to your data, the data assignation will freeze the UI. you could try this :

public ObservableCollection<object> MyCollectionProperty { get; set; }
public void SetValues(IEnumerable<object> values)
{
      MyCollectionProperty = new ObservableCollection<object>();
      foreach (var item in values)
      {
          var addingItem=item;
          Dispatcher.BeginInvoke(() => MyCollectionProperty.Add(addingItem));
      }
}

Answer 2

There are a number of things to watch for: see the blog post on MSDN about this topic.

Looking at the XAML it looks like you've got some complex UserControls or maybe even nested ListBoxes. That's known to be bad for scrolling perf: ideally all the elements of a ListBox should be the same known size to give good performance.