Performances de la liste déroulante WPF multicolumn lors du défilement

Question

Comment créer une ListView/ListBox multicolonne dans WPF avec de bonnes performances. Je sais comment le faire avec WrapPanel. Dans le ListBox j'ai environ 70-150 éléments et le défilement est laggy/pas si fluide (comme avec VirtualStackPanel). Savez-vous comment résoudre ce problème? Merci

est ListBox XAML

<ListBox x:Name="ListBoxSubtitles" VirtualizingStackPanel.IsVirtualizing="True" Margin="0,0,0,0" ItemsSource="{Binding Subtitle,Mode=TwoWay}" Grid.Row="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderBrush="{x:Null}" Background="#FFEEECEC" 
       > 
      <ListBox.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapPanel Orientation="Horizontal" /> 
       </ItemsPanelTemplate> 
      </ListBox.ItemsPanel> 

       <ListBox.ItemTemplate> 
       <DataTemplate> 
        <Grid Width="520" Height="150" Background="#FF424242" Margin="5,5,5,0"> 

         <Grid.RowDefinitions> 
         </Grid.RowDefinitions> 
         <Grid.ColumnDefinitions> 

          <ColumnDefinition Width="85"/> 
          <ColumnDefinition Width="*"/> 
         </Grid.ColumnDefinitions> 
         <Image Source="{Binding PosterImgUri,Mode=TwoWay}" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="UniformToFill"> 
          <Image.Effect> 
           <BlurEffect Radius="40" /> 
          </Image.Effect> 
         </Image> 
         <Image Width="75" Height="110" Grid.Column="0" Margin="2,2,2,2" VerticalAlignment="Top" HorizontalAlignment="Stretch" Source="{Binding PosterImgUri,Mode=TwoWay}" Stretch="Fill"/> 

         <Label Grid.Column="0" Content="86%" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Bottom" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Semibold" FontSize="18" FontWeight="Bold"/> 
         <StackPanel Grid.Column="1"> 
          <Label HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Semibold" FontSize="25" FontWeight="Bold"> 
           <TextBlock TextWrapping="Wrap" Text="{Binding SubtitleName,Mode=TwoWay}"> 
           </TextBlock> 
          </Label> 
          <Grid> 
           <Label Content="Stažení:" HorizontalAlignment="Left" Margin="0,-7,0,0" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Light" FontSize="18"/> 
           <Label Content="{Binding subtitleName,Mode=TwoWay}" HorizontalAlignment="Left" Margin="65,-7,0,0" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Light" FontSize="18"/> 
          </Grid> 
          <Grid Width="100" Height="20" Margin="0,0,0,0" HorizontalAlignment="Left"> 
           <ProgressBar Value="50" HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="7,0,0,0" Foreground="#FF84E60F" Background="White"/> 
           <Label Margin="0,-2,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" Content="50" FontSize="10" FontWeight="Bold"></Label> 
          </Grid> 
         </StackPanel> 


        </Grid> 



    </DataTemplate> 
    </ListBox.ItemTemplate> 
    </ListBox> 

aussi je voudrais ici demander comment supprimer cette sélection en bleu lorsque la souris se concentre élément.

Answer 1

Vous avez besoin d'un panneau de virtualisation. Malheureusement, l'écriture d'un tel type de panneau n'est pas facile et la plupart des bonnes implémentations ne sont pas gratuites ou ne fonctionnent pas pour des modèles de données complexes arbitraires.

Vous pouvez rendre les liaisons d'image asynchrones à l'aide de la propriété IsAsync.

Une autre approche consiste à réduire l'arbre visuel, ce qui n'est pas une option, parce que vous allez après la qualité. Vous pouvez déplacer la disposition à partir du DataTemplate dans un UserControl dédié et charger les images uniquement lorsque le contrôle est visible (l'événement VisibilityChanged ou le rectangle se croisent).