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

Question

我有一个UserControl（如下所示的XAML），其中包含一个ListBox，我想在WrapPanel中显示图像，其中图像尽可能多地显示在一行上，然后换到下一行等等。它可以正常工作，但当ListBox高度超过窗口可用空间时，我没有垂直滚动条，即内容被剪切了。如果我在ListBox上设置固定高度，则滚动条会出现并按预期工作。如何让这个listbox增长到可用空间，并显示垂直滚动条？此控件位于主窗口中的Grid内的StackPanel内。如果我将StackPanel包装在ScrollViewer中，则会获得所需的滚动条，但是如果我要在ListBox上方添加一些控件（例如图像大小“缩放”等），那么这并不是一个好的解决方案，因为我不希望它们与图像一起滚动。 谢谢！ :)

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

- kodbuse

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>

：空段落标签。

- Eric Ouellet

---

禁用水平滚动对我很有帮助！谢谢！ - 321X

Answer 2

好的，我最终找到了解决方案。 我将我的用户控件添加到一个看起来像这样的占位符面板中：

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

然而，当我将其更改为网格(Grid)时，事情开始按照我想要的方式工作:

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

我认为这与StackPanel默认情况下未占用所有垂直空间有关，而Grid正在执行此操作。

- kodbuse

---

我将我的ListBox（带有WrapPanel）放在一个StackPanel中，再放在一个Grid中，出现了相同的问题。移除StackPanel层解决了问题。谢谢。 - i_am_jorf

我有两个Grid和一个嵌套在UserControl中的List。移除重复的Grid解决了问题。 - Vinay Patil

Answer 3

我只需要设置以下内容，问题就解决了：

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">

- Eternal21

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（或删除它）来控制垂直滚动条出现之前的可见区域。

- CHJ124

Answer 5

将您的listbox放入一个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>

HTH

- Anand Shah

---

谢谢，但不幸的是，那行不通。它根本没有任何区别。我实际上已经尝试过了。可能应该提一下。就像UserControl不知道有多少可用空间一样？ - kodbuse