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

WPF: ListBox with WrapPanel, vertical scrolling problem

提问by kodbuse

I have a UserControl (XAML below) that has a ListBox that I want to display images inside a WrapPanel, where images are displayed as many as will fit on one row and then wrap onto the next row etc. It works, except when the ListBox grows higher than the available space in the window, I'm not getting a vertical scrollbar, i.e. the contents get clipped. If I set a fixed height on the ListBox, the scrollbar appears and works as expected. How can I get this listbox to grow to the available space and then show a vertical scrollbar? This control is inside StackPanel inside a Grid in the main window. If I wrap the StackPanel inside a ScrollViewer, I get the scrollbar I'm after, but that's not really a good solution if I wanted to add some more controls to the UserControl above the ListBox (e.g. image size "zoom" etc) as I wouldn't want them to scroll with the images.

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

Thanks!! :)

谢谢！！:)

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

采纳答案by kodbuse

Well, I finally stumbled upon the solution. I was adding my UserControl to a placeholder panel that looked like this:

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

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

However, when I switched it to a Grid instead, things started to work the way I wanted:

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

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

I think it has to do with the StackPanel not taking up all the vertical space by default, like the Grid is doing.

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

回答by Eric Ouellet

I think you better go with override the ItemPanelTemplate:

我认为你最好覆盖 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>

回答by Eternal21

All I had to do was set the following, and the problem went away:

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

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">

回答by CHJ124

I was just looking through several questions about this issue, and although this is an old thread, this one gave me the answer, but just to clarify....

我只是浏览了关于这个问题的几个问题，虽然这是一个旧线程，但这个给了我答案，但只是为了澄清......

The layout GRID is the answer to most issues like this. To get the proper ListBox/WrapPanel operation to fill the available space, the following code does the trick:

布局 GRID 是大多数此类问题的答案。要获得正确的 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>

I have this in another grid to place the list at the bottom of my screen (ie.. the Grid.Row="1") and you can adjust MaxHeight (or remove it) to control the visible area before the vertical scroll bar will show up.

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

回答by Anand Shah

Put your listbox inside of a ScrollViewer and then set the scrollviewer's VerticalScrollBarVisibility property to "Auto"

将您的列表框放在 ScrollViewer 内，然后将滚动查看器的 VerticalScrollBarVisibility 属性设置为“自动”

        <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

HTH