Question

是否有人知道是否可以在Windows Phone 8.1上创建水平列表视图或gridview？

我尝试使用这段xaml代码制作一个代码，它提供了一个垂直方向的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>

如果我取消注释下面的代码块，listview会变为水平，但无法滚动浏览任何项目：

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

我认为它与ItemsPanel中的Stackpanel有关，因为如果我将Orientation更改为＆＃34; Vertical＆＃34;它的布局是垂直的，但滚动是不可能的。

有什么建议吗？

Answer 1

列表视图的行定义需要自动不*

<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

此处解释了Wrap面板的更好解释和用法

Horizontal Listbox Using Wrap Panel

WPF水平列表视图

3 个答案: