Setting GroupStyle.Panel ListView on Windows Phone

Question

I am trying to create a grouped ListView where the items in each group are displayed horizontally (as scrollable content). No matter what I tried using GroupStyle.Panel ListView , this does not affect the list.

This is what my XAML looks like:

  <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 that I get, and on the right, what I want to have.

I tried using ItemsWrapGrid with different properties, I tried StackPanel and even VariableSizedWrapGrid , but nothing changed in the way the list items are displayed.

How can I do that?

Answer 1

@kubakista was right about

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

However, changing this will not solve your problem, because -

• Scrolling becomes a little lagged.
• No horizontal scrolling.
• ListView loses virtualization.
• The beautiful animation for the group header has been removed.

---

Here is an alternative without changing the structure of the ListView itself, but slightly altering your data structure.

The idea is to consider each horizontal list of rectangles under a group as one collection item in the user interface.

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

So, suppose you have a collection of type ObservableCollection<Item> as CollectionViewSource , Item will now become a type of <ObservableCollection<Item>> to save the collection of rectangles. Therefore, the collection type will need to be updated to the value ObservableCollection<ObservableCollection<Item>> .

Inside the ListView ItemTemplate you need to create a horizontal scroll of the ScrollViewer and place it inside the ItemsControl . Make sure you set the last ItemsSource to {Binding} .

To enable horizontal scrolling, you need to disable the tilt effect by editing the default ListViewItem style 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 attached a working example of the project here , as well as the screenshot shown below.

Hope this helps!