Show items scrolling horizontally with ListView in WinRT

This is just reminder blog post for myself ( and all other people who struggle with the same problem 😉 )
Many thanks to Shawn Kendrot and Tom Verhoeff for the help.

What I needed in a recent program was a list of images that are placed horizontally in a list, so I could scroll through them horizontally and only that. In other words no item selection and no wrapping to secondary line or anything, only show them and scroll through.

When I needed this on the SilverLight stack, there was not much trouble, but doing this on WinRT I kept hitting walls… just let me show you how I got to the end result and hope you won’t need to hit that wall as often.
Do note it’s just something very simpel, but somehow I struggled 🙂

The main part to get right is setting up your ListView. Import things to notice: we need to change the ItemsPanelTemplate of the ListView so that it will order it’s items the way we want. We will be using the VirtualizingStackPanel for this. But doing that isn’t enough, we also need to tweak the ScrollViewer that is inside the ListView, because it’s HorizontalScrollMode is not enabled by default.
I added al this in a Style to use, it looks like this

With this part of the code, I was still not satisfied with the end result. Ok the ListView was now Horizontally, but it still acted like a real ListView. Meaning you can see the Tilt effect when you press on an item in the list.
Depending on your application this could be needed, but I just wanted a list of items the user could glance at, so no selection needed!

To fix this, we need to tweak the Style! We just add a new one based upon the previous created Style:

Now that’s it… only thing left to do is add ListViews and select the Style you want to use!

Soure code can be found on my GitHub here…

This is how it looks


Leave a Reply

Your email address will not be published. Required fields are marked *