7

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.

enter image description here

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?

Marius Bancila
  • 16,053
  • 9
  • 49
  • 91

1 Answers1

4

@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.

enter image description here

Hope this helps!

Justin XL
  • 38,763
  • 7
  • 88
  • 133
  • Do you have any idea why `ListView.ItemsPanel` influences `GroupStyle.Panel`? – Jakub Krampl Dec 28 '14 at 15:30
  • 2
    @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`. – Justin XL Dec 28 '14 at 21:50
  • 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 `Group`s, and each group has a collection of collections of `Item`s. 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. – Marius Bancila Dec 29 '14 at 21:10
  • 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? – Justin XL Dec 29 '14 at 22:32
  • @JustinXL, the link you provided with the sample project isn't working for me, do you have an updated link? Thanks – Pedro Jul 31 '15 at 21:15
  • @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 – Anbarasi Aug 30 '16 at 09:03
  • @Anbarasi it's still there. Log in with your Microsoft account. – Justin XL Aug 30 '16 at 09:05
  • @JustinXL, I login through my Microsoft account but i didn't get code – Anbarasi Aug 30 '16 at 09:13
  • @JustinXL Please do some needy i can't get the solution – Anbarasi Aug 30 '16 at 11:45