以 Z 方式将元素绑定到 2 个不同的列

Posted 2023-02-15

【中文标题】以 Z 方式将元素绑定到 2 个不同的列

【英文标题】：Bind elements to 2 different columns in a Z way

【发布时间】：2021-10-13 06:37:48

【问题描述】：

我有一个网格分为两列的主视图。

问题是我有一个动态创建的视图模型（带有不同范围的文本框的用户控件）的组织列表，我想以 Z 方式显示它们。 即：从左到右，从上到下（见图）

目前我正在使用类似上面的代码，根据元素索引将视图模型中的列表分成两个不同的列表。

<Grid>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Stackpanel Grid.Column=0>
  <ItemsControl.ItemTemplate>
    <DataTemplate DataType="EvenElements">
        <Border>
            <TextBlock Text="Binding" />
        </Border>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</Stackpanel> 

<Stackpanel Grid.Column=1>
  <ItemsControl.ItemTemplate>
    <DataTemplate DataType="OddElements">
        <Border>
            <TextBlock Text="Binding" />
        </Border>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</Stackpanel> 
</Grid>

有没有办法以 单一绑定 样式进行操作？我不想稍后加入文本框输入，因为索引很重要，而且代码看起来不那么干净。谢谢

【问题讨论】：

您是否尝试过使用 WrapPanel 控件或 UniformGrid ？

【参考方案1】：

如果我正确理解您的问题，您可以使用UniformGrid 作为ItemsPanel 的ItemsPanel：

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="2" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

【讨论】：

甜蜜。像魅力一样工作。