设置ListView的GroupStyle.Panel在Windows Phone [英] Setting the GroupStyle.Panel of a ListView on Windows Phone

问题描述

我试图创建一个的ListView 与分组，每个组中的元素水平显示（作为滚动内容）。不管是什么我试图与 GroupStyle.Panel 的的ListView 它似乎并没有对任何影响名单。

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.

下面是我的XAML的样子：

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>

其中，

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

我试图用一个 ItemsWrapGrid 具有不同的属性，我尝试了的StackPanel 甚至是 VariableSizedWrapGrid ，但没有在显示列表项的方式改变了。

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.

如何才能做到这一点？

推荐答案

@kubakista是对的。

@kubakista was right about

它看起来像如果ListView.ItemsPanel包含ItemsStackPanel然后
  GroupStyle.Panel被忽略......

It looks like if ListView.ItemsPanel contains ItemsStackPanel then GroupStyle.Panel is ignored...

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

However, changing this won't solve your problem as -

1. 的滚动变得有点laggy。


2. 有没有水平滚动。


3. 的的ListView 失去虚拟化。


4. 的好处组头卷起的动画已经一去不复返了。

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.

下面是在不改变结构的替代的的ListView 本身，而是在你的数据结构一点点修改。

---

Here is an alternative without changing the structure of the ListView itself but a little bit modification in your data structure.

我们的想法是，治疗组下矩形每个水平名单的一个集合项目​​的UI上。

The idea is, treat each horizontal list of rectangles under a group as one collection item on the UI.

这意味着，每个组中的的ListView 将只有一个孩子，这实际上是矩形的集合，将在一个水平滚动psented <$ P $ code>的ItemsControl 。

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.

因此​​，假设您有类型的某些集合的ObservableCollection＆LT;项目＆GT; 为 Col​​lectionViewSource 的项目现在将成为＆LT的类型;的ObservableCollection＆LT;项目＆GT;＆GT; 以保持矩形的集合。因此，集合类型将需要更新的东西像的ObservableCollection＆LT;＆的ObservableCollection LT;项目＆GT;方式＆gt;

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

在 ListView控件的的ItemTemplate ，你需要创建一个水平滚动 的ScrollViewer ，把一个的ItemsControl 里面。请确保您已设置了后者的的ItemsSource 到 {结合} 。

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

要启用水平刷卡，你需要禁用的倾斜的通过编辑 ListViewItem的的默认样式和注释掉以下$ C的影响$ C。

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.

希望这有助于！

这篇关于设置ListView的GroupStyle.Panel在Windows Phone的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！