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

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

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


listview xaml itemspaneltemplate groupstyle windows-phone-8.1
person Marius Bancila    schedule 22.12.2014    source источник
comment
разве в Windows Phone нет панели стека '   -  person eran otzap    schedule 28.12.2014
comment
Да и? Вы слишком расплывчаты.   -  person Marius Bancila    schedule 28.12.2014
comment
Ориентация StackPanel = Горизонтальная   -  person eran otzap    schedule 28.12.2014
comment
Я пытался гораздо больше, чем это. Если бы это сработало (в последнем абзаце я упомянул, что пробовал это, но вы, наверное, не обратили внимания), я бы не спрашивал об этом на SO.   -  person Marius Bancila    schedule 28.12.2014
comment
Проверьте мой образец. Похоже, если ListView.ItemsPanelсодержит ItemsStackPanel, то GroupStyle.Panel игнорируется...   -  person Jakub Krampl    schedule 28.12.2014

Ответы (1)


arrow_upward
4
arrow_downward

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

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

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

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

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

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

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

Итак, предположим, что у вас есть некоторая коллекция типа ObservableCollection<Item> в качестве CollectionViewSource, Item теперь станет типом <ObservableCollection<Item>>, чтобы содержать коллекцию прямоугольников. Поэтому тип коллекции нужно будет обновить до чего-то вроде ObservableCollection<ObservableCollection<Item>>.

Внутри ItemTemplate ListView вам нужно будет создать 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>
-->

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

введите здесь описание изображения

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

person Justin XL    schedule 28.12.2014
comment
У вас есть идеи, почему ListView.ItemsPanel влияет на GroupStyle.Panel? - person Jakub Krampl; 28.12.2014
comment
@kubakista, я просто предполагаю, что до win8.1 ListView по умолчанию ItemsPanel был VirtualizingStackPanel, который не виртуализируется при включенной группировке. Итак, в 8.1 они представили этот новый ItemsStackPanel, который также выполняет виртуализацию для сгруппированных данных. Однако при реализации логики виртуализации они должны были учитывать только вертикально расположенные данные (в каждой группе). Таким образом, всегда предполагается, что сгруппированные данные передаются вниз, и это могло повлиять на Panel из GroupStyle. - person Justin XL; 29.12.2014
comment
Я не уверен, что понимаю, зачем здесь нужна коллекция коллекций, но это работает. Источником списка является коллекция Groups, и каждая группа имеет набор коллекций Items. Я не совсем понимаю, зачем это было нужно, и простой сбор предметов в группе не сработал, но я рад наградить вас баунти-поинтами. - person Marius Bancila; 30.12.2014
comment
Спасибо, позвольте мне попытаться объяснить логику немного яснее. Простая коллекция не даст вам вертикально сгруппированный список с горизонтальными прокручиваемыми данными - это была проблема, с которой вы столкнулись. Мое решение состоит в том, чтобы по-прежнему отображать данные ListView вертикально, но каждый элемент будет иметь внутреннюю коллекцию, которая привязана к горизонтально расположенному ItemsControl (взгляните на ItemsControl внутри шаблона данных ListView). Для этого потребуется коллекция коллекций, поскольку у каждого элемента будет другая коллекция для заполнения ItemsControl. Больше смысла? - person Justin XL; 30.12.2014
comment
@JustinXL, ссылка, которую вы предоставили с примером проекта, у меня не работает, у вас есть обновленная ссылка? Спасибо - person Pedro; 01.08.2015
comment
@JustinXL, ссылка, которую вы предоставили с примером проекта, не может открыться? Она показывает, что эта ссылка больше не работает. Можете ли вы поделиться кодом для работы над тем, что мне нужно. Спасибо - person Anbarasi; 30.08.2016
comment
@Anbarasi, он все еще там. Войдите в свою учетную запись Майкрософт. - person Justin XL; 30.08.2016
comment
@JustinXL, я вхожу в свою учетную запись Microsoft, но не получаю код - person Anbarasi; 30.08.2016
comment
@JustinXL Пожалуйста, помогите нуждающимся, я не могу найти решение - person Anbarasi; 30.08.2016