Windows 8 ListView with horizontal item flow

Question

How can i make the ListItems inside windows 8 ListView to flow horizontally. Default behavior is vertical, but i want to show the list in horizontal flow so it can render as panorama.

I tried GridView which does support horizontal layout but there is a limitation on item height which does not show the complete item content for items with large text.

Kasey

Even though it's an answer about WPF, this worked for me in my WinRT app: #359717 – Grass

Answer 1

You can use a ListView this way:

<ListView
    Height="500"
    VerticalAlignment="Center"
    ScrollViewer.HorizontalScrollBarVisibility="Auto"
    ScrollViewer.VerticalScrollBarVisibility="Disabled"
    ScrollViewer.HorizontalScrollMode="Enabled"
    ScrollViewer.VerticalScrollMode="Disabled"
    ScrollViewer.ZoomMode="Disabled"
    SelectionMode="None">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel
                Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>

-- that gives it a horizontal panel and the right ScrollBars for horizontal scrolling.

Both ListView and GridView can cause problems when you get larger items. I think by default the items might be sized based on the size of the first item added. You can set that size manually though:

<ListView.ItemContainerStyle>
    <Style
        TargetType="ListViewItem"><!-- note - for GridView you should specify GridViewItem, for ListBox - ListBoxItem, etc. -->
        <Setter
            Property="Height"
            Value="200" /> <!-- this is where you can specify the size of your ListView items -->
        <Setter
            Property="Width"
            Value="350" />
    </Style>
</ListView.ItemContainerStyle>

-- note that all items need to be the same size.

-- also note - I have changed this answer to replace a StackPanel with an ItemsStackPanel which is virtualized, so it should get you better performance and lower memory usage for large data sets, but PLEASE - don't create layouts with large, horizontally scrollable lists. They might be a good solution in some very limited scenarios, but in most cases they will break many good UI patterns and make your app harder to use.

Silkworm

This approach also seems to fix the problem with touch keyboard appearing over edit controls in GridView! I can't upvote this answer enough! – Barbados

Note that using StackPanel as the ItemsPanel disables virtualization so you shouldn't use it with lists of uncontrolled size. I'd try using ItemsStackPanel instead in such cases. I'm not updating the answer though since I haven't tested it. Pretty sure it should work though. – Silkworm

in 8.1 there is something called a "VirtualizingStackPanel" – Sistrunk

VirtualizingStackPanel is the old panel known from 8.0, Silverlight and WPF. I believe ItemsStackPanel is the new and improved panel with better performance and added features. – Silkworm

I tried this solution on Windows Phone 8.1 and I would suggest adding ManipulationMode="TranslateRailsX". This made the horizontal scrolling possible if your listview is inside a FlipView or something similar. Also when I remove items from ListView, I was getting glitches in animation but not after adding this. Working Smooth as Expected. – Centonze

Answer 2

You can also encapsulate Filips approach using a style:

   <Style TargetType="ListView" x:Key="VerticalListView">
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />

        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />

        <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
        <Setter Property="SelectionMode" Value="None" />

        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel VerticalAlignment="Top" Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>

        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="ListViewItem">
                    <Setter Property="Height" Value="400" />
                </Style>
            </Setter.Value>
        </Setter>
    </Style>

Apply it to your ListViews as needed:

<ListView Style="{StaticResource VerticalListView}" />

Brushoff

Answer 3

I would prefer the styles approach, but you'll need to be careful modifying the panel orientation. Before the first visual layout pass the items control panel won't be created and therefore won't be available to modify. You'd have to find a strategy to handle setting the initial orientation if it's different than the one line of your Xaml. Maybe assign the ItemsPanelTemplate via a style setter as well.

Flick