WPF：带有 WrapPanel 的 ListBox，垂直滚动问题

Question

我有一个用户控件（下面的 XAML），它有一个列表框，我想在 WrapPanel 内显示图像，其中显示的图像数量与一行中的图像一样多，然后换行到下一行等。它可以工作，除了当 ListBox 增长到高于窗口中的可用空间时，我没有得到垂直滚动条，即内容被剪裁。如果我在 ListBox 上设置了固定高度，滚动条就会出现并按预期工作。我怎样才能让这个列表框增长到可用空间，然后显示一个垂直滚动条？此控件位于主窗口的 Grid 内的 StackPanel 内。如果我将 StackPanel 包装在 ScrollViewer 中，我会得到我想要的滚动条，但如果我想在 ListBox 上方的 UserControl 中添加更多控件（例如图像大小“缩放”等），这并不是一个好的解决方案，因为我不希望他们与图像一起滚动。

谢谢！！ :)

<UserControl x:Class="GalleryAdmin.UI.GalleryView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ListBox Name="itemListBox" BorderThickness="0" ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Background="LightGray" Margin="5" >
                    <StackPanel Margin="5">
                        <Image Source="{Binding Path=LocalThumbPath}" Height="100" />
                        <TextBlock Text="{Binding Path=Name}" TextAlignment="Center"></TextBlock>
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>

Answer 1

我认为你最好覆盖 ItemPanelTemplate：

<Grid>
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBoxItem>listbox item 1</ListBoxItem>
    <ListBoxItem>listbox item 2</ListBoxItem>
    <ListBoxItem>listbox item 3</ListBoxItem>
    <ListBoxItem>listbox item 4</ListBoxItem>
    <ListBoxItem>listbox item 5</ListBoxItem>
</ListBox>

Answer 2

好吧，我终于偶然发现了解决方案。我正在将我的 UserControl 添加到如下所示的占位符面板：

            <ScrollViewer Margin="20" >
                <StackPanel Name="contentPanel"></StackPanel>
            </ScrollViewer>

但是，当我将其切换到 Grid 时，事情开始按我想要的方式进行：

<Grid Name="contentPanel" Margin="20" />

我认为这与 StackPanel 默认不占用所有垂直空间有关，就像 Grid 正在做的那样。

Answer 3

我所要做的就是设置以下内容，问题就消失了：

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">

Answer 4

我只是在查看有关此问题的几个问题，虽然这是一个旧线程，但这个问题给了我答案，但只是为了澄清......

布局网格是大多数此类问题的答案。为了获得正确的 ListBox/WrapPanel 操作来填充可用空间，下面的代码可以解决问题：

                    <Grid Grid.Row="1" MaxHeight="105">
                        <ListBox ItemTemplate="{DynamicResource StoreGroupTemplate01}" ItemsSource="{Binding StoreGroupHeader}"
                            ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                            <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                    <WrapPanel Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                        </ListBox>
                    </Grid>

我将它放在另一个网格中以将列表放置在屏幕底部（即 Grid.Row="1"），您可以调整 MaxHeight（或将其删除）以控制垂直之前的可见区域滚动条会出现。

Answer 5

将列表框放在 ScrollViewer 中，然后将 scrollviewer 的 VerticalScrollBarVisibility 属性设置为“Auto”

        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
    <ListBox Name="itemListBox" BorderThickness="0" ItemsSource="{Binding}" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Background="LightGray" Margin="5" >
                <StackPanel Margin="5">
                    <Image Source="{Binding Path=LocalThumbPath}" Height="100" />
                    <TextBlock Text="{Binding Path=Name}" TextAlignment="Center"></TextBlock>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>
</ScrollViewer>

高温