Setting the GroupStyle.Panel of a ListView on Windows Phone - xaml

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 the GroupStyle.Panel of the ListView it doesn't seem to have any effect on the list.
Here is how my XAML looks:
<ListView x:Name="itemListView"
Padding="10"
SelectionMode="None"
IsSwipeEnabled="False"
IsItemClickEnabled="True"
ItemTemplate="{StaticResource listItemTemplate}">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<ItemsWrapGrid ItemWidth="144" Orientation="Horizontal" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding DisplayTitle}"
Margin="0,10,0,5"
Foreground="Black"
Style="{StaticResource SubheaderTextBlockStyle}"
TextWrapping="NoWrap" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
Where
<Page.Resources>
<DataTemplate x:Key="listItemTemplate">
<Grid Width="144" Margin="5">
<!-- details -->
</Grid>
</DataTemplate>
</Page.Resources>
The following image shows on the left the actual result I get, and on the right what I want to have.
I tried using a ItemsWrapGrid with different properties, I tried a StackPanel and even an VariableSizedWrapGrid, but nothing changed in the way the list items are displayed.
How can this be done?

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 -
The scrolling becomes a bit laggy.
There is no horizontal scrolling.
The ListView loses virtualization.
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!