如何将不同高度的 WrapPanel 项目（垂直）并列？答案

【问题标题】：How to appose WrapPanel items of different heights (vertically)?如何将不同高度的 WrapPanel 项目（垂直）并列？
【发布时间】：2014-06-11 08:52:31
【问题描述】：

这就是现在的样子：

这就是我想要的：

如图所示，瓷砖应该尽可能密集地并排，它们之间只有一个设定的边距。

这是我的代码：

<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);")。我希望这些图像是不言自明的。

【问题讨论】：

标签： c# wpf xaml custom-controls tiles

【解决方案1】：

您正在寻找的是所谓的级联布局。它有一个非常流行的 JavaScript 实现，称为 Masonry，它有一个 WPF 对应物，称为 WPF-Masonry。请查看前面的链接以获取详细信息和演示。

【讨论】：