Как я могу заставить ListBoxItems отображать встроенные в XAML

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

Этот код выше создает это изображение ниже. Как я могу заставить ListBoxItems отображать встроенные в XAML

Но я хочу создать что-то вроде этого изображения ниже. Где поле переходит на следующую строку в конце родительского элемента управления. И я хочу добиться этого с помощью XAML (и C#, если требуется) Как я могу заставить ListBoxItems отображать встроенные в XAML

Попробуйте WrapPanel вместо StackPanel

— MindSwipe 14.01.2019 15:09
c# xaml
14.01.2019 15:04
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
1
102
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>
14.01.2019 15:12
Ответ принят как подходящий

Вот быстрый пример замены вашего 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>

Возможно, придется немного поиграть с настройками, поскольку полосы прокрутки имеют тенденцию немного перекрывать плитки.

14.01.2019 15:13

Просто измените свой ItemsPanelTemplate на

<ItemsPanelTemplate>
    <WrapPanel MaxWidth = "800" Orientation = "Horizontal"/>
</ItemsPanelTemplate>
14.01.2019 15:16

Вы можете сделать это, изменив свой 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>
14.01.2019 15:19

Другие вопросы по теме

Вставить кнопку в NavigationViewItem UWP
UWP VS2017 - внутренняя ошибка Xaml WMC9999: значение этого члена имеет более одного элемента, используйте свойство Items
Как вы объявляете стили таким образом, чтобы можно было переопределить глобальный стиль?
Элемент внутри Flyout в XAML недоступен из Code Behind
Привязка текста через всплывающую подсказку к конкретному элементу ComboBox с использованием TextBlock C# MVVM XAML
Xamarin.Forms: привязка к коду за свойством в XAML
Как "унаследовать" от базового xaml
Как добавить несколько изменений в DataGridTextColumn со стилем с помощью XAML в приложении WPF?
Как показать количество всех прямых и косвенных дочерних членов в wpf treeview
Пропорциональное растягивание дочерних элементов внутри StackPanel

Похожие вопросы

Как правильно постобработать возвращаемые значения Refit?
Должна ли каждая операция выполняться одной командой?
Visual Studio 2017, сборка решения или публикация не создают .EXE
Не удается преобразовать из System.Collection.Generic.List <Dal.Questio> в Dal.Questio
Пользовательский интерфейс администратора IdentityServer4
Найти значение в Dictionary <int, List <int>>
Создание XML Treeview
Вызов PDFStamper.set_Outlines вызывает ошибку типа
AspNetCore - Serilog - неправильный вход в папку IISExpress
Oledb условие запроса со столбцом по номеру