Single Row Horizontally Scrolling/Swipeable GridView

问题

I wanted a single-row GridView that can be scrolled horizontally both with mouse and touch swipe. The GridView is to present images through binding so that a single image will be selected from an array of images.

Everything works fine (binding, image selection, etc.) except that the horizontal scroll doesn't work. The XAML code is shown below.

What am I missing?

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

回答1:

You have everything right but the Orientation for the ItemsWrapGrid must be Vertical in order to have an Horizontal ScrollViewer.

The documentation here https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.itemswrapgrid.aspx explains that:

When the value is Vertical, the grid adds items in columns from top to bottom, then wraps from left to right. Columns of items scroll or pan horizontally.

回答2:

Juan Pablo Garcia Coello's answer put me on the right track but didn't work without an additional setting. The crucial thing I found out through trial was setting the Height for GridView.

• Height must be set enough for a single row elements to display but not high enough to allow a second row. For image height of 100 I set this arbitrarily to 140 and works great.
• ScrollViewer.VerticalScrollMode must be Disabled
• ScrollViewer.HorizontalScrollMode must be Auto or Enabled
• ScrollViewer.HorizontalScrollBarVisibility must be Auto or Enabled
• The most crucial, as Juan indicated, the ItemsWrapGrid Orientation must be Vertical (sounds counterintuitive but works!)

I have marked Juan's as answered as it provides a complete answer with this one, due to the fact that I couldn't have quickly figured out a complete answer without the Orientation being set Vertical -- a rather counter-intuitive setting if you ask me but now I get it.

来源：https://stackoverflow.com/questions/34476647/single-row-horizontally-scrolling-swipeable-gridview