GridView Horizontal Scroll (UWP)

Question

Je développe une application UWP, et je souhaite que mon GridView défile en mode horizontal au lieu du mode vertical par défaut. Y a-t-il un moyen de le faire?

Voici mon code:

<GridView x:Name="HostListView" Grid.Row="2" Height="150" Margin="310,0,0,0" 
        ItemsSource="{Binding FilteredHosts}" SelectedItem="{Binding SelectedHost, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" 
        SelectionChanged="HostListView_SelectionChanged" IsSwipeEnabled="False"> 
    <GridView.ItemTemplate> 
     <DataTemplate > 
      <StackPanel Margin="8" Width="220"> 
       <TextBlock Text="{Binding Name}" Style="{StaticResource TitleTextBlockStyle}" 
          FontSize="15" TextWrapping="NoWrap" 
          MaxHeight="40" Foreground="White"/> 
       <TextBlock Text="{Binding Designation}" Style="{StaticResource CaptionTextBlockStyle}" 
          TextWrapping="NoWrap" Foreground="White"/> 
      </StackPanel> 
     </DataTemplate> 
    </GridView.ItemTemplate> 
</GridView> 

Answer 1

Ceci est très simple, dites simplement le GridView d'utiliser la barre de défilement horizontale au lieu de la verticale. Cela activera la partie de défilement horizontal. L'étape suivante consiste à s'assurer que les éléments sont dans le bon ordre, car vous ne voulez pas que l'élément 4 soit hors écran, tandis que l'élément 20 sur la deuxième rangée est visible, donc ils devront être empilé verticalement. Vous pouvez le faire en modifiant la propriété Orientation du ItemsWrapGrid.

<GridView ... 
      ScrollViewer.HorizontalScrollBarVisibility="Auto" 
      ScrollViewer.HorizontalScrollMode="Auto" 
      ScrollViewer.VerticalScrollBarVisibility="Disabled" 
      ScrollViewer.VerticalScrollMode="Disabled"> 
    <GridView.ItemsPanel> 
     <ItemsPanelTemplate> 
      <ItemsWrapGrid Orientation="Vertical" /> 
     </ItemsPanelTemplate> 
    </GridView.ItemsPanel> 
    <GridView.ItemTemplate> 
     ... 
    </GridView.ItemTemplate> 
</GridView> 

Plus d'informations peuvent être trouvées sur mon SemanticZoom blog post, que je changé pour le défilement horizontal ainsi.