根据列表框中数据库中的记录动态添加行 mvvm mvvm light

Question

我有一个列表框，在其中显示数据库中的记录。它在同一列中一个接一个地出现。如何以编程方式将记录放置为 3 行 3 列，即一行 3 条记录，之后一行 3 条记录。请建议？

谢谢。

Answer 1

如果记录是（或可以是）固定宽度，则很简单：只需将 ListBox.ItemsPanel 更改为 WrapPanel 并将 ListBox 宽度设置为项目宽度的 3 倍多一点：

<DataTemplate DataType="{x:Type my:CustomItem}">
  <Border Width="100" ...>
    ...
  </Border>
</DataTemplate>

...

<ListBox ... Width="320">
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel/>
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
  ...
</ListBox>

如果需要划分可用宽度三，并且您知道所有项目的高度完全相同（或者如果您同意所有行都是任何项目的最大高度），则有一个非常简单的解决方案，使用 UniformGrid 且未指定高度：

<ListBox ... >
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <UniformGrid Width="3" />
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
  ...
</ListBox>

如果您想要将可用宽度除以 3 以获得项目宽度，但在垂直方向上尽可能紧密地堆叠项目，这是可能的，但在纯 XAML 中很棘手。 （我不建议在纯 XAML 中执行此操作，但如果您想这样做，可以创建一个包含三个星形大小的列和一个固定宽度列的隐藏网格，然后使用绑定到第一个的 ActualWidth隐藏网格的列。）

一种更简单的方法是创建一个简单的自定义面板，其水平方向类似于 UniformGrid，但垂直方向类似于 StackPanel。这是一个非常简单的 Panel 子类：

• MeasureOverride 将所需宽度计算为 3* 任何子项的最大宽度
• MeasureOverride 将所需高度计算为 sum(max(每组 3 的高度))
• ArrangeOverride 每行布置 3 个子项，每个 DesiredWidth/3 为上一行的右侧，下一行是当前行向下的 max(height)

显然，如果您设计一个自定义面板，您不会对“3”进行硬编码 - 您将使其成为一个属性，可能是一个 DependencyProperty ，这样您就可以轻松更改它，并且可以在需要时在其他地方重复使用您的面板。