2010-09-08 9 views
2

J'ai un ListView avec beaucoup de données (plus de 200 articles) afin d'économiser de l'espace, il est fait usage d'un UniformGrid pour afficher 3 colonnes au lieu de 1meilleure approche pour la liste multi-colonnes WPF vue

<ListView.ItemsPanel> 
    <ItemsPanelTemplate> 
     <UniformGrid Columns="3" /> 
    </ItemsPanelTemplate> 
</ListView.ItemsPanel> 

Je modifie aussi le style de sorte que chaque élément est aligné sur le haut

<ListView.Resources> 
    <Style TargetType="{x:Type ListView}"> 
     <Setter Property="ItemContainerStyle"> 
      <Setter.Value> 
       <Style TargetType="ListViewItem"> 
        <Setter Property="VerticalContentAlignment" Value="Top"/> 
       </Style> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</ListView.Resources> 

Cela fonctionne bien, mais en raison de différences dans la longueur des données affichées, il y a encore l'espace gaspillée dans des groupes d'articles, car la plupart des données tient sur une seule ligne, mais parfois il y a un élément qui occupe 2 lignes ou plus. Cela signifie que toutes les lignes d'un groupe prennent 2 ou plusieurs lignes quand il est seulement 1 ligne qui a besoin de l'espace supplémentaire

alt text

Est-ce que quelqu'un sait comment résoudre ce problème, ou peut suggérer une autre approche pour éviter le UniformGrid? Merci!

Répondre

5

Vous pouvez utiliser un WrapPanel vertical et désactiver le défilement vertical. Cela entraînera l'affichage des éléments dans les colonnes avec des colonnes supplémentaires ajoutées à droite, similaire à l'affichage de la liste dans l'Explorateur Windows. Vous pouvez définir Width ou MaxWidth sur ListViewItems si vous ne souhaitez pas qu'une seule ligne de texte long développe la colonne entière.

<ListView ScrollViewer.VerticalScrollBarVisibility="Disabled"> 
    <ListView.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel Orientation="Vertical"/> 
     </ItemsPanelTemplate> 
    </ListView.ItemsPanel> 
    <ListView.ItemContainerStyle> 
     <Style TargetType="ListViewItem"> 
      <Setter Property="MaxWidth" Value="100"/> 
     </Style> 
    </ListView.ItemContainerStyle> 

Vous pouvez utiliser une WrapPanel horizontale normale et si vous désactivez le défilement horizontal, bien moins que les éléments ont une largeur fixe qui sera probablement gênant pour l'utilisateur.

+0

Merci Quartermeister, j'ai essayé votre approche, mais elle a seulement créé une seule colonne, plutôt que 3? – si618

+1

@Si: Cette approche commence avec une seule colonne et ajoute plus de colonnes à mesure que le nombre d'éléments augmente, plutôt que de commencer avec une seule ligne et d'ajouter plus de lignes que la vôtre, donc si vous avez peu d'éléments, une colonne. L'avez-vous dans un panneau qui permet le défilement vertical? Il créera seulement des colonnes supplémentaires quand il manque d'espace vertical, c'est pourquoi j'ai désactivé la barre de défilement verticale sur le ListView, mais si le ListView lui-même est dans un ScrollViewer alors il peut encore se développer verticalement. – Quartermeister

+0

Salut Quartermesiter, ça l'a expliqué! – si618

Questions connexes