title: Set horizontally oriented WrapPanel children to have different height
body: <p>I have a WPF <code>WrapPanel</code> that is oriented horizontally. When I add add children like <code>Grid</code> controls, they all have the same height. How can I make different children to have different height? Is it possible to make it without using any third party software? I have tried to implement <a href="https://github.com/Lizzaran/WPF-Masonry" rel="nofollow noreferrer">WPF Masonry</a>, but it had a lot of errors and I gave up on that one.</p>
  
  <p>For example, if my first <code>Grid</code> has 3 rows and the second one has 6 rows, the first one stretches to the height of the second <code>Grid</code>.</p>
  
  <p>This is what I have right now:
  <a href="https://i.stack.imgur.com/Tfzdm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tfzdm.png" alt="enter image description here"></a></p>
  
  <p>And this is what I am trying to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/Tfzdm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SIPs0.png" alt="enter image description here"></a></p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>My XAML:</p>
  
  <pre><code>&lt;WrapPanel Background="White" Height="200"&gt;
      &lt;Grid Style="{StaticResource grdRate}"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="Auto"&gt;&lt;/ColumnDefinition&gt;
              &lt;ColumnDefinition Width="Auto"&gt;&lt;/ColumnDefinition&gt;
              &lt;ColumnDefinition Width="Auto"&gt;&lt;/ColumnDefinition&gt;
              &lt;ColumnDefinition Width="Auto"&gt;&lt;/ColumnDefinition&gt;
          &lt;/Grid.ColumnDefinitions&gt;
  
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition&gt;&lt;/RowDefinition&gt;
              &lt;RowDefinition&gt;&lt;/RowDefinition&gt;
          &lt;/Grid.RowDefinitions&gt;
  
          &lt;Border Grid.Row="0" Grid.Column="0" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="Content" Style="{StaticResource lblRateBold}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
          &lt;Border Grid.Row="0" Grid.Column="1" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="1" Style="{StaticResource lblRateBold}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
          &lt;Border Grid.Row="0" Grid.Column="2" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="Content" Style="{StaticResource lblRateBold}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
          &lt;Border Grid.Row="0" Grid.Column="3" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="1" Style="{StaticResource lblRateBold}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
  
          &lt;Border Grid.Row="1" Grid.Column="0" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="123" Style="{StaticResource lblRateBold}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
          &lt;Border Grid.Row="1" Grid.Column="1" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="123" Style="{StaticResource lblRateBold}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
          &lt;Border Grid.Row="1" Grid.Column="2" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="123" Style="{StaticResource lblRateBold}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
          &lt;Border Grid.Row="1" Grid.Column="3" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="123" Style="{StaticResource lblRateBold}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
      &lt;/Grid&gt;
  
      &lt;Grid Style="{StaticResource grdRate}"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="Auto"&gt;&lt;/ColumnDefinition&gt;
              &lt;ColumnDefinition Width="Auto"&gt;&lt;/ColumnDefinition&gt;
              &lt;ColumnDefinition Width="Auto"&gt;&lt;/ColumnDefinition&gt;
          &lt;/Grid.ColumnDefinitions&gt;
  
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition&gt;&lt;/RowDefinition&gt;
              &lt;RowDefinition&gt;&lt;/RowDefinition&gt;
              &lt;RowDefinition&gt;&lt;/RowDefinition&gt;
              &lt;RowDefinition&gt;&lt;/RowDefinition&gt;
              &lt;RowDefinition&gt;&lt;/RowDefinition&gt;
          &lt;/Grid.RowDefinitions&gt;
  
          &lt;Border Grid.Row="0" Grid.Column="0" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="name" Style="{StaticResource lblRateBold}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
          &lt;Border Grid.Row="0" Grid.Column="1" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="Details" Style="{StaticResource lblRateBold}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
          &lt;Border Grid.Row="0" Grid.Column="2" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="name" Style="{StaticResource lblRateBold}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
  
          &lt;Border Grid.Row="1" Grid.Column="0" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="ASDF" Style="{StaticResource lblRate}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
          &lt;Border Grid.Row="1" Grid.Column="1" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="ASDF" Style="{StaticResource lblRate}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
          &lt;Border Grid.Row="1" Grid.Column="2" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="ASDF" Style="{StaticResource lblRate}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
  
          &lt;Border Grid.Row="2" Grid.Column="0" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="ASDF" Style="{StaticResource lblRate}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
          &lt;Border Grid.Row="2" Grid.Column="1" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="ASDF" Style="{StaticResource lblRate}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
          &lt;Border Grid.Row="2" Grid.Column="2" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="ASDF" Style="{StaticResource lblRate}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
  
          &lt;Border Grid.Row="3" Grid.Column="0" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="ASDF" Style="{StaticResource lblRate}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
          &lt;Border Grid.Row="3" Grid.Column="1" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="ASDF" Style="{StaticResource lblRate}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
          &lt;Border Grid.Row="3" Grid.Column="2" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="ASDF" Style="{StaticResource lblRate}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
  
          &lt;Border Grid.Row="4" Grid.Column="0" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="ASDF" Style="{StaticResource lblRate}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
          &lt;Border Grid.Row="4" Grid.Column="1" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="ASDF" Style="{StaticResource lblRate}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
          &lt;Border Grid.Row="4" Grid.Column="2" Style="{StaticResource brdRate}"&gt;
              &lt;Label Content="ASDF" Style="{StaticResource lblRate}"&gt;&lt;/Label&gt;
          &lt;/Border&gt;
      &lt;/Grid&gt;
  &lt;/WrapPanel&gt;
  </code></pre>
  
  <p><strong>My styles:</strong></p>
  
  <pre><code>&lt;Style TargetType="Border" x:Key="brdRate"&gt;
      &lt;Setter Property="BorderBrush" Value="White"&gt;&lt;/Setter&gt;
      &lt;Setter Property="BorderThickness" Value="0.5"&gt;&lt;/Setter&gt;
  &lt;/Style&gt;
  
  &lt;Style TargetType="Label" x:Key="lblRateBold"&gt;
      &lt;Setter Property="FontSize" Value="14"&gt;&lt;/Setter&gt;
      &lt;Setter Property="FontWeight" Value="Bold"&gt;&lt;/Setter&gt;
      &lt;Setter Property="HorizontalAlignment" Value="Center"&gt;&lt;/Setter&gt;
  &lt;/Style&gt;
  
  &lt;Style TargetType="Label" x:Key="lblRate"&gt;
      &lt;Setter Property="FontSize" Value="14"&gt;&lt;/Setter&gt;
      &lt;Setter Property="HorizontalAlignment" Value="Center"&gt;&lt;/Setter&gt;
      &lt;Setter Property="Cursor" Value="Hand"&gt;&lt;/Setter&gt;
      &lt;Style.Triggers&gt;
          &lt;Trigger Property="IsMouseOver" Value="True"&gt;
              &lt;Setter Property="Background" Value="#40FF00"&gt;&lt;/Setter&gt;
          &lt;/Trigger&gt;
      &lt;/Style.Triggers&gt;
  &lt;/Style&gt;
  
  &lt;Style TargetType="Grid" x:Key="grdRate"&gt;
      &lt;Setter Property="Background" Value="#BDBDBD"&gt;&lt;/Setter&gt;
      &lt;Setter Property="Margin" Value="5"&gt;&lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>