Настройка GroupStyle.Panel для ListView на Windows Phone

Question

Я пытаюсь создать ListView с группировкой, где элементы в каждой группе показаны горизонтально (как прокручиваемый контент). Независимо от того, что я пробовал с 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 с разными свойствами, я попробовал StackPanel и даже VariableSizedWrapGrid, но ничего не изменилось в способе отображения элементов списка.

Как это может быть сделано?

Answer 1

@kubakista был прав насчет

Похоже, если ListView.ItemsPanel содержит ItemsStackPanel, то GroupStyle.Panel игнорируется...

Однако изменение этого не решит вашу проблему, так как -

1. Прокрутка становится немного запаздывающей.
2. Горизонтальной прокрутки нет.
3. ListView теряет виртуализацию.
4. Хорошая анимация сворачивания заголовка группы исчезла.

---

Вот альтернатива без изменения структуры ListView сама по себе, но немного модификация в вашей структуре данных.

Идея состоит в том, чтобы обрабатывать каждый горизонтальный список прямоугольников в группе как один элемент коллекции в пользовательском интерфейсе.

Это означает, что каждая группа в 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>
-->

Я приложил рабочий пример проекта и скриншот, показанный ниже.

Надеюсь это поможет!