Obtention de la virtualisation de l'interface utilisateur avec ItemsControl dans Silverlight

Question

J'essaie de créer une liste déroulante de blocs de texte assez volumineux. Je veux qu'il y ait une barre de défilement verticale pour tous les montrer, et s'ils débordent d'une certaine taille, je veux qu'ils affichent une ellipse. En fait, tout cela fonctionne plutôt bien.

J'ai la XAML Silverlight suivante:

<Grid x:Name="LayoutRoot" MaxWidth="500" MinWidth="100" 
    MaxHeight="500" MinHeight="100"> 
    <Grid.DataContext> 
     <app:MainPageViewModel/> 
    </Grid.DataContext> 
    <ScrollViewer> 
    <ItemsControl ItemsSource="{Binding TextItems}" Margin="0,20,0,20"> 
     <ItemsControl.ItemTemplate><DataTemplate> 
      <Border MaxHeight="175" Margin="0,0,0,18" CornerRadius="5"> 
       <TextBlock Margin="2" TextTrimming="WordEllipsis" 
        TextWrapping="Wrap" Text="{Binding}"/> 
      </Border> 
     </DataTemplate></ItemsControl.ItemTemplate> 
    </ItemsControl> 
    </ScrollViewer> 
</Grid> 

Mon problème est que cette disposition n'utilise pas la virtualisation de l'interface utilisateur, comme un VirtualizingStackPanel. Donc c'est assez lent. Quel est le meilleur moyen d'intégrer la virtualisation de l'interface utilisateur dans cette mise en page? J'ai essayé une demi-douzaine de façons différentes et rien n'a vraiment bien fonctionné.

J'ai réussi à obtenir ce fonctionnement dans un ListBox car il semble prendre en charge la virtualisation dès le départ. Cependant, je préférerais utiliser ItemsControl car je ne veux pas que ces choses soient sélectionnables, et je ne veux pas le style qui accompagne un ListBox.

Cela Silverlight 4.

Answer 1

Il y a quelques choses que vous devez faire pour faire ce travail.

1. Réglez le ItemsPanelTemplate pour votre ItemsControl à un VirtualizingStackPanel.
2. Incorporer le ScrollViewer à l'intérieur un ControlTemplate pour votre ItemsControl au lieu de simplement en l'enveloppant autour de l'extérieur.
3. Assurez-vous que ItemsControl a une hauteur fixe afin que le système de mise en page puisse déterminer le nombre d'éléments dont il a besoin pour remplir la fenêtre. (On dirait que vous faites déjà cela en mettant ItemsControl dans une grille - qui permettra au système de mise en page pour déterminer la hauteur alloted pour le contrôle)

Voici l'exemple le plus simple je pourrais trouver de ce travail :

<ItemsControl ItemsSource="{Binding TextItems}"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <VirtualizingStackPanel /> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.Template> 
      <ControlTemplate TargetType="ItemsControl"> 
       <Border> 
        <ScrollViewer> 
         <ItemsPresenter/> 
        </ScrollViewer> 
       </Border> 
      </ControlTemplate> 
     </ItemsControl.Template> 
    </ItemsControl>