Setting the GroupStyle.Panel of a ListView on Windows Phone

Question

I\'m trying to create a ListView with grouping where the elements in each group are shown horizontally (as a scrollable content). No matter what I tried with th

Answer 1

@kubakista was right about

It looks like if ListView.ItemsPanel contains ItemsStackPanel then GroupStyle.Panel is ignored...

However, changing this won't solve your problem as -

1. The scrolling becomes a bit laggy.
2. There is no horizontal scrolling.
3. The ListView loses virtualization.
4. The nice group header rolling up animation is gone.

---

Here is an alternative without changing the structure of the ListView itself but a little bit modification in your data structure.

The idea is, treat each horizontal list of rectangles under a group as one collection item on the UI.

This means, each group in the ListView will only have one child, which is actually a collection of rectangles that will be presented in an horizontal scrollable ItemsControl.

So, assume you have some collection of type ObservableCollection<Item> as the CollectionViewSource, the Item will now become type of <ObservableCollection<Item>> in order to hold the collection of rectangles. Therefore, the type of the collection will need to be updated to something like ObservableCollection<ObservableCollection<Item>>.

Inside the ListView's ItemTemplate, you will need to create a horizontally scrolling ScrollViewer and put an ItemsControl inside. Make sure you have set the latter's ItemsSource to {Binding}.

To enable horizontal swiping, you will need to disable the tilt effect by editing the default style of ListViewItem and commenting out the following code.

<!--
<VisualStateGroup.Transitions>
    <VisualTransition From="Pressed" To="Normal">
        <Storyboard>
            <PointerUpThemeAnimation Storyboard.TargetName="TiltContainer"/>
        </Storyboard>
    </VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed">
    <Storyboard>
        <PointerDownThemeAnimation Storyboard.TargetName="TiltContainer"/>
    </Storyboard>
</VisualState>
-->

I have attached a working sample project here as well as a screenshot shown below.

Hope this helps!