WP8中的LongListSelector的scrollTo函數的性能滯後？

Question

要在這裏展示的問題是我的代碼隱藏

public partial class MainPage : PhoneApplicationPage 
{ 
    ObservableCollection<ABC> listTest = new ObservableCollection<ABC>(); 
    // Constructor 
    public MainPage() 
    { 
     InitializeComponent(); 

     for (int i = 0; i < 50; i++) 
     { 
      ABC conv = new ABC(string.Format("Test:{0}", i)); 
      listTest.Add(conv); 
     } 
     testLls.ItemsSource = listTest; 
    } 

    private void Button_Tap_1(object sender, System.Windows.Input.GestureEventArgs e) 
    { 
     testLls.ScrollTo(listTest[listTest.Count - 1]); 
    } 

    private void TitlePanel_Tap_1(object sender, System.Windows.Input.GestureEventArgs e) 
    { 
     Stopwatch st = Stopwatch.StartNew(); 

     testLls.ScrollTo(listTest[listTest.Count - 1]); 
     st.Stop(); 
     Debug.WriteLine("tttt:", st.ElapsedMilliseconds); 
    } 

    class ABC 
    { 
     private string _name; 

     public ABC(string aa) 
     { 
      this._name = aa; 
     } 

     public string Name 
     { 
      get 
      { 
       return _name; 
      } 
     } 

     public Visibility GroupMemberVisibility 
     { 
      get 
      { 
       return Visibility.Collapsed; 
      } 
     } 
    } 
} 

XAML代碼

 <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28" Tap="TitlePanel_Tap_1"> 
     <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/> 
     <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
    </StackPanel> 

    <!--ContentPanel - place additional content here--> 
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
     <phone:LongListSelector Name="testLls" VirtualizingStackPanel.VirtualizationMode="Standard" > 
      <phone:LongListSelector.ItemTemplate> 
       <DataTemplate x:Name="dtRecievedBubbleText" > 
        <Grid x:Name="LayoutRoot" Background="Transparent" Margin="24 0 0 14" HorizontalAlignment="Left"> 

         <Grid.RowDefinitions> 
          <RowDefinition Height="14" /> 
          <RowDefinition Height="Auto" /> 
         </Grid.RowDefinitions> 
         <Grid Grid.Row="1"> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="Auto" /> 
           <RowDefinition Height="Auto" /> 
           <RowDefinition Height="Auto" /> 
          </Grid.RowDefinitions> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto"/> 
          </Grid.ColumnDefinitions> 
          <Rectangle Grid.RowSpan="3" Fill="{Binding BubbleBackGroundColor}" /> 
          <TextBlock Text="test" Visibility="{Binding GroupMemberVisibility}" FontSize="22" FontFamily="Segoe WP Semibold" Margin="12, 12, 0, 0" /> 
          <TextBlock Grid.Row="2" Text="{Binding Name}" HorizontalAlignment="Right" Margin="0,0,12,6" FontSize="18" /> 
         </Grid> 
        </Grid> 
       </DataTemplate> 
      </phone:LongListSelector.ItemTemplate> 
     </phone:LongListSelector> 

    </Grid> 

碼輕敲頭的一長串選擇方含的elemnts滾動至底部。當元素的值從30-50-100個元素變化時，觀察到的時間是20ms，744ms，815ms。測試是用諾基亞Lumia 620完成的。

在本示例中，項目模板非常簡單，但在實際場景中我的項目爲templates are much more complex。因此在這種情況下所花的時間是1753ms for 100 elements。

爲什麼這麼龐大time difference。 Can this be improved以任何方式？

有沒有人注意到了這一點？

Answer 1

有一個解決方法來解決這個問題。

從lls中提取視口，然後設置視口原點。

要提取視口，我們必須在XAML

<Style x:Name="llsMessagesStyle" TargetType="phone:LongListSelector"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="phone:LongListSelector"> 
        <Grid Background="{TemplateBinding Background}" d:DesignWidth="480" d:DesignHeight="800"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="ScrollStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition GeneratedDuration="00:00:00.5"/> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="Scrolling"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="NotScrolling"/> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Grid Margin="0"> 
          <ViewportControl x:Name="ViewportControl" HorizontalContentAlignment="Stretch" VerticalAlignment="Bottom" Loaded="ViewPortLoaded"/> 
          <ScrollBar x:Name="VerticalScrollBar" Style="{StaticResource ChatThemeScrollBarStyle}" Opacity="0" Margin="2 0 2 0" Orientation="Vertical" HorizontalAlignment="Right" Width="5" ValueChanged="vScrollBar1_ValueChanged" /> 
         </Grid> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

添加樣式在後面的代碼：

ViewportControl llsViewPort; 
    private void ViewPortLoaded(object sender, RoutedEventArgs e) 
    { 
     llsViewPort = sender as ViewportControl; 
    } 

private void ScrollToBottom() 
    { 
     if (llsViewPort != null) 
      llsViewPort.SetViewportOrigin(new System.Windows.Point(0, llsViewPort.Bounds.Height)); 
    } 

這樣我們就可以實現所需的功能。