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

StackOverflow https://stackoverflow.com/questions/818876

题

我有一个UserControl（下面的XAML），它有一个ListBox，我想在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>

有帮助吗？

解决方案 2

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

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

然而，当我把它切换到网格时，事情开始按照我想要的方式工作：

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

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

其他提示

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

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

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">

我只是看了几个关于这个问题的问题，虽然这是一个老话题，但这个给了我答案，但只是为了澄清....

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

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

将您的列表框放在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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top