Gruppenpositionen in WPF WrapPanel

Question

eine List-Box mit einem WrapPanel Satz als Itemspanel benutzen, ich versuche zu erreichen, was in diesem Bild dargestellt ist:

jedoch derzeit der WrapPanel wie diese wickelt:

Das zugrunde liegende Modell sieht wie folgt aus:

public class ViewModel 
{ 
    public ObservableCollection<IRectangle> Rectangles { get; set; }; 
} 

public class GreenRectangle : IRectangle 
{ 

} 

public class BlueRectangle : IRectangle 
{ 

} 

public interface IRectangle 
{ 

} 

XAML-Look s wie folgt aus:

<ListBox ItemsSource="{Binding Rectangles}"> 
    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel IsItemsHost="True" Orientation="Horizontal" /> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    <ListBox.Resources> 
     <DataTemplate DataType="{x:Type GreenRectangle}"> 
      <Border Background="Green" Height="100px" Width="100px" /> 
     </DataTemplate> 
     <DataTemplate DataType="{x:Type BlueRectangle}"> 
      <Border Background="Green" Height="100px" Width="20px" /> 
     </DataTemplate> 
    </ListBox.Resources> 
</ListBox> 

Die Anwendung auf gebaut ist: WPF, PRISM, C# 6.0, .NET 4.0 und das MVVM-Muster.

Hier sind einige zusätzliche Anforderungen/Informationen:

• Die Breite und Höhe des WrapPanel zur Laufzeit ändern können.
• Die Breite und Höhe der Rechtecke sind festgelegt.
• Das zugrundeliegende Modell garantiert, dass die Elemente der Rectangles-Sammlung immer alternieren, dass die Sammlung immer mit einem GreenRectangle beginnt und dass jedem GreenRectangle immer genau ein BlueRectangle folgt.
• Der GreenRectangle und der BlueRectangle müssen separat ausgewählt werden.

Kann ich irgendwie erreichen, was auf dem ersten Bild dargestellt ist? Kann ich dem WrapPanel irgendwie sagen, dass es immer nach einem BlueRectangle oder nach einem geraden Item-Index umbrochen werden soll? Oder irgendwie "gruppieren" oder ein GreenRectangle mit einem BlueRectangle paaren? Ich habe versucht, eine CollectionView zu verwenden, aber sie scheint nicht zu lösen, was ich erreichen möchte.

Alle Ideen und Vorschläge sind willkommen.

Answer 1

Um konsequent den Effekt zu erreichen, den Sie suchen, wechseln Sie zu einem UniformGrid anstelle eines WrapPanel.

Dort können Sie die Menge der Zeilen gesetzt und Columns

Answer 2

ich, dass mehrere Artikel mit ähnlichem Problem gefunden UniformGrid auf dasselbe hinaus zeigen.

Specify the max number of columns for a WrapPanel in WPF

und Is there an alternative to a WPF WrapPanel that wraps after a certain number of items, not a height?

ich nicht versuchen dann, so bin ich nicht sicher, ob sie arbeiten, aber da sie beide gelöst sind gehe ich davon aus, die Arbeit tun.