GridView 水平滚动 (UWP)答案

【问题标题】：GridView Horizontal Scroll (UWP)GridView 水平滚动 (UWP)
【发布时间】：2018-03-21 11:00:46
【问题描述】：

我正在开发一个 UWP 应用程序，我希望让我的 GridView 以水平模式滚动，而不是默认的垂直模式。有什么办法可以吗？

这是我的代码：

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

【问题讨论】：

你想要多少行？单个或多个

标签： xaml gridview uwp horizontal-scrolling

【解决方案1】：

这很简单，只需告诉GridView 使用水平滚动条而不是垂直滚动条。这将启用水平滚动部分。

下一步很可能是确保项目的顺序正确，因为您不希望项目 4 不在屏幕上，而第二行的项目 20 在视图中，所以它们必须是垂直堆叠。您可以通过更改ItemsWrapGrid 的Orientation 属性来做到这一点。

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

更多信息可以在我的SemanticZoom blog post 上找到，我也改为水平滚动。

【讨论】：