Преобразование макета сетки

#c# #wpf #xaml

#c #wpf #xaml

Вопрос:

Я несколько новичок в WPF, поэтому простите меня, если это тривиально.

У меня настроена панель, как показано на следующем изображении:

введите описание изображения здесь

Это просто представление панели, которая составляет левую часть моей док-панели. В нем есть один столбец и три строки — одна для заголовка, одна для изображения (автомобиль — это просто заполнитель, а не само изображение), и одна для соответствующей статистики для этого конкретного элемента. На самом деле между каждым блоком есть немного места, но мои навыки рисования не являются профессиональными.

В любом случае, я бы хотел перенести эту панель в нижнюю часть моей док-панели и сделать ее горизонтальной. Однако я хочу, чтобы максимальное количество элементов в каждой строке было равно 5, как показывает следующее изображение:

введите описание изображения здесь

Какой хороший подход для этого?

Должен ли я делать это в коде (т. Е., Когда я перебираю каждый тип элемента, если количество типов до сих пор делится на 5, создайте новую строку и убедитесь, что каждый новый блок совпадает с тем, который находится над ним) или есть способ сделать это в XAML?

Любой совет был бы потрясающим. Спасибо!

Комментарии:

1. Should I do this in code behind — определенно нет. В WPF ничего не делается в коде, кроме, может быть, сложных (действительно сложных) анимаций, включающих множество раскадровок и тому подобных вещей.

2. Почему 5? Если вы просто хотите, чтобы он переносился, если он превышает доступный размер, поместите их в WrapPanel .

3. Что ж, как ни странно, я использую анимацию раскадровки — но только для анимации увеличения статистики. И, Джим, это 5 по спецификации. Не мое решение ^_ ^

Ответ №1:

Я бы рекомендовал вам использовать UniformGrid элемент управления. Со связанной страницы:

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

Кроме того, у него есть Columns свойство, которое позволяет вам устанавливать количество столбцов в сетке.

 <ListBox ItemsSource="{Binding Items}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="5" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>
  

Вы можете узнать больше о различных Panel s, используемых в WPF, на странице обзора панелей в MSDN.