CODEWITHSUNDEEP
xamlwindows-phone-8win-universal-app
Robert Burke
Robert Burke

Reputation: 340

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>

Upvotes: 16

Views: 8861

Answers (2)

Liero
Liero

Reputation: 27328

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

Upvotes: 5

Swift Sharp
Swift Sharp

Reputation: 2623

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

Upvotes: 12

Related Questions