wpf - 使用 WrapPanel 和 ScrollViewer 在 WPF 中给出多列列表框

Question

我正在制作一个简单的 LOB 应用程序，它从一个 XML 文件加载数据并将其显示在一个列表中，并带有几个用于编辑的按钮。

在我的第一次尝试中，除了列表在一个长列中向下滚动外，一切正常。我希望数据可以换行，以便在窗口底部开始第二列，依此类推 - 如果调整窗口大小，数据应相应调整大小。

首先，我只是将 ListBox 放在 ScrollViewer 中。这没有任何区别。

然后，我在 ItemTemplate 中添加了一个 WrapPanel。在这一点上，尽管我设置了 ScrollViewer.Horizo​​ntalScrollbar=disabled，但我在水平方向上得到了一个长行，但它从未换行到第二行。

我在网络上搜索了各种博客和论坛，但看不到建议和我的代码(包括在下面)之间的区别。任何提示将不胜感激。

<Window x:Class="MyApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="My App" Height="300" Width="400"
        FocusManager.FocusedElement="{Binding ElementName=eventsList}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
                <ScrollViewer Grid.Row="0" Grid.Column="0"     HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
            <ListBox Name="eventsList">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>
        </ScrollViewer>

        <StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal"     HorizontalAlignment="Center" Visibility="Collapsed">
            <Button Name="action1Button" />
            <Button Name="action2Button" />
            <Button Name="action3Button" />
        </StackPanel>
    </Grid>
</Window>

Answer 1

看起来您在正确的轨道上:用 WrapPanel 替换 ListBox 中的 ItemsPanelTemplate，将 WrapPanel 的 Orientation 设置为 Vertical，并将 ScrollViewer.VerticalScrollBar 设置为 Disabled 应该是您需要做的全部。

这对我有用:

<Window x:Class="ScrollingWrapPanel.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True" Orientation="Vertical"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBoxItem>
                <Rectangle Width="80" Height="80" Margin="10" Fill="Red"/>
            </ListBoxItem>
            <ListBoxItem>
                <Rectangle Width="80" Height="80" Margin="10" Fill="Orange"/>
            </ListBoxItem>
            <ListBoxItem>
                <Rectangle Width="80" Height="80" Margin="10" Fill="Yellow"/>
            </ListBoxItem>
            <ListBoxItem>
                <Rectangle Width="80" Height="80" Margin="10" Fill="Green"/>
            </ListBoxItem>
            <ListBoxItem>
                <Rectangle Width="80" Height="80" Margin="10" Fill="Blue"/>
            </ListBoxItem>
            <ListBoxItem>
                <Rectangle Width="80" Height="80" Margin="10" Fill="Indigo"/>
            </ListBoxItem>
            <ListBoxItem>
                <Rectangle Width="80" Height="80" Margin="10" Fill="Violet"/>
            </ListBoxItem>
        </ListBox>
    </Grid>
</Window>

这应该会导致它垂直渲染一整列，换行，然后继续下一列，根据需要水平(但不是垂直)滚动，如图所示:



这个实现的关键是

在 WrapPanel 上设置 Orientation="Vertical"使东西垂直而不是水平包装，以及

在 ListBox 上设置 ScrollViewer.VerticalScrollBarVisibility="Disabled"以便 ScrollViewer 知道将其高度限制为可用空间。