Question

我想创建一个包含一些项目的列表视图。每个项目都有特定的大小（所有项目都相同），并且可以点击。

我已经创建了列表视图，但是一旦达到列表视图的最大宽度大小，它就会换行并继续第二行。我想在一条线上设置一个水平滚动条和所有项目。

例如，我有5个项目，但它显示：

我想让水平滚动条能够看到第五个。

这是我的xaml代码：

<ListView Background="#1A1A1A" HorizontalAlignment="Stretch" Margin="10,0,10,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" Height="100" ItemsSource="{Binding Projects}" SelectionChanged="ListView_SelectionChanged">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal" Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                                ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
                                MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
                                ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="#CCCCCC" BorderThickness="1">
                        <StackPanel Orientation="Horizontal" Height="100" Width="200">
                            <TextBlock Height="100" Width="200" FontSize="20" Padding="0,25,0,0" TextAlignment="Center" Foreground="#1A1A1A" Background="{Binding BackgroundColor}" Text="{Binding Title}" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Answer 1

您可以将wrap面板更改为stackPanel

<ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                            ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
                            MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
                            ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" />
            </ItemsPanelTemplate>

到

<ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                            MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}" />
            </ItemsPanelTemplate>

如何在一行上停止ListView上的溢出

1 个答案: