«Транспонирование» элементов управления в строках и столбцах в сетке 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>

1. Каков наилучший способ добиться этого?
2. Есть ли способ сделать это и избежать кода позади?1011 *

Answer 1

Вы можете сделать свою сетку всегда содержащей 3 строки и 3 столбца. Когда вы используете «строки», вам нужно будет добавить Grid.ColumnSpan="3" (для того чтобы это выглядело одинаково), а при транспонировании используйте RowSpan.

Чтобы выполнить транспонирование, обработка этого в коде, скорее всего, является самым простым вариантом. Позвонив по номенклатуре Grid.GetRow / SetRow / etc, вы можете легко сделать транспонирование.

Чтобы не включать это в код, вы можете создать присоединенное свойство , которое будет работать с самой сеткой. Это позволит вам связать свойство с логическим значением или перечислением в вашей ViewModel и выполнять транспонирование во время выполнения на основе бизнес-логики.

Answer 2

Если вы можете поменять сетки для StackPanels

    <WrapPanel x:Name="Wrap"
               Orientation="Vertical">
        <StackPanel Orientation="{Binding Orientation, ElementName=Wrap, Converter={StaticResource InverseOrientationConverter}}">
            <Label>test1</Label>
            <ComboBox MinWidth="60"></ComboBox>
            <ComboBox MinWidth="60"></ComboBox>
        </StackPanel>
        <StackPanel Orientation="{Binding Orientation, ElementName=Wrap, Converter={StaticResource InverseOrientationConverter}}">
            <Label>test1</Label>
            <TextBox MinWidth="60"></TextBox>
            <TextBox MinWidth="60"></TextBox>
        </StackPanel>
        <StackPanel Orientation="{Binding Orientation, ElementName=Wrap, Converter={StaticResource InverseOrientationConverter}}">
            <Label>test1</Label>
            <ComboBox MinWidth="60"></ComboBox>
            <ComboBox MinWidth="60"></ComboBox>
        </StackPanel>
    </WrapPanel>

Тогда вы сможете использовать этот конвертер

public class InverseOrientationConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (!(value is Orientation))
            throw new ApplicationException();

        Orientation orientation = (Orientation)value;

        if (orientation == Orientation.Horizontal)
            return Orientation.Vertical;

        return Orientation.Horizontal;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}