9

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
  • Add Background="Transparent" to your panel to give it hittestvisibility and your mouse wheel should be a go.
    – Chris W.
    Commented Oct 1, 2015 at 19:31
  • @ChrisW I've tried your change and it doesn't work for me. Testing in Windows 10 PC (Universal App)
    – SuperJMN
    Commented Oct 1, 2015 at 19:55
  • 1
    I blogged about it with some extra details here depblog.weblogs.us/2015/03/25/… :)
    – Depechie
    Commented Oct 2, 2015 at 7:29

3 Answers 3

21

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>
1
  • Ah ok, the Background=transparent trick is an old silverlight thing I still run into sometimes with the new universal stuff since a lot of it is based on silverlight, you can ditch it if you have that property on there and it worked, glad you found a remedy!
    – Chris W.
    Commented Oct 1, 2015 at 20:45
11

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.