Vertikales Trennzeichen in der ListBox-Gruppe
Ich habe eine ListBox , wo ich die Gruppierung basierend auf einer Eigenschaft wie folgt gemacht habe:
Und nach der Gruppierung möchte ich ein vertikales Trennzeichen zwischen den Gruppen hinzufügen und habe einen Code wie diesen geschrieben:
%Vor%Aber es sieht so aus:
Während ich möchte, dass ein Trennzeichen vollständig abfällt, aber wenn ich versuche, die Höhe des Trennzeichens zu erhöhen, gehen die Elemente mit.
2 Antworten
Diagnose
Wenn Sie Elemente in einem ListBox mit CollectionView + GroupStyle gruppieren, wird in ListBox eine Liste von Steuerelementen GroupItem angezeigt, die jeweils eine Gruppe von Elementen darstellen. A GroupItem besteht im Wesentlichen aus einem ContentPresenter (zum Präsentieren der Kopfzeile) und einem ItemsPresenter (zum Präsentieren von gruppierten Artikeln) in StackPanel .
Wenn Sie GroupStyle.HeaderTemplate angeben, wird es als ContentTemplate für die angegebene ContentPresenter verwendet. Wenn du also die Höhe von Separator erhöhst, ist sie immer noch in ContentPresenter enthalten, was dazu führt, dass sie vertikal wächst, und die Gegenstände werden immer noch darunter gestapelt - daher dein Ergebnis.
Lösung
Um Ihr Ziel zu erreichen, müssen Sie das GroupItem so anpassen, dass das Separator neben dem ContentPresenter und ItemsPresenter angezeigt wird, und es dann mit GroupStyle.ContainerStyle verbinden. Fügen Sie es zur Vereinfachung in ListBox.Resources dictionary:
Beachten Sie, dass ich das Trennzeichen aus der Header-Vorlage entfernt habe.
Hier sind mögliche Ergebnisse, die Sie vielleicht erhalten möchten (Ich habe einen blauen Rahmen um die ListBox gelegt, um # 3 und # 4 zu unterscheiden):
Der von mir bereitgestellte Code-Auszug liefert standardmäßig # 1 (alle Separatoren sind vertikal über den gesamten ListBox gestreckt).
Um # 2 zu erreichen (Trennzeichen nur bis zum letzten Element der entsprechenden Gruppe), sollten Sie <Setter Property="VerticalAlignment" Value="Top" /> zum GroupStyle.ContainerStyle hinzufügen. Alternativ könntest du es stattdessen auf die DockPanel in der GroupItem Vorlage setzen.
Um # 3 zu erhalten (Separatoren strecken sich auf die Höhe der größten Gruppe), sollten Sie VerticalAlignment="Top" zum Panel innerhalb des GroupStyle.Panel hinzufügen (das VirtualizingStackPanel in Ihrem Fall).
Und schließlich # 4 (das ListBox selbst ist auf die Größe der größten Gruppe beschränkt) kann erreicht werden, indem VerticalAlignment="Top" auf ListBox selbst gesetzt wird.
Ich kann mir keine Standardlösung vorstellen, da Sie versuchen, Gruppen zu pivotieren. Ich habe ein Beispiel gemacht, aber es kann nicht die Breite der Spalten innerhalb der Elemente Bereich, sondern im Header ohne Verwendung von Trennzeichen:
Code-Behind
%Vor%Gruppierung mit Ressourcen
%Vor%ListBox
%Vor% Der Schlüssel zu dieser Problemumgehung ist die Verwendung von GridViewColumnHeader als HeaderTemplate für den GroupStyle.
Eine bessere Lösung könnte sein, die ListBox in eine ListView zu ändern und die View -Eigenschaft der ListView auf GridView zu setzen. Dies erfordert jedoch eine Änderung der Datenstruktur.
Hinweis
Die Gruppierung der ListBox war nie dazu gedacht, die Aufgabe auszuführen, die Sie ausführen möchten. Der standardmäßige Weg mit Listbox und Gruppierung besteht darin, Expander im Inhaltsbereich der ListBox wie hier beschrieben zu haben