单行水平滚动/可滑动网格视图

本文关键字：网格 视图 水平 滚动 单行 | 更新日期: 2023-09-27 18:28:04

我想要一个可以用鼠标和触摸滑动水平滚动的单行GridView。GridView通过绑定呈现图像，以便从图像数组中选择单个图像。

除了水平滚动不起作用外，其他一切都很好（绑定、图像选择等）。XAML代码如下所示。

我错过了什么？

<GridView x:Name="IconGridView"
    Grid.Row="0"
    Margin="8,12"
    DataContext="{x:Bind IconManagerObj}"
    DoubleTapped="{x:Bind IconGridView_DoubleTapped}"
    IsItemClickEnabled="True"
    IsSwipeEnabled="True"
    ItemsSource="{Binding Path=IconImageInfo}"
    ScrollViewer.HorizontalScrollBarVisibility="Auto"
    ScrollViewer.HorizontalScrollMode="Enabled"
    ScrollViewer.VerticalScrollMode="Disabled"
    SelectionMode="Single"
    Tapped="{x:Bind IconGridView_Tapped}">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="4,8"
            HorizontalAlignment="Center"
            BorderBrush="{ThemeResource SubtleBlueBrush}"
            BorderThickness="1">
               <Image Width="150" Source="{Binding IconImage}Stretch="Uniform"/>
           </StackPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

单行水平滚动/可滑动网格视图

您一切正常，但ItemsWrapGrid的方向必须为垂直才能具有水平滚动查看器。

此处的文档https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.itemswrapgrid.aspx解释道：

当值为"垂直"时，网格会从上到下在列中添加项目，然后从左到右换行。项目列水平滚动或平移。

Juan Pablo Garcia Coello的回答让我走上了正轨，但如果没有额外的设置，我就无法工作。我在试用中发现的关键是为GridView设置高度。

  • 高度必须设置为足以让单行元素显示，但不够高，无法显示第二行。对于100的图像高度，我将其任意设置为140，效果非常好
  • ScrollViewer.VerticalScrollMode必须已禁用
  • ScrollViewer.HorizontalScrollMode必须是自动或已启用
  • ScrollViewer.HorizontalScrollBarVisibility必须自动或已启用
  • Juan指出，最关键的是，ItemsWrapGrid Orientation必须是垂直（听起来违反直觉，但有效！）

我已经将Juan的标记为已回答，因为它提供了一个完整的答案，因为如果不将"方向"设置为"垂直"，我就无法快速找到完整的答案——如果你问我，这是一个相当违背直觉的设置，但现在我明白了。

相关文章：