在Windows Phone上设置ListView的GroupStyle.Panel

Question

我正在尝试创建一个ListViewwith grouping,其中每个组中的元素都是水平显示的(作为可滚动内容).无论我尝试了什么GroupStyle.Panel,ListView它似乎没有对列表有任何影响.

以下是我的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>

哪里

<Page.Resources>
   <DataTemplate x:Key="listItemTemplate">
      <Grid Width="144" Margin="5">
         <!-- details -->
      </Grid>
   </DataTemplate>
</Page.Resources>

下图显示了我得到的实际结果,右边显示了我想要的结果.

我尝试使用ItemsWrapGrid具有不同属性的a,我尝试过a StackPanel甚至是a VariableSizedWrapGrid,但是列表项的显示方式没有任何改变.

如何才能做到这一点？

Answer 1

@kubakista 是对的

看起来如果 ListView.ItemsPanel 包含 ItemsStackPanel 则 GroupStyle.Panel 将被忽略...

然而，改变这个并不能解决你的问题，因为 -

1. 滚动变得有点滞后。
2. 没有水平滚动。
3. 失去ListView虚拟化。
4. 漂亮的组标题滚动动画消失了。

这是一种替代方案，不改变其本身的结构ListView，但对数据结构进行一点修改。

这个想法是，将一组下的每个水平矩形列表视为UI 上的一个集合项。

这意味着， 中的每个组ListView只有一个子项，它实际上是将在水平滚动中呈现的矩形的集合ItemsControl。

因此，假设您有一些类型ObservableCollection<Item>为 的集合CollectionViewSource，则Item现在将变为 类型<ObservableCollection<Item>>以保存矩形集合。因此，集合的类型需要更新为类似ObservableCollection<ObservableCollection<Item>>.

ListView在s内部ItemTemplate，您需要创建一个水平滚动ScrollViewer并ItemsControl在里面放置一个。确保您已将后者设置ItemsSource为{Binding}。

要启用水平滑动，您需要通过编辑以下代码的默认样式并注释掉来禁用倾斜效果。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>
-->

我在这里附上了一个工作示例项目以及下面显示的屏幕截图。

希望这可以帮助！