转换网格布局 [英] Converting Grid Layout

问题描述

我对 WPF 有点陌生，所以如果这是微不足道的，请原谅我.

I'm somewhat new to WPF, so forgive me if this is trivial.

我的面板设置如下图所示:

I have a panel set up like the following image suggest:

它只是组成我的dockPanel 左侧的面板的表示.它有一列三行——一列用于标题，一列用于图像(汽车只是一个占位符，而不是实际图像)，另一行用于该特定项目的相应统计数据.每个方块之间实际上有一点空间，但我的绘画技巧并不专业.

It's simply a representation of the panel that composes the left side of my dockPanel. It has one column and three rows - one for the title, one for an image (the car is simply a placeholder, not the actual image), and one for corresponding stats for that specific item. There actually is a little bit of space in between each block, but my Paint skills are not pro.

无论如何，我想将此面板转换为位于我的停靠面板底部并变为水平.但是，我希望每行中的最大项目数为 5，如下图所示:

Anyways, I'd like to transition this panel to be on the bottom of my dockpanel and become horizontal. However, I want the max # of items in each row to be 5, as the following image poorly attempts to suggest:

对此有什么好的方法?

我是否应该在后面的代码中执行此操作(即，当我遍历每个项目类型时，如果到目前为止类型的计数可被 5 整除，则创建一个新行并确保每个新块与其上方的块对齐)或者有没有办法在 XAML 中做到这一点?

Should I do this in code behind (i.e. as I loop through each item type, if the count of types thus far is divisible by 5, create a new row and make sure each new block lines up with the one above it) or is there a way to do this in XAML?

任何建议都会很棒.谢谢！

Any advice would be awesome. Thanks!

推荐答案

我建议您使用 UniformGrid 控件.从链接页面:

I would recommend that you use a UniformGrid control. From the linked page:

提供一种在网格中排列内容的方法，其中网格中的所有单元格都具有相同的大小.

Provides a way to arrange content in a grid where all the cells in the grid have the same size.

此外，它有一个 Columns 属性，使您能够设置网格中的列数.

Furthermore, it has a Columns property which enables you to set the number of columns that are in the grid.

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

您可以从 MSDN 上的面板概述页面.

You can find out more about the various Panels used in WPF from the Panels Overview page on MSDN.

这篇关于转换网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！