如何讓ListBox順利滾動

Question

有一個列表框與下面的ItemContainerStyle，它綁定到ViewModel類但滾動列表框時其性能不光滑。我在網上檢查了這個，我用列表框中的普通堆棧面板替換了visualstackpanel。是的，它可以順利滾動，但數據加載時會凍結。有什麼我可以做的嗎？

<Style TargetType="ListBoxItem" x:Key="ListBoxItem"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="BorderThickness" Value="0" /> 
     <Setter Property="BorderBrush" Value="Transparent" /> 
     <Setter Property="Padding" Value="0" /> 
     <Setter Property="HorizontalContentAlignment" Value="Left"/> 
     <Setter Property="VerticalContentAlignment" Value="Top"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ListBoxItem"> 
        <Border x:Name="LayoutBorder" BorderThickness="0.3,0.3,0.3,0.3" BorderBrush="LightCoral" CornerRadius="10" Margin="0,0.2,0,0.2"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1" /> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutBorder" Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="#1BA1E2"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Gray"/> 
             </ObjectAnimationUsingKeyFrames> 
             <DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" /> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="SelectionStates"> 
           <VisualState x:Name="Unselected"/> 
           <VisualState x:Name="Selected"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutBorder" Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="#1BA1E2"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutBorder" Storyboard.TargetProperty="BorderThickness"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="0.6"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NameTextBlock" Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="#E09728"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RepostTextBlock" Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="#1BA1E2"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CommentTextBlock" Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="#1BA1E2"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FriendBorder" Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="#1BA1E2"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Grid> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="64" /> 
           <ColumnDefinition Width="80" /> 
           <ColumnDefinition Width="130" /> 
           <ColumnDefinition Width="170" /> 
          </Grid.ColumnDefinitions> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="37" /> 
           <RowDefinition Height="37" /> 
           <RowDefinition Height="*" /> 
           <RowDefinition Height="*" /> 
           <RowDefinition Height="*" /> 
          </Grid.RowDefinitions> 

          <Border Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" x:Name="FriendBorder" BorderThickness="2" Margin="10,10,0,10" CornerRadius="5"> 
           <Image Height="50" Width="50" HorizontalAlignment="Center" VerticalAlignment="Top" Source="{Binding ImageUrl, Mode=OneWay}" > 
            <Image.Clip> 
             <RectangleGeometry RadiusX="5" RadiusY="5" Rect="0, 0, 50, 50" /> 
            </Image.Clip> 
           </Image> 
          </Border> 

          <TextBlock x:Name="NameTextBlock" Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="1" Margin="10,6,0,0" Text="{Binding ScreenName, Mode=OneWay}" Style="{StaticResource NameTextBlockStyle}" /> 
          <TextBlock x:Name="DateTextBlock" Grid.Row="0" Grid.Column="3" Margin="0,6,0,0" Text="{Binding Date, Mode=OneWay}" Style="{StaticResource MidelTextBlock}" /> 

          <TextBlock x:Name="RepostTextBlock" Grid.Row="1" Grid.Column="1" Margin="10,6,0,0" Text="{Binding RepostNumb, Mode=OneWay}" Style="{StaticResource SmallTextBlock}"/> 
          <TextBlock x:Name="CommentTextBlock" Grid.Row="1" Grid.Column="2" Margin="10,6,0,0" Text="{Binding CommentNumb, Mode=OneWay}" Style="{StaticResource SmallTextBlock}" /> 
          <TextBlock x:Name="SourceTextBlock" Grid.Row="1" Grid.Column="3" Margin="0,3,0,0" Text="{Binding Source, Mode=OneWay}" Style="{StaticResource MidelTextBlock}" /> 
          <TextBlock Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="2" Width="440" Text="{Binding Content, Mode=OneWay}" TextWrapping="Wrap" Margin="0,5,0,2" Style="{StaticResource PhoneTextSubtleStyle}" /> 
          <Border Visibility="{Binding IsBusy}" Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="3" Background="Gray" Width="420" Padding="5" CornerRadius="15,18,30,10" BorderThickness="2, 3, 1, 0.5" BorderBrush="Chocolate"> 
           <TextBlock x:Name="OriginalTextBlock" Width="400" Margin="0,2,0,5" Text="{Binding Original, Mode=OneWay}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}" /> 
          </Border> 
          <Image Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="4" Stretch="None" Margin="0,2,0,2" HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding ImageUrl}" > 
          </Image> 
         </Grid> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Answer 1

考慮將某些工作推入線程，使用Observable集合並嘗試在UI中使用虛擬化列表來幫助解決一些速度問題。

這幫了我一些忙。 http://blog.landdolphin.net/?p=78

Answer 2

有時我看Silverlight電視，發現一個很好的提示。

不要讓任何圖片下載發生時滾動：圖片上的長列表框 下載應該 由ScrollViewer中 狀態和位置進行控制，以優化 網絡活動，也將是 有效下載 基於隊列的後臺線程系統中的圖像。 這將通過僅下載可見的 圖像集來確保滾動性能 ，這也僅當滾動活動停止時才如此。

檢查this博客文章。

Answer 3

從UI線程加載圖像將有助於提高性能。一個簡單的方法是使用LowProfileImageLoader from David Anson。

Peter Torr has created a LazyListBox其中在滾動時使用簡化的模板。絕對檢查這篇文章。

在看你的模板看起來很複雜的ListBoxItem。我強烈建議您重新考慮是否可以使用更簡單的模板（也許將一些文本從UI中組合出來，以便可以一次綁定多個字段）和/或減少顯示的每個項目的信息量。也許將一些細節移到另一個頁面。