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

Bookrack

doesn't windows phone have a stackpanel ' – Chastity

Yes, and? You're too vague. – Bookrack

StackPanel Orientation="Horizontal" – Chastity

I've tried much harder than that. If that worked (I mentioned in the last paragraph that I tried that, but you probably did not pay attention) I would not have asked this on SO. – Bookrack

Check my sample. It looks like if ListView.ItemsPanelcontains ItemsStackPanel then GroupStyle.Panel is ignored... – Knout

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!

Jewett

Do you have any idea why ListView.ItemsPanel influences GroupStyle.Panel? – Knout

@kubakista, I am just guessing here - before win8.1, ListView's default ItemsPanel was VirtualizingStackPanel which doesn't virtualize when grouping is enabled. So in 8.1 they introduced this new ItemsStackPanel which also does virtualization for grouped data. However, when they implemented the virtualization logic, they must have only taken vertically stacked data (under each group) into consideration. So it always assumes the grouped data flows down and this might have affected the Panel of the GroupStyle. – Jewett

I'm not sure I understand why a collection of collections is needed here, but it does work. The source of the listview is a collection of Groups, and each group has a collection of collections of Items. I don't fully understand why was that necessary, and a simple collection of items in the group did not work, but I'm glad to award you the bounty points. – Bookrack

Thanks, let me try to explain the logic a little bit clearer. A simple collection won't give you a vertically stacked grouped list with horizontal scrollable data - this was the problem you were having. My solution is, still keep the ListView displaying data vertically, but each item will have an inner collection which is bound to a horizontally stacked ItemsControl (take a look at the ItemsControl inside the ListView's data template). Doing this will require a collection of collections as each item will have another collection to populate the ItemsControl. Make more sense? – Jewett

@JustinXL, the link you provided with the sample project isn't working for me, do you have an updated link? Thanks – Presa

@JustinXL, the link you provided with the sample project cannot open ?It shows "This Link doesn't work anymore". Can u share the code to work on the thing which i need. Thanks – Gaynell

@Gaynell it's still there. Log in with your Microsoft account. – Jewett

@JustinXL, I login through my Microsoft account but i didn't get code – Gaynell

@JustinXL Please do some needy i can't get the solution – Gaynell