如何制作不同高度的WrapPanel物品（垂直）？

Question

这是怎么看起来像现在：

，这是我想怎么把它：

如图所示的砖应并列为密集尽可能在它们之间只有一个设定的余量。

这里是我的代码：

<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> 

的代码，当然对我的特殊问题的示例代码 - 后来它应该只是一个包裹面板（或任何其他控件）与项目（这是自定义控件）以编程方式添加（如“WrapPanel1.Children.Add（r）;”）。我希望这些图像是不言自明的。

Answer 1

你在找什么叫级联layout.it有一个非常流行的实现在JavaScript中被称为Masonry它有一个WPF对手被称为 WPF-Masonry。检查前面的链接的细节和演示。