自适应列表视图帮助（Windows 通用应用程序）答案

【问题标题】：Adaptive List View Help (Windows Universal App)自适应列表视图帮助（Windows 通用应用程序）
【发布时间】：2017-08-10 09:28:43
【问题描述】：

下面是我定义ListView 的xaml 代码。输出是系列产品。但问题是产品一个接一个地对齐。

我希望输出一个接一个地垂直对齐。

<ListView x:Name="list" Margin="0,0,0,0" SelectionChanged="list_SelectionChanged" VerticalAlignment="Top">
    <ListView.Resources>
        <DataTemplate x:Key="myCell">
            <Border BorderBrush="Gray"  BorderThickness="0,0,0,0" >
                <Grid Margin="0" x:Name="tryadpative"   >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="8*" />
                        <RowDefinition Height="1*" />
                        <RowDefinition Height="1*" />
                    </Grid.RowDefinitions>

                    <Image x:Name="prodimg" Width="auto" Source="{Binding prodimg}" Grid.Row="0"></Image>
                    <TextBlock x:Name="productcode"  TextWrapping="Wrap"  Text="{Binding productcode}" HorizontalAlignment="Center" Width="auto" FontSize="12" Grid.Row="1" Foreground="Gray"/>
                    <TextBlock x:Name="productname" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Bottom" Foreground="Gray" Grid.Row="0"  Text="{Binding productname}" />
                    <TextBlock x:Name="productmindec"  TextWrapping="Wrap" HorizontalAlignment="Center"  Text="{Binding productmindec}" Width="auto" FontSize="14"  Grid.Row="2" Foreground="Gray"/>

                    <!--<Image x:Name="prodimg" Width="auto" Source="{Binding prodimg}" Grid.Row="0"></Image>
                    <TextBlock x:Name="productcode"  TextWrapping="Wrap"  Text="{Binding productcode}"  Width="auto" FontSize="12"  Foreground="Gray"/>
                    <TextBlock x:Name="productname" FontSize="14"  Foreground="Gray"   Text="{Binding productname}" />
                    <TextBlock x:Name="productmindec"  TextWrapping="Wrap"   Text="{Binding productmindec}" Width="auto" FontSize="14"   Foreground="Gray"/>-->                                                                                 

                </Grid>
            </Border>
        </DataTemplate>
    </ListView.Resources>

    <!--<ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListView.ItemContainerStyle>-->

    <ListView.ItemTemplate>
        <StaticResource ResourceKey="myCell"/>
    </ListView.ItemTemplate>

</ListView>

【问题讨论】：

标签： windows xaml win-universal-app

【解决方案1】：

ItemsStackPanel 只能用作一次显示多个项目的 ItemsControl 的 ItemsPanel。它不能与一次只显示一个项目的 ItemsControl 一起使用，例如 ComboBox 或 FlipView。 ItemsStackPanel 是 ListView 的默认 ItemsPanel。

默认情况下，ItemsStackPanel 从上到下垂直堆叠项目。您可以将 Orientation 属性设置为 Horizontal 以从左到右堆叠项目。

有关详细信息，请参阅ItemsStackPanel。

我们应该能够将Horizontal 设置为ItemsStackPanel 的Orientation。

例如：

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

顺便说一句，如果你想水平滚动 ListView，你应该可以将ListView 中的Visible 设置为ScrollViewer.HorizontalScrollBarVisibility 和Enabled 设置为ScrollViewer.HorizontalScrollMode。

例如：

<ListView x:Name="list"
          Margin="0,0,0,0" 
          SelectionChanged="list_SelectionChanged" 
          VerticalAlignment="Top"  
          SelectionMode="Single" 
          ScrollViewer.HorizontalScrollBarVisibility="Visible"
          ScrollViewer.HorizontalScrollMode="Enabled">
</ListView>

【讨论】：