CODEWITHSUNDEEP
xamlgridviewuwphorizontal-scrolling
thalassophile
thalassophile

Reputation: 275

GridView Horizontal Scroll (UWP)

I am developing a UWP application, and I wish to have my GridView to be scrolling in a horizontal mode instead of the default vertical mode. Is there any way I can do it?

Here is my 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>

Upvotes: 3

Views: 2256

Answers (1)

Bart
Bart

Reputation: 10015

This is very simple, simply tell the GridView to use the horizontal scrollbar instead of the vertical. This will enable the horizontal scrolling part.

The next step is most likely making sure the items are in the correct order, as you don't want item 4 to be off screen, while item 20 on the second row is in view, so they'll have to be stacked vertically. You can do this by changing the Orientation property of the ItemsWrapGrid.

enter image description here

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

More information can be found on my SemanticZoom blog post, which I changed to horizontal scrolling as well.

Upvotes: 4

Related Questions