WPF WrapPanel中的组项目

Question

使用带有WrapPanel设置为ItemsPanel的ListBox，我试图实现此图中所示的内容：

但是，目前WrapPanel的包装方式如下：

基础模型如下所示：

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

public class GreenRectangle : IRectangle
{

}

public class BlueRectangle : IRectangle
{

}

public interface IRectangle
{

}

XAML看起来像这样：

<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>

该应用程序构建于：WPF，PRISM，C＃6.0，.NET 4.0和MVVM模式。

以下是一些其他要求/信息：

• WrapPanel的宽度和高度可能会在运行时发生变化。
• 矩形的宽度和高度是固定的。
• 底层模型保证Rectangles集合的项始终交替，集合始终以GreenRectangle开头，并且每个GreenRectangle始终后跟一个BlueRectangle。
• GreenRectangle和BlueRectangle必须单独选择。

有什么方法可以实现第一张图片上的图片？我可以以某种方式告诉WrapPanel总是在BlueRectangle之后或在偶数项索引之后换行吗？或者以某种方式“组合”或将GreenRectangle与BlueRectangle配对？我已经研究过使用CollectionView但它似乎没有解决我想要实现的目标。

欢迎任何想法和建议。

Answer 1

要始终如一地实现您想要切换到UniformGrid而不是WrapPanel的影响。

您可以设置行数和Columns

Answer 2

我发现有多个类似问题的文章指向同一个问题UniformGrid。

Specify the max number of columns for a WrapPanel in WPF

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

我当时没有尝试，所以我不确定它们是否有效，但既然它们都已经解决了，我认为它确实有效。