ListView with horizontal items

9
votes

I come from WPF and I don't know if it's possible to make a ListView to distribute items horizontally, with all the extras like mouse-wheel scrolling (mouse devices) and swiping (touch devices).

I've tried this, but it doesn't behave like the vertical one. Example: I cannot scroll with the mouse-wheel.

<ListView ScrollViewer.VerticalScrollBarVisibility="Disabled"  ScrollViewer.HorizontalScrollBarVisibility="Auto" ItemsSource="{Binding Collection}" >
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"></StackPanel>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>
3
wpfxamllistviewwin-universal-appuwp
Add Background="Transparent" to your panel to give it hittestvisibility and your mouse wheel should be a go. – Chris W.
@ChrisW I've tried your change and it doesn't work for me. Testing in Windows 10 PC (Universal App) – SuperJMN
I blogged about it with some extra details here depblog.weblogs.us/2015/03/25/… :) – Depechie

3 Answers

22
votes

OK, I found a way to make it work!

This is what I have. I don't know if it's configured fine, suggestions?

<ListView ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto"
    ScrollViewer.HorizontalScrollMode="Enabled"                  
    ScrollViewer.VerticalScrollMode="Disabled"
    ItemsSource="{Binding Collection}">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Background="Transparent" Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>
10
votes

This is more simple, maybe could help:

 <ListView>
     <ListView.ItemsPanel>
          <ItemsPanelTemplate>
              <StackPanel Orientation="Horizontal" />
          </ItemsPanelTemplate>
     </ListView.ItemsPanel>
     <ListView.ItemTemplate>
          <DataTemplate>
             <StackPanel Orientation="Horizontal" />
          </DataTemplate>
     </ListView.ItemTemplate>
 </ListView>
4
votes
<ListBox Height="50" VerticalAlignment="Top">
 <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
          <VirtualizingStackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBoxItem Content="aaaaaaaaaaa"/>
        <ListBoxItem Content="aaaaaaaaaaa"/>
        <ListBoxItem Content="aaaaaaaaaaa"/>
        <ListBoxItem Content="aaaaaaaaaaa"/>
        <ListBoxItem Content="aaaaaaaaaaa"/>
</ListBox>