How to place WrapPanel objects of different heights (vertically)?

Question

Here's what it looks like right now:

and that’s how I would like to have it:

As shown, the tiles should be installed as tightly as possible, only with a specified gap between them.

And here is my code:

<Grid Background="Gray">
    <TextBox x:Name="BoardNameTextBox" HorizontalAlignment="Left" Height="23" Margin="40,3,0,0" TextWrapping="Wrap" Text="pol" VerticalAlignment="Top" Width="120"/>
    <Button Content="Button" HorizontalAlignment="Left" Margin="491,3,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
    <Grid Margin="0,30,0,0" Background="WhiteSmoke">

        <WrapPanel VerticalAlignment="Top" HorizontalAlignment="Left">
            <WrapPanel.Resources>
                <Style TargetType="{x:Type Rectangle}">
                    <Setter Property="Width" Value="80" />
                    <Setter Property="Height" Value="80" />
                    <Setter Property="Margin" Value="3" />
                    <Setter Property="Fill" Value="#4DB4DD" />
                </Style>
            </WrapPanel.Resources>

            <Rectangle Width="150" />
            <Rectangle />
            <Rectangle />
            <Rectangle />
            <Rectangle Width="200"/>
            <Rectangle Height="25"/>
            <Rectangle Height="40"/>
            <Rectangle />
            <Rectangle Width="220"/>
            <Rectangle Height="30"/>
            <Rectangle Height="30"/>
            <Rectangle Width="150" />
            <Rectangle />
        </WrapPanel>

    </Grid>

</Grid>

The code, of course, is an example of code for my specific problem - later it should just be a cover panel (or any other control) with added software tools (which are custom controls) (for example, WrapPanel1.Children.Add (p); " ). I hope the images are self-explanatory.

Answer 1

, , layout.it javascript Masonry, WPF WPF-. .