wpf - WPF 网格中的行和列中的“转置”控件

Question

我有一个包装面板，它充当一组定义为的控件的容器

<WrapPanel Orientation="Horizontal">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition  />
      <RowDefinition   />
      <RowDefinition   />
    </Grid.RowDefinitions>
    <Label Grid.Row="0">test1</Label>
    <ComboBox Grid.Row="1" MinWidth="60"></ComboBox>
    <ComboBox Grid.Row="2" MinWidth="60"></ComboBox>
  </Grid>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition  />
      <RowDefinition   />
      <RowDefinition   />
    </Grid.RowDefinitions>
    <Label Grid.Row="0">test1</Label>
    <TextBox Grid.Row="1" MinWidth="60"></TextBox>
    <TextBox Grid.Row="2" MinWidth="60"></TextBox>
  </Grid>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition  />
      <RowDefinition   />
      <RowDefinition   />
    </Grid.RowDefinitions>
    <Label Grid.Row="0">test1</Label>
    <ComboBox Grid.Row="1" MinWidth="60"></ComboBox>
    <ComboBox Grid.Row="2" MinWidth="60"></ComboBox>
  </Grid>           
</WrapPanel>

所以基本上它包装了多个网格，每个网格有 3 行，并且网格中的每个单元格都有一个控件。
我希望用户能够“转置”此布局，以便包装面板现在具有垂直方向，并且网格现在是 3 列网格。所以如果手动完成，xaml 看起来像

<WrapPanel Orientation="Vertical">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition  />
      <ColumnDefinition  />
      <ColumnDefinition  />
    </Grid.ColumnDefinitions>
    <Label Grid.Column="0">test1</Label>
    <ComboBox Grid.Column="1" MinWidth="60"></ComboBox>
    <ComboBox Grid.Column="2" MinWidth="60"></ComboBox>
  </Grid>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition  />
      <ColumnDefinition  />
      <ColumnDefinition  />
    </Grid.ColumnDefinitions>
    <Label Grid.Column="0">test1</Label>
    <TextBox Grid.Column="1" MinWidth="60"></TextBox>
    <TextBox Grid.Column="2" MinWidth="60"></TextBox>
  </Grid>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition  />
      <ColumnDefinition  />
      <ColumnDefinition  />
    </Grid.ColumnDefinitions>
    <Label Grid.Column="0">test1</Label>
    <ComboBox Grid.Column="1" MinWidth="60"></ComboBox>
    <ComboBox Grid.Column="2" MinWidth="60"></ComboBox>
  </Grid>           
</WrapPanel>

实现这一目标的最佳方法是什么？

有没有办法做到这一点并避免代码隐藏？

Answer 1

您可以使您的网格始终包含 3 行和 3 列。当您使用“行”时，您需要添加 Grid.ColumnSpan="3" (为了保持这个看起来一样)，并且在转置时，使用 RowSpan .

为了进行转置，在代码中处理它很可能是最简单的选择。调用 Grid.GetRow/SetRow/etc 在您的项目上，您可以轻松地进行换位。

为避免将其放入后面的代码中，您可以创建 attached property这适用于网格本身。这将允许您将属性绑定(bind)到 ViewModel 中的 bool 值或枚举，并在运行时根据业务逻辑执行转置。