Stopbyte

How to add the ability to scroll a ListView Horizontally in UWP & WinRT?

Software Development WinRT & UWP
#1

I have a question concerning the ListView Horizontal Scroll-ability which is supposed to be easily done through something like HorizontalScrolling="Auto" but after long time of searching couldn’t find that option in UWP, so i suppose it’s not available under UWP.

Is there any trick to enable horizontal Scrolling for ListView's in UWP apps.

thanks in advance.

3 Likes
#2

That feature is by default unavailable at UWP Apps so i think you will have to regenerate the ListView Template and start from there.

2 Likes
#3

Obviously as @jms mentioned since UWP are supposed to be mobile friendly, Horizontal Scrolling is not recommended.

But mainly if you insist you may take the Generic ListView template and modify it to show the horizontal Scroll Bar:

Here is a sample XAML, you can use directly to enable horizontal scrolling :

<!-- Default style for Windows.UI.Xaml.Controls.ListView -->
<Style TargetType="ListView">
  <Setter Property="IsTabStop" Value="False" />
  <Setter Property="TabNavigation" Value="Once" />
  <Setter Property="IsSwipeEnabled" Value="True" />
  <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
  <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
  <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
  <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
  <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled" />
  <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" />
  <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
  <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
  <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" />
  <Setter Property="ItemContainerTransitions">
    <Setter.Value>
      <TransitionCollection>
        <AddDeleteThemeTransition />
        <ContentThemeTransition />
        <ReorderThemeTransition />
        <EntranceThemeTransition IsStaggeringEnabled="False" />
      </TransitionCollection>
    </Setter.Value>
  </Setter>
  <Setter Property="ItemsPanel">
    <Setter.Value>
      <ItemsPanelTemplate>
        <ItemsStackPanel Orientation="Vertical" />
      </ItemsPanelTemplate>
    </Setter.Value>
  </Setter>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListView">
        <Border BorderBrush="{TemplateBinding BorderBrush}"
                Background="{TemplateBinding Background}"
                BorderThickness="{TemplateBinding BorderThickness}">
          <ScrollViewer x:Name="ScrollViewer"
                        TabNavigation="{TemplateBinding TabNavigation}"
                        HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                        IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                        VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                        IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                        IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                        IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                        ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                        IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                        BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                        AutomationProperties.AccessibilityView="Raw">
            <ItemsPresenter
                Header="{TemplateBinding Header}"
                HeaderTemplate="{TemplateBinding HeaderTemplate}"
                HeaderTransitions="{TemplateBinding HeaderTransitions}"
                Footer="{TemplateBinding Footer}"
                FooterTemplate="{TemplateBinding FooterTemplate}"
                FooterTransitions="{TemplateBinding FooterTransitions}"
                Padding="{TemplateBinding Padding}"/>
          </ScrollViewer>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

That’s all.

2 Likes