Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

XAML Universal App: How to make a horizontal scrolling ListView

I am having trouble getting a Horizontally scrolling ListView to work. I get very close, but then something just doesn't quite work right.

Here is my current XAML I have come up with so far after searching the Internet. The items are shown Horizontally, but the problem with it is that it still just wants to scroll vertically even though I'm trying to force everything for Horizontal on and Vertical off.

Does anyone have any insight on what I am doing wrong?

<ScrollViewer x:Name="scrollWatchlist" Grid.Row="1" Margin="0,5,0,3" DataContext="{Binding MovieViewModel}"
              HorizontalScrollMode="Enabled"
              HorizontalScrollBarVisibility="Visible"
              IsHorizontalRailEnabled="True"

              VerticalScrollMode="Disabled"
              VerticalScrollBarVisibility="Disabled"
              IsVerticalRailEnabled="False"

              IsScrollInertiaEnabled="True">
    <ScrollViewer.Template>
        <ControlTemplate>
            <ListView Margin="0,5,0,3" ItemsSource="{TemplateBinding DataContext}">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ListViewItem Margin="0,0,5,0" Tag="{Binding ID}">
                            <Image Source="{Binding FormattedPosterUri}" Width="92" />
                        </ListViewItem>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </ControlTemplate>
    </ScrollViewer.Template>
</ScrollViewer>

UPDATE: Here is a working XAML example for anyone who comes across this question:

<ListView x:Name="lvwMovieWatchlist" Grid.Row="1" Margin="0,5,0,3" ItemsSource="{Binding MovieViewModel}"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.HorizontalScrollBarVisibility="Visible"
          ScrollViewer.IsHorizontalRailEnabled="True"
          ScrollViewer.VerticalScrollMode="Disabled">

    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ListViewItem Margin="0,0,5,0" Tag="{Binding ID}">
                <Image Source="{Binding FormattedPosterUri}" Width="92" />
            </ListViewItem>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
like image 380
Robert Burke Avatar asked Jun 01 '15 14:06

Robert Burke


People also ask

How do you make a ListView scroll horizontal?

To scroll a Flutter ListView widget horizontally, set scrollDirection property of the ListView widget to Axis. horizontal. This arranges the items side by side horzontally.

How do I set horizontal scrolling?

Horizontal scrolling can be achieved by clicking and dragging a horizontal scroll bar, swiping sideways on a desktop trackpad or trackpad mouse, pressing left and right arrow keys, or swiping sideways with one's finger on a touchscreen.

How do I enable horizontal scrolling in Visual Studio?

Scroll horizontally with the mouse wheel when holding the shift key. Enables horizontal scrolling by holding down the Shift key and spinning the mouse wheel in Visual Studio 2017, 2019 and 2022. This feature is available in many other programs.

How do I scroll horizontally in eclipse?

Now click on the "Eclipse" profile and choose the "Scrolling & Navigation" tab. Under the "Advanced Window Scrolling" choose Method 1(SCROLL Msg) option for Scroll Method. Click Apply.


2 Answers

You don't need the ScrollViewer, and also you should get those properties in the ListView

<ListView  Margin="0,5,0,3" ItemsSource="{TemplateBinding DataContext}"ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.IsHorizontalRailEnabled="True">
like image 152
Swift Sharp Avatar answered Oct 21 '22 05:10

Swift Sharp


It is recommended to use GridView for displaying items with horizontal scrolling. Just replace ListView with Gridview in your code.

However, you can use ListView with horizontal scrollbar:

<ListView ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.VerticalScrollMode="Disabled">
like image 28
Liero Avatar answered Oct 21 '22 06:10

Liero