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.

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.

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

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.