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?
@kubakista was right about
However, changing this won't solve your problem as -
ListView
loses virtualization.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 scrollableItemsControl
.So, assume you have some collection of type
ObservableCollection<Item>
as theCollectionViewSource
, theItem
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 likeObservableCollection<ObservableCollection<Item>>
.Inside the
ListView
'sItemTemplate
, you will need to create a horizontally scrollingScrollViewer
and put anItemsControl
inside. Make sure you have set the latter'sItemsSource
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.I have attached a working sample project here as well as a screenshot shown below.
Hope this helps!