Wie kann ich ein GridView mit gruppiertem Content-Flow horizontal statt vertikal erstellen?

Question

Ich habe eine GridView mit gruppierten Daten. Die Daten werden standardmäßig immer vertikal angezeigt. Ich möchte, dass es horizontal scrollt. Wie kann ich das machen?

Answer 1

Die ItemsPanelTemplate ist diejenige, die das Layout der Elemente bestimmt. Normalerweise wird ItemsWrapGrid für eine GridView verwendet. Dieses Steuerelement hat eine Eigenschaft namens MaximumRowsOrColumns. Setzen Sie das auf die Anzahl der Zeilen, die Sie als Maximum auf einer Seite haben möchten. Die Daten liegen dann immer in einem horizontalen Layout vor.

Zum Beispiel:

<GridView ItemsSource="{Binding Source={StaticResource groupedPersons}}" Margin="0,120,0,0" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto"> 
    <GridView.ItemTemplate> 
     <DataTemplate> 
      <StackPanel Margin="20" Width="300" Height="100" Background="AliceBlue"> 
       <TextBlock Text="{Binding Name}" FontSize="60" FontWeight="Bold" Style="{StaticResource BaseTextBlockStyle}"/> 
       <TextBlock Text="{Binding Age}" FontSize="42" TextWrapping="NoWrap" Style="{StaticResource BodyTextBlockStyle}" /> 
      </StackPanel> 
     </DataTemplate> 
    </GridView.ItemTemplate> 
    <GridView.ItemsPanel> 
     <ItemsPanelTemplate> 
      <ItemsWrapGrid MaximumRowsOrColumns="3"/> 
     </ItemsPanelTemplate> 
    </GridView.ItemsPanel> 
    <GridView.GroupStyle> 
     <GroupStyle HidesIfEmpty="True"> 
      <GroupStyle.HeaderTemplate> 
       <DataTemplate> 
        <Grid Background="LightGray" Margin="0"> 
         <TextBlock Text="{Binding Key}" Foreground="Black" Margin="30" Style="{StaticResource HeaderTextBlockStyle}"/> 
        </Grid> 
       </DataTemplate> 
      </GroupStyle.HeaderTemplate> 
     </GroupStyle> 
    </GridView.GroupStyle> 
</GridView>