Как я могу заставить 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

Вы можете сделать это, изменив свой ItemPanelTemplate, заменив StackPanel на WrapPanel. Вам также необходимо назначить MaxWidth WrapPanel для ширины пользовательского элемента управления и горизонтальной ориентации. Например, если предположить, что ваш пользовательский элемент управления называется «TestControl»

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

Ваш ListBox будет выглядеть так.

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

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 и , чтобы отключить горизонтальную полосу прокрутки списка:

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