Einstellen der GroupStyle.Panel einer ListView auf Windows Phone

Question

Ich versuche, eine ListView mit Gruppierung zu erstellen, wo die Elemente in jeder Gruppe horizontal (als scrollbaren Inhalt) angezeigt werden. Egal was ich mit der GroupStyle.Panel der ListView versucht habe, es scheint keinen Effekt auf die Liste zu haben.

Hier ist, wie meine XAML aussieht:

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

Wo

<Page.Resources> 
    <DataTemplate x:Key="listItemTemplate"> 
     <Grid Width="144" Margin="5"> 
     <!-- details --> 
     </Grid> 
    </DataTemplate> 
</Page.Resources> 

Das folgende Bild zeigt links die eigentliche Ergebnis, das ich bekommen, und auf der rechten Seite, was ich haben will.

Ich habe versucht, eine ItemsWrapGrid mit unterschiedlichen Eigenschaften verwendet wird, habe ich versucht, einen StackPanel und sogar eine VariableSizedWrapGrid, aber nichts in der Art, wie die Listenelemente angezeigt geändert werden.

Wie kann das gemacht werden?

Answer 1

@kubakista hatte recht

über

Es sieht aus wie wenn ListView.ItemsPanel enthält ItemsStackPanel dann GroupStyle.Panel ignoriert ...

Doch diese Veränderung wird nicht Ihr Problem lösen as -

1. Das Scrollen wird ein wenig verzögert.
2. Es gibt kein horizontales Scrollen.
3. Die ListView verliert die Virtualisierung.
4. Die nette Gruppenkopfaufrollungsanimation ist weg.

---

Hier ist eine Alternative, ohne die Struktur des ListView sich zu ändern, aber ein wenig Änderung in der Datenstruktur.

Die Idee ist, behandeln Sie jede horizontale Liste von Rechtecken unter einer Gruppe als ein Sammelelement auf der Benutzeroberfläche.

Das bedeutet, jede Gruppe in den ListView nur ein Kind haben wird, die tatsächlich eine Sammlung von Rechtecken ist, die in einem horizontal rollbaren ItemsControl präsentiert.

also annehmen, dass Sie eine Sammlung von Art haben ObservableCollection<Item> als CollectionViewSource, wird die Item jetzt Art von <ObservableCollection<Item>> gestaltet werden, um die Sammlung von Rechtecken zu halten. Daher muss der Typ der Sammlung auf etwa ObservableCollection<ObservableCollection<Item>> aktualisiert werden.

Im Inneren des ListView ‚s ItemTemplate, müssen Sie eine horizontal scrollen ScrollViewer erstellen und eine ItemsControl nach innen setzen.Stellen Sie sicher, dass Sie ItemsSource des letzteren auf {Binding} eingestellt haben.

Um horizontales Wischen zu aktivieren, müssen Sie den Tilt-Effekt deaktivieren, indem Sie den Standardstil ListViewItem bearbeiten und den folgenden Code auskommentieren.

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

Ich habe eine Arbeitsbeispielprojekt here sowie einen Screenshot beigefügt unten.

hoffe, das hilft!