使用WrapPanel和ScrollViewer在WPF中提供多列Listbox

Question

我正在创建一个简单的LOB应用程序,它从XML文件加载数据并将其显示在一个列表中,其中包含几个用于编辑的按钮.

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

首先,我只是将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的ListBox垂直包装http://i40.tinypic.com/358dzxj.png

这个实现中的关键是

1. 在WrapPanel上设置Orientation ="Vertical",使事物垂直而不是水平地包裹,并且
2. 在ListBox上设置ScrollViewer.VerticalScrollBarVisibility ="Disabled",以便ScrollViewer知道将其高度限制在可用空间.