WPF Horisontal listview

Question

Does any one know if it's possible to create a horisontal listview or gridview on Windows Phone 8.1?

I have tried making one with this piece of xaml code, which gives a vertical oriented listview:

<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HorzListView"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:SampleData="using:Blend.SampleData.SampleDataSource"
x:Class="HorzListView.MainPage"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Page.Resources>
    <SampleData:SampleDataSource x:Key="SampleDataSource" d:IsDataSource="True"/>
    <DataTemplate x:Key="ListDataItemTemplate">
        <Grid>
            <Image Source="{Binding Property3}" Height="79" Width="79"/>
        </Grid>
    </DataTemplate>
</Page.Resources>

<Grid DataContext="{Binding Source={StaticResource SampleDataSource}}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

     <TextBlock Grid.Row="0" Text="Hello" FontSize="72"></TextBlock>

    <ListView Grid.Row="1" 
                  ItemTemplate="{StaticResource ListDataItemTemplate}" 
                  ItemsSource="{Binding ListData}">

            <!--<ListView.ItemsPanel>
                <ItemsPanelTemplate>
                  <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>-->
        </ListView>
</Grid>

And if I uncomment the code block below, the listview gets horizontal but it is not possible to scroll through any of the items:

           <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                  <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>

I think it has something to do with the Stackpanel in the ItemsPanel, because if I change Orientation to "Vertical" it's gets layout vertical but scrolling not possible.

Any suggestions ?

Answer 1

The row definition for your listview needs to Auto not *

<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>


<ListView Grid.Row="1" 
              ItemTemplate="{StaticResource ListDataItemTemplate}" 
              ItemsSource="{Binding ListData}">

        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
              <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>

Answer 2

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HorzListView"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:SampleData="using:Blend.SampleData.SampleDataSource"
    x:Class="HorzListView.MainPage"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
        <SampleData:SampleDataSource x:Key="SampleDataSource" d:IsDataSource="True"/>
        <DataTemplate x:Key="ListDataItemTemplate">
            <Grid>
                <Image Source="{Binding Property3}" Height="79" Width="79"/>
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <Grid DataContext="{Binding Source={StaticResource SampleDataSource}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

         <TextBlock Grid.Row="0" Text="Hello" FontSize="72"></TextBlock>

        <ListView Grid.Row="1" 
                    VerticalAlignment="Top"
                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
                    ScrollViewer.VerticalScrollBarVisibility="Disabled"
                    ScrollViewer.HorizontalScrollMode="Enabled"
                    ScrollViewer.VerticalScrollMode="Disabled"
                    ScrollViewer.ZoomMode="Disabled"
                    SelectionMode="Single"
                    ItemTemplate="{StaticResource ListDataItemTemplate}" 
                    ItemsSource="{Binding ListData}">

                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                      <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>
    </Grid>
</Page>

Answer 3

A better explanation and usage of Wrap panel explained here

Horizontal Listbox Using Wrap Panel