如何强制ListBoxItems在XAML中内联显示

Question

<ListBox Background="Black" ScrollViewer.VerticalScrollBarVisibility="Auto">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item0</ListBoxItem>
    <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item1</ListBoxItem>
    <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item2</ListBoxItem>
    <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item3</ListBoxItem>
    <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item4</ListBoxItem>
    <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item5</ListBoxItem>
    <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item6</ListBoxItem>
    <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item7</ListBoxItem>
</ListBox>

上面的代码在下面产生此图像。

但是我想在下面创建类似此图片的内容。该框在其父控件的末尾分解为下一行。我想使用XAML（如果需要，还可以使用C＃）来实现这一点

Answer 1

您需要使用WrapPanel 和来禁用列表框的水平滚动条：

<ListBox Background="Black" ScrollViewer.VerticalScrollBarVisibility="Auto"
                  ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item0</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item1</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item2</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item3</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item4</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item5</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item6</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item7</ListBoxItem>
        </ListBox>

Answer 2

下面是一个快速示例，将您的StackPanel替换为WrapPanel。它将WrapPanel的宽度绑定到主窗口，以便即使调整窗口大小也可以正确包装项目。

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Name="main">
    <Grid>
        <ListBox Background="Black" ScrollViewer.VerticalScrollBarVisibility="Auto">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal" Width="{Binding ElementName=main, Path=Width}"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item0</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item1</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item2</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item3</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item7</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item7</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item7</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item7</ListBoxItem>
        </ListBox>
    </Grid>
</Window>

由于滚动条往往会使图块重叠一些，因此可能需要稍微调整一下设置。

Answer 3

只需将ItemsPanelTemplate更改为

<ItemsPanelTemplate>
    <WrapPanel MaxWidth="800" Orientation="Horizontal"/>
</ItemsPanelTemplate>

Answer 4

您可以通过用WrapPanel替换StackPanel来修改ItemPanelTemplate。您还需要将WrapPanel的MaxWidth分配给用户控件的宽度和“水平方向”。例如，假设您的用户控件名为“ TestControl”

<ItemsPanelTemplate>
      <WrapPanel MaxWidth="{Binding ElementName=TestControl,Path=Width}" Orientation="Horizontal"/>
</ItemsPanelTemplate>

您的列表框看起来像

<ListBox Background="Black" ScrollViewer.VerticalScrollBarVisibility="Auto">
            <ListBox.ItemsPanel>
               <ItemsPanelTemplate>
                    <WrapPanel MaxWidth="{Binding ElementName=TestControl,Path=Width}" Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item0</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item1</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item2</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item3</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item7</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item7</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item7</ListBoxItem>
            <ListBoxItem Background="White" Width="150" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5">Item7</ListBoxItem>
</ListBox>