自适应列表视图帮助（Windows Universal App）

Below is my xaml code which defines ListView. The output is series of products. But the problem is the product aligns one after another.

下面是我定义ListView的xaml代码。产量是一系列产品。但问题是产品一个接一个地排列。

I Want an output align vertically one after another.

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

<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>

1 个解决方案

#1

ItemsStackPanel can be used only as the ItemsPanel of an ItemsControl that displays more than one item at a time. It can't be used with an ItemsControl that displays only one item at a time, such as a ComboBox or FlipView. ItemsStackPanel is the default ItemsPanel for ListView.

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

By default, the ItemsStackPanel stacks items vertically from top to bottom. You can set the Orientation property to Horizontal to stack items from left to right.

默认情况下,ItemsStackPanel从上到下垂直堆叠项目。您可以将“方向”属性设置为“水平”以从左到右堆叠项目。

For more info, see ItemsStackPanel.

有关更多信息,请参阅ItemsStackPanel。

We should be able to set the Horizontal to the Orientation of the ItemsStackPanel.

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

For example:

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

By the way, if you want scroll the ListView in horizontal, you should be able to set the Visible to ScrollViewer.HorizontalScrollBarVisibility and Enabled to the ScrollViewer.HorizontalScrollMode in ListView.

顺便说一句,如果你想在滚动水平ListView的,你应该能够可见设置为ScrollViewer.Horizo​​ntalScrollBarVisibility和ListView中已启用的ScrollViewer.Horizo​​ntalScrollMode。

For example:

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