listbox裏面的ScrollViewer - 凍結程序

Question

我需要一些建議。我們注意到了ScrollViewer中的不尋常行爲。當StackPanel放置在ScrollViewer中時，我有一個StackPanel與其中的更多項目，包括ListBox，當將數據加載到列表框時，程序暫時停頓。當我獨自一人ListBox，但一切正常，不凍結的程序。

這裏是我的代碼：

<ScrollViewer VerticalScrollBarVisibility="Auto"> 
     <StackPanel x:Name="tStack" > 
      <Grid Height="300"> 

      </Grid> 
      <Grid Height="300"> 

      </Grid> 
      <ListBox x:Name="ListBox1" ItemsSource="{Binding AlbumsCvs.View, IsAsync=True}" 
          Style="{StaticResource ListBoxAlbumsTracksStyles}" 
          VirtualizingStackPanel.IsVirtualizing="True" 
          VirtualizingPanel.IsVirtualizingWhenGrouping="True" 
          VirtualizingStackPanel.VirtualizationMode="Recycling" > 
       <ListBox.GroupStyle> 
        <GroupStyle ContainerStyle="{StaticResource AlbumsHeader}" /> 
       </ListBox.GroupStyle> 
      </ListBox> 
     </StackPanel> 
    </ScrollViewer> 



<Style x:Key="ListBoxAlbumsTracksStyles" TargetType="{x:Type ListBox}"> 
     <Setter Property="Padding" Value="0,0,0,0" /> 
     <Setter Property="Margin" Value="0,0,0,0" /> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /> 
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" /> 
     <Setter Property="ItemTemplate"> 
      <Setter.Value> 

       <DataTemplate > 
        <DockPanel> 
         <Border Background="#00000000" 
          Height="36" 
          Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollContentPresenter}}}"> 

          <DockPanel> 
           <TextBlock x:Name="TrackNumber" 
             DockPanel.Dock="Left" Margin="2,0,5,0" 

             Text="{Binding TrackNumber}" 
             VerticalAlignment="Center" 
             FontSize="13" 
             MinWidth="17" 
             Foreground="Black"/> 
           <DockPanel> 
            <TextBlock DockPanel.Dock="Left"            
              Text="{Binding TrackTitle}" 
              TextAlignment="Left" 
              FontSize="13" 
              VerticalAlignment="Center" 
              HorizontalAlignment="Stretch" 
              TextTrimming="CharacterEllipsis" 
              Margin="0,0,2,0"/> 
            <TextBlock DockPanel.Dock="Right" 
              Text="{Binding Duration}" 
              VerticalAlignment="Center" 
              HorizontalAlignment="Stretch" 
              TextTrimming="CharacterEllipsis" 
              Margin="0,0,10,0" 
              FontSize="13" TextAlignment="Right"/>          
           </DockPanel> 
          </DockPanel> 
         </Border> 
        </DockPanel> 
       </DataTemplate> 
      </Setter.Value> 
     </Setter> 

    </Style> 

    <!-- GroupItem --> 
    <Style x:Key="AlbumsHeader" TargetType="{x:Type GroupItem}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate> 
        <Border Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollContentPresenter}}}" Background="#00000000"> 
         <StackPanel Margin="0,0,0,15"> 
          <StackPanel> 
           <TextBlock Text="{Binding AlbumName}" 
           DataContext="{Binding Items}" 
           Margin="0,5,0,0" 
           HorizontalAlignment="Stretch" 
           FontSize="20" 
           FontWeight="Light" 
           TextTrimming="CharacterEllipsis" 
           Foreground="Black"/> 
           <TextBlock Text="{Binding IdAlbum}" 
           DataContext="{Binding Items}" 
           Margin="0,0,0,10" 
           HorizontalAlignment="Stretch" 
           TextTrimming="CharacterEllipsis" 
           Foreground="Black"/> 
          </StackPanel> 
          <ItemsPresenter HorizontalAlignment="Stretch"/> 
         </StackPanel> 

        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

後面的代碼：

private async Task AlbumsArtistInformation() 
    { 

     if (string.IsNullOrEmpty(ArtistName)) 
      return; 

     ObservableCollection<AlbumsArtistCollections> _albumsArtistCollections = 
      new ObservableCollection<AlbumsArtistCollections>(); 

     try 
     { 
      var search = await spotifyDataService.GetArtists(ArtistName); 
      if (search == null) throw new ArgumentNullException(nameof(search)); 



      foreach (var _artist in search.Artists.Items.Take(1)) 
      { 
       this.IdArtist = _artist.Id; 
      } 


      var _artistAlbum = await spotifyDataService.GetArtistsAlbumsAsync(this.IdArtist, AlbumType.All); 
      if (_artistAlbum == null) throw new ArgumentNullException(nameof(_artistAlbum)); 

      _albumsArtistCollections = _artistAlbum; 

     } 
     finally 
     { 

      // Unbind to improve UI performance 
      Application.Current.Dispatcher.Invoke(() => 
      { 
       this.Albums = null; 
       this.AlbumsCvs = null; 
      }); 




      Application.Current.Dispatcher.Invoke(() => 
      { 
       this.Albums = _albumsArtistCollections; 
      }); 




      Application.Current.Dispatcher.Invoke(() => 
      { 
       // Populate CollectionViewSource 
       this.AlbumsCvs = new CollectionViewSource { Source = this.Albums }; 

       //Group by Album if needed 
       this.AlbumsCvs.GroupDescriptions.Add(new PropertyGroupDescription("IdAlbum")); 
      }); 


     } 
    } 

有誰知道如何解決這個問題。

Answer 1

在佈局過程中，垂直定向的StackPanel爲ListBox提供了一個無限可用空間，當它調用MeasureOverride(Size availableSize)方法時。因此，ListBox（默認情況下使用虛擬化）應該創建整個項目，這就是爲什麼程序凍結了一會兒。

因此，使用DockPanel中代替：

<DockPanel x:Name="tStack" LastChildFill="True" > 
    <Grid DockPanel.Dock="Top" Height="300"> 

    </Grid> 
    <Grid DockPanel.Dock="Top" Height="300"> 

    </Grid> 
    <ListBox DockPanel.Dock="Bottom" x:Name="ListBox1" ItemsSource="{Binding AlbumsCvs.View, IsAsync=True}" 
         Style="{StaticResource ListBoxAlbumsTracksStyles}" 
         VirtualizingStackPanel.IsVirtualizing="True" 
         VirtualizingPanel.IsVirtualizingWhenGrouping="True" 
         VirtualizingStackPanel.VirtualizationMode="Recycling" > 
     <ListBox.GroupStyle> 
      <GroupStyle ContainerStyle="{StaticResource AlbumsHeader}" /> 
     </ListBox.GroupStyle> 
    </ListBox> 
</DockPanel> 

LastChildFill默認爲true。 ListBox應該是最後一個元素，以填充空間。

作爲另一個選項，您可以設置ListBox的Height，把DockPanel在ScrollViewer或者你可以考慮用分離器作爲另一個選項Grid。