WPF ListView avec disposition horizontale des éléments?

Question

Je veux disposer les éléments dans une liste dans une manière similaire à l'WinForms ListView en mode Liste. C'est, où les éléments sont disposés non seulement verticalement, mais horizontalement dans la ListView.

Je n'ai pas l'esprit si les éléments sont disposés comme ceci:

1 4 7
2 5 8
3 6 9

Ou comme ceci:

1 2 3
4 5 6
7 8 9

Tant qu'ils sont présentés à la fois verticalement et horizontalement afin de maximiser l'utilisation de l'espace disponible.

Le plus proche que j'ai pu trouver a cette question:

http://stackoverflow.com/questions/359217/how-do-i-make-wpf-listview-items-repeat-horizontally-like-a-horizontal-scrollbar

Qui s'étend seulement les articles uniquement à l'horizontale.

Answer 1

Cela ressemble à ce que vous cherchez est un WrapPannel, ce qui permettra de poser les éléments horizontalement jusqu'à ce qu'il n'y a plus de place, et puis passer à la ligne suivante, comme ceci:

(MSDN)

Vous pouvez aussi utiliser un UniformGrid, ce qui permettra de poser les éléments dans un certain nombre de lignes ou de colonnes.

La façon dont nous obtenons les éléments à arange à l'aide de ces panneaux dans une ListView, zone de liste, ou de toute forme de ItemsControl est de changer le ItemsPanel de la propriété. En définissant la ItemsPanel vous pouvez modifier le nom par défaut StackPanel qui est utilisé par ItemsControls. Avec le WrapPanel nous devons également définir les largeurs comme montré ici.

<ListView>
   <ListView.ItemsPanel>
      <ItemsPanelTemplate>
         <WrapPanel Width="{Binding (FrameworkElement.ActualWidth), 
            RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
            ItemWidth="{Binding (ListView.View).ItemWidth, 
            RelativeSource={RelativeSource AncestorType=ListView}}"
            MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
            ItemHeight="{Binding (ListView.View).ItemHeight, 
            RelativeSource={RelativeSource AncestorType=ListView}}" />
      </ItemsPanelTemplate>
   </ListView.ItemsPanel>
...
</ListView>

Answer 2

Récemment, je suis à la recherche pour atteindre cet objectif dans WPF et a trouvé une bonne solution. Ce que je voulais, c'était de le reproduire le mode de Liste dans l'Explorateur Windows, c'est à dire de haut en bas, puis de gauche à droite.

Fondamentalement, ce que vous voulez faire remplacer l' ListBox.ItemsPanel propriété à utiliser un WrapPanel avec l'orientation de l'ensemble à la Verticale.

<ListBox>
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>      
      <WrapPanel Orientation="Vertical"/>
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
</ListBox>

Cependant, cela VA être lent lors du chargement d'un grand ensemble de données, comme il l'écharpe n'est pas virtualisé. Ce qui est important. Donc, cette tâche devient un peu plus que maintenant, vous devez écrire votre propre VirtualizedWrapPanel en étendant VirtualizedPanel et la mise en œuvre de IScrollInfo.

public class VirtualizedWrapPanel : VirtualizedPanel, IScrollInfo
{
   // ...
}

Voilà ce que j'ai trouvé dans mes recherches avant de devoir passer à une autre tâche. Si vous souhaitez plus d'informations ou des exemples, s'il vous plaît commentaire.

La mise à JOUR. Ben Constable a une grande série sur la façon de mettre en œuvre IScrollInfo.

Il y a 4 articles au total. Une très bonne lecture.

Depuis, j'ai mis en place un virtualisé envelopper le panneau, il n'est pas une tâche facile, même avec l'aide de cette série d'articles.

Answer 3

Dans mon cas, la meilleure option consistait à utiliser:

         <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Vertical"
                    MaxHeight="{Binding (FrameworkElement.ActualHeight), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                               ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
                               MinHeight="{Binding ItemHeight, RelativeSource={RelativeSource Self}}"
                               ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
 

Cela m'a donné un analogue décent à l'option Liste de l'Explorateur Windows

Answer 4

pour gauche à droite puis utilisation de haut en bas

       <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" 
                     MaxWidth="{Binding ActualWidth, Mode=OneWay, 
                       RelativeSource={RelativeSource FindAncestor, 
                       AncestorType={x:Type er:MainWindow}}}"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>