7

我正在尝试创建一个ListViewwith 分组，其中每个组中的元素水平显示（作为可滚动内容）。无论我尝试了什么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 ，我尝试了 aStackPanel甚至 a VariableSizedWrapGrid，但是列表项的显示方式没有任何改变。

如何才能做到这一点？

4

1 回答 1

4

@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'sItemTemplate中，您将需要创建一个水平滚动ScrollViewer并放置一个ItemsControlinside。确保您已将后者设置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>
-->

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

在此处输入图像描述

希望这可以帮助！

于 2014-12-28T04:39:37.327 回答