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>
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));
}
}