【问题标题】:Single Row Horizontally Scrolling/Swipeable GridView单行水平滚动/可滑动的 GridView
【发布时间】:2016-04-01 07:21:48
【问题描述】:

我想要一个单行 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>

【问题讨论】:

    标签: c# xaml gridview windows-runtime uwp


    【解决方案1】:

    除了 ItemsWrapGrid 的 Orientation 必须为 Vertical 才能拥有 Horizo​​ntal ScrollViewer,您一切正常。

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

    当值为 Vertical 时,网格从上到下按列添加项目,然后从左到右换行。项目列水平滚动或平移。

    【讨论】:

      【解决方案2】:

      Juan Pablo Garcia Coello 的回答让我走上了正确的道路,但没有额外的设置就无法工作。我通过试用发现的关键是为 GridView 设置 高度

      • 高度必须设置得足以让单行元素显示不够高以允许第二行显示。对于 100 的图像高度,我将其任意设置为 140 并且效果很好。
      • ScrollViewer.VerticalScrollMode 必须禁用
      • ScrollViewer.HorizontalScrollMode 必须是自动启用
      • ScrollViewer.HorizontalScrollBarVisibility 必须是自动启用
      • 正如 Juan 所指出的,最关键的是,ItemsWrapGrid Orientation 必须是垂直(听起来违反直觉,但有效!)

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

      【讨论】:

      • 嗯,实际上不应该设置高度......这是我的看法。 depblog.weblogs.us/2015/03/25/… 如果您愿意,我可以将其添加为答案,因为我使用堆栈面板而不是包装面板,它工作正常!
      猜你喜欢
      • 1970-01-01
      • 2023-03-04
      • 1970-01-01
      • 1970-01-01
      • 2021-03-23
      • 2018-03-21
      • 2020-12-17
      • 1970-01-01
      相关资源
      最近更新 更多