使用 WrapPanel 和 ScrollViewer 在 WPF 中提供多列列表框 [英] Using WrapPanel and ScrollViewer to give a multi-column Listbox in WPF

问题描述

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

I’m making a simple LOB app which loads data from an XML file and displays it in a list with a few buttons for editing.

在我的第一次尝试中，一切都很好，只是列表在一个长列中向下滚动.我希望将数据包装起来，以便在窗口底部开始第二列，依此类推——如果您调整窗口大小，数据应该相应地调整大小.

In my first attempt, everything was ok except that the list scrolled downwards in one long column. I would prefer the data to wrap so that at the bottom of the Window it starts a second column, and so on – if you resize the Window the data should resize accordingly.

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

First, I just put the ListBox inside a ScrollViewer. This made no difference whatsoever.

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

Then, I added a WrapPanel within the ItemTemplate. At this point I got a long row horizontally but it never wrapped to a second row, despite my setting the ScrollViewer.HorizontalScrollbar=disabled.

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

I’ve searched around the web on various blogs and forums, but can’t see the difference between the suggestions and my code (included below). Any tips would be much appreciated.

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

推荐答案

看来你走对了:用 WrapPanel 替换 ListBox 中的 ItemsPanelTemplate，将 WrapPanel 的 Orientation 设置为 Vertical，并将 ScrollViewer.VerticalScrollBar 设置为 Disabled应该是您需要做的所有事情.

It seems like you were on the right track: replacing the ItemsPanelTemplate in the ListBox with a WrapPanel, setting WrapPanel's Orientation to Vertical, and setting ScrollViewer.VerticalScrollBar to Disabled should be all you need to do.

这对我有用:

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

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

That should cause it to render out a full column vertically, wrap, and then continue on the next column, scrolling as necessary horizontally (but not vertically), as in the picture:

这个实现的关键是

1. 在 WrapPanel 上设置 Orientation="Vertical" 以使内容垂直而不是水平环绕，并且
2. 在 ListBox 上设置 ScrollViewer.VerticalScrollBarVisibility="Disabled" 以便 ScrollViewer 知道将其高度限制为可用空间.

这篇关于使用 WrapPanel 和 ScrollViewer 在 WPF 中提供多列列表框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！