Can the groups of a grouped CollectionView be presented horizontally?

Question

I'm implementing a ListBox whose ItemsPanel is a WrapPanel as per this answer, but there's a twist: my ItemsSource is a grouped CollectionView. With a GroupStyle applied to my ListBox, the wrapping shown in that question doesn't work: the groups are always displayed vertically.

Snooping on my app, here's why:

As you can see, the WrapPanel, defined as my ListBox's ItemsPanelTemplate, appears in the ItemsPresenter within each GroupItem; an implicit, vertically-oriented StackPanel (top item in the pink box) is created to contain the GroupItems themselves.

Is there a way to override this behavior, so the GroupItems are placed in a WrapPanel? Would I have to re-template the entire ListBox?

Update: To illustrate what I'm actually doing with my ListBox and the CollectionView grouping, let me post a little XAML:

<Grid>
    <ListBox ItemsSource="{Binding}"                 
             ScrollViewer.VerticalScrollBarVisibility="Disabled"
             SelectionMode="Multiple"
             ItemContainerStyle="{StaticResource itemStyle}">
        <ListBox.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListBox.GroupStyle>
        <ListBox.ItemTemplate>
            <DataTemplate DataType="{x:Type WpfApplication1:Item}">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding Name}" FontSize="10"/>
                    <TextBlock Text="{Binding Amount, StringFormat={}{0:C}}" FontSize="10"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>
</Grid>

The GroupStyle is at the heart of it: if you remove that, the GroupItems don't get rendered, and the WrapPanel (which you can see appearing beneath the GroupItem in the screenshot above) appears in place of (StackPanel) 98 in the screenshot.

Quibbling

Why is your WrapPanel's Orientation set to Vertical if you want a horizontal list? I can't quite visualize what it is you are aiming for. – Address

@H.B. If you have it set to Vertical, but disable the Vertical scrollbar, the WrapPanel will grab extra rows as you increase its height, but will only scroll items offscreen horizontally. Check the "multicolumn listbox" answer I linked to above for a good visualization of what I mean. – Quibbling

Answer 1

This behavior only seems to occur if you have defined a HeaderTemplate in the GroupStyle.

It can be corrected by setting the GroupStyle.Panel property to contain a WrapPanel:

<ListBox.GroupStyle>
    <GroupStyle>
        <GroupStyle.HeaderTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
            </DataTemplate>
        </GroupStyle.HeaderTemplate>
        <GroupStyle.Panel>
            <ItemsPanelTemplate>
                <WrapPanel></WrapPanel>
            </ItemsPanelTemplate>
        </GroupStyle.Panel>
    </GroupStyle>
</ListBox.GroupStyle>

It will look something like this:

Spancel

GroupStyle.Panel was the missing piece! Thanks for your help, Greg. :) – Quibbling

Answer 2

You should be able to replace the group style from the items control (ListBox):

<ListBox.GroupStyle>
    <Style />
<ListBox.GroupStyle/>

Or, you should also be able to create a DataTemplate based on the group item object:

<DataTemplate DataType="{x:Type GroupItem}">
    <Panel />
</DataTemplate>

Dragline

Thanks for the suggestion, but won't that just style/template each GroupItem, not change the container around the set of GroupItems? – Quibbling