[英]Setting the GroupStyle.Panel of a ListView on Windows Phone
I'm trying to create a ListView
with grouping where the elements in each group are shown horizontally (as a scrollable content). 我正在尝试使用分组创建一个
ListView
,其中每个组中的元素都是水平显示的(作为可滚动内容)。 No matter what I tried with the GroupStyle.Panel
of the ListView
it doesn't seem to have any effect on the list. 无论我尝试使用
ListView
的GroupStyle.Panel
,它似乎对列表没有任何影响。
Here is how my XAML looks: 以下是我的XAML的外观:
<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. 我尝试使用具有不同属性的
ItemsWrapGrid
,我尝试了StackPanel
甚至是VariableSizedWrapGrid
,但是列表项的显示方式没有任何改变。
How can this be done? 如何才能做到这一点?
@kubakista was right about @kubakista是对的
It looks like if ListView.ItemsPanel contains ItemsStackPanel then GroupStyle.Panel is ignored...
如果ListView.ItemsPanel包含ItemsStackPanel,则会忽略GroupStyle.Panel ...
However, changing this won't solve your problem as - 但是,更改此项不会解决您的问题 -
ListView
loses virtualization. ListView
失去了虚拟化。 Here is an alternative without changing the structure of the ListView
itself but a little bit modification in your data structure. 这里有一个替代方案,不需要改变
ListView
本身的结构,而是对数据结构进行一些修改。
The idea is, treat each horizontal list of rectangles under a group as one collection item on the UI. 这个想法是,将组下的每个水平矩形列表视为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
. 这意味着,
ListView
每个组只有一个子节点,它实际上是将在水平可滚动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. 因此,假设您有一些类型为
ObservableCollection<Item>
的CollectionViewSource
作为CollectionViewSource
, Item
现在将成为<ObservableCollection<Item>>
类型,以便保存矩形集合。 Therefore, the type of the collection will need to be updated to something like ObservableCollection<ObservableCollection<Item>>
. 因此,需要将集合的类型更新为类似
ObservableCollection<ObservableCollection<Item>>
。
Inside the ListView
's ItemTemplate
, you will need to create a horizontally scrolling ScrollViewer
and put an ItemsControl
inside. 在
ListView
的ItemTemplate
,您需要创建一个水平滚动的ScrollViewer
并将ItemsControl
放入其中。 Make sure you have set the latter's ItemsSource
to {Binding}
. 确保将后者的
ItemsSource
设置为{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. 要启用水平滑动,您需要通过编辑
ListViewItem
的默认样式并注释掉以下代码来禁用倾斜效果。
<!--
<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! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.