使用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 =禁用。

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>

推荐答案

似乎你在正确的轨道上： ListBox中的ItemsPanelTemplate与WrapPanel，将WrapPanel的方向设置为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:

ListBox with WrapPanel vertical vertical http://i40.tinypic.com/358dzxj.png

此实现中的关键事项是

1. 设置方向= WrapPanel上的垂直，使事情垂直而不是水平，


2. 设置ScrollViewer。 VerticalScrollBarVisibility = ListBox上的禁用，以便ScrollViewer知道将其高度限制在可用空间。

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