Установите горизонтально ориентированные дети WrapPanel, чтобы иметь разную высоту

Question

У меня есть WPF WrapPanel, который ориентирован горизонтально. Когда я добавляю дочерние элементы, например, Grid, все они имеют одинаковую высоту. Как я могу заставить разных детей иметь разную высоту? Возможно ли это сделать без использования стороннего программного обеспечения? Я попытался реализовать WPF Masonry, но у него было много ошибок, и я отказался от этого.

Например, если мой первый Grid имеет 3 ряда, а второй имеет 6 рядов, первый простирается до высоты второго Grid.

Это то, что я прямо сейчас:

И это то, что я пытаюсь достичь:

EDIT:

Мой XAML:

<WrapPanel Background="White" Height="200"> 
    <Grid Style="{StaticResource grdRate}"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"></ColumnDefinition> 
      <ColumnDefinition Width="Auto"></ColumnDefinition> 
      <ColumnDefinition Width="Auto"></ColumnDefinition> 
      <ColumnDefinition Width="Auto"></ColumnDefinition> 
     </Grid.ColumnDefinitions> 

     <Grid.RowDefinitions> 
      <RowDefinition></RowDefinition> 
      <RowDefinition></RowDefinition> 
     </Grid.RowDefinitions> 

     <Border Grid.Row="0" Grid.Column="0" Style="{StaticResource brdRate}"> 
      <Label Content="Content" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
     <Border Grid.Row="0" Grid.Column="1" Style="{StaticResource brdRate}"> 
      <Label Content="1" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
     <Border Grid.Row="0" Grid.Column="2" Style="{StaticResource brdRate}"> 
      <Label Content="Content" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
     <Border Grid.Row="0" Grid.Column="3" Style="{StaticResource brdRate}"> 
      <Label Content="1" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 

     <Border Grid.Row="1" Grid.Column="0" Style="{StaticResource brdRate}"> 
      <Label Content="123" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
     <Border Grid.Row="1" Grid.Column="1" Style="{StaticResource brdRate}"> 
      <Label Content="123" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
     <Border Grid.Row="1" Grid.Column="2" Style="{StaticResource brdRate}"> 
      <Label Content="123" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
     <Border Grid.Row="1" Grid.Column="3" Style="{StaticResource brdRate}"> 
      <Label Content="123" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
    </Grid> 

    <Grid Style="{StaticResource grdRate}"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"></ColumnDefinition> 
      <ColumnDefinition Width="Auto"></ColumnDefinition> 
      <ColumnDefinition Width="Auto"></ColumnDefinition> 
     </Grid.ColumnDefinitions> 

     <Grid.RowDefinitions> 
      <RowDefinition></RowDefinition> 
      <RowDefinition></RowDefinition> 
      <RowDefinition></RowDefinition> 
      <RowDefinition></RowDefinition> 
      <RowDefinition></RowDefinition> 
     </Grid.RowDefinitions> 

     <Border Grid.Row="0" Grid.Column="0" Style="{StaticResource brdRate}"> 
      <Label Content="name" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
     <Border Grid.Row="0" Grid.Column="1" Style="{StaticResource brdRate}"> 
      <Label Content="Details" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 
     <Border Grid.Row="0" Grid.Column="2" Style="{StaticResource brdRate}"> 
      <Label Content="name" Style="{StaticResource lblRateBold}"></Label> 
     </Border> 

     <Border Grid.Row="1" Grid.Column="0" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
     <Border Grid.Row="1" Grid.Column="1" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
     <Border Grid.Row="1" Grid.Column="2" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 

     <Border Grid.Row="2" Grid.Column="0" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
     <Border Grid.Row="2" Grid.Column="1" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
     <Border Grid.Row="2" Grid.Column="2" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 

     <Border Grid.Row="3" Grid.Column="0" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
     <Border Grid.Row="3" Grid.Column="1" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
     <Border Grid.Row="3" Grid.Column="2" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 

     <Border Grid.Row="4" Grid.Column="0" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
     <Border Grid.Row="4" Grid.Column="1" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
     <Border Grid.Row="4" Grid.Column="2" Style="{StaticResource brdRate}"> 
      <Label Content="ASDF" Style="{StaticResource lblRate}"></Label> 
     </Border> 
    </Grid> 
</WrapPanel> 

Мои стили:

<Style TargetType="Border" x:Key="brdRate"> 
    <Setter Property="BorderBrush" Value="White"></Setter> 
    <Setter Property="BorderThickness" Value="0.5"></Setter> 
</Style> 

<Style TargetType="Label" x:Key="lblRateBold"> 
    <Setter Property="FontSize" Value="14"></Setter> 
    <Setter Property="FontWeight" Value="Bold"></Setter> 
    <Setter Property="HorizontalAlignment" Value="Center"></Setter> 
</Style> 

<Style TargetType="Label" x:Key="lblRate"> 
    <Setter Property="FontSize" Value="14"></Setter> 
    <Setter Property="HorizontalAlignment" Value="Center"></Setter> 
    <Setter Property="Cursor" Value="Hand"></Setter> 
    <Style.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="Background" Value="#40FF00"></Setter> 
     </Trigger> 
    </Style.Triggers> 
</Style> 

<Style TargetType="Grid" x:Key="grdRate"> 
    <Setter Property="Background" Value="#BDBDBD"></Setter> 
    <Setter Property="Margin" Value="5"></Setter> 
</Style> 

Answer 1

Как я могу сделать у разных детей, чтобы иметь различную высоту?

насчет установки Height свойства Grid элементов, добавляемых к WrapPanel некоторых различным значений?

<WrapPanel x:Name="wp"> 
    <Grid Background="Silver" Height="300" Width="50" /> 
    <Grid Background="Silver" Height="20" Width="50" /> 
    <Grid Background="Silver" Height="150" Width="50" /> 
</WrapPanel> 

---

Grid grid = new Grid() { Background = Brushes.Silver, Width = 50, Height = 100 }; 
wp.Children.Add(grid); 

Edit:

Возможно, вы также хотите установить VerticalAlignment свойство Grid в Top для того, чтобы не растянуть по вертикали:

<Grid Style="{StaticResource grdRate}" VerticalAlignment="Top"> 
...