Настройка на 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 няма ли stackpanel '   -  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}.

За да активирате хоризонталното плъзгане, ще трябва да деактивирате ефекта tilt, като редактирате стила по подразбиране на 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 все още е там. Влезте с вашия акаунт в Microsoft. - person Justin XL; 30.08.2016
comment
@JustinXL, влизам през моя акаунт в Microsoft, но не получих код - person Anbarasi; 30.08.2016
comment
@JustinXL Моля, направете някои нуждаещи се, не мога да намеря решението - person Anbarasi; 30.08.2016