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

這應該導致它垂直渲染一個完整的列，換行，然后繼續下一列，根據需要水平滾動（但不是垂直），如圖所示：

這個實現中的關鍵是

1. 在WrapPanel上設置Orientation =“Vertical”，使事物垂直而不是水平地包裹，並且
2. 在ListBox上設置ScrollViewer.VerticalScrollBarVisibility =“Disabled”，以便ScrollViewer知道將其高度限制在可用空間。

Answer 2

我相信這樣做，你需要編寫自定義代碼 - 你在覆蓋ItemsPanelTemplate時有正確的想法，但WrapPanel沒有按照你想要的方式訂購東西 - 它會訂購東西：

A B C D
E F G H
I J K L

雖然你可能想要它：

A D G J
B E H K
C F I L

此外，通過將它放在ScrollViewer中，它就像告訴它它具有無限大小的屏幕，因此結果將只是一行（因為ScrollViewer會給它提供盡可能多的空間）。 編寫一個面板並不難，它基本上只是兩個功能（測量和排列）。