Group items in WPF WrapPanel

Question

Using a ListBox with a WrapPanel set as the ItemsPanel, I am trying to achieve what is illustrated in this image:

However, currently the WrapPanel wraps like this:

The underlying model looks like this:

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

public class GreenRectangle : IRectangle
{

}

public class BlueRectangle : IRectangle
{

}

public interface IRectangle
{

}

The XAML looks like this:

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

The application is built on: WPF, PRISM, C# 6.0, .NET 4.0 and the MVVM pattern.

Here are some additional requirements/information:

The width and height of the WrapPanel may change at runtime.
The width and height of the rectangles are fixed.
The underlying model guarantees that the items of the Rectangles collection always alternate, that the collection always starts with a GreenRectangle, and that every GreenRectangle is always followed by exactly one BlueRectangle.
The GreenRectangle and BlueRectangle must be separately selectable.

Is there any way I can achieve what is illustrated on the first image? Can I somehow tell the WrapPanel to always wrap after a BlueRectangle or after an even item index? Or somehow "group" or pair a GreenRectangle with a BlueRectangle? I have looked into using a CollectionView but it doesn't seem to solve what I'm trying to achieve.

Any ideas and suggestions are welcome.

The green+blue should be a single item for this, otherwise, well, you can make [own panel](http://www.wpftutorial.net/CustomLayoutPanel.html) to arrange layout for pair of items or implementing similar to winforms [`FlowLayoutPanel` break](http://stackoverflow.com/q/5054622/1997232) . — Sinatr, Jun 30 '16 at 13:13
Well, if you're up for a really cheap solution, just tell the WrapPanel its MaxWidth is whatever the width of 2 blue and green rectangles is. Then it has to wrap the way you want. — Logan, Jun 30 '16 at 14:56
If you feel that an answer helped you, you could [accept that answer](http://meta.stackexchange.com/a/5235). — lokusking, Jul 06 '16 at 07:21

score 2 · Answer 1 · edited Jun 30 '16 at 13:37

2

To consistently achieve the affect you are looking for switch to a UniformGrid instead of an WrapPanel.

There you can set the amount of Rows and Columns

edited Jun 30 '16 at 13:37

ΩmegaMan

29,542
12
100
122

answered Jun 30 '16 at 13:16

lokusking

7,396
13
38
57

score 0 · Answer 2 · edited May 23 '17 at 12:33

0

I found that multiple articles with similar issue are pointing to the same thing UniformGrid.

Specify the max number of columns for a WrapPanel in WPF

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

I didn't try then so I'm not sure if they work but since they are both resolved I assume the do work.

edited May 23 '17 at 12:33

Community

1
1

answered Jun 30 '16 at 20:51

ivg

439
4
7

Group items in WPF WrapPanel

2 Answers2