如何垂直放置不同高度的WrapPanel项目？ [英] How to appose WrapPanel items of different heights (vertically)?

问题描述

这是现在的样子：

这就是我想要的方式：

< img src = https://i.stack.imgur.com/AZ2vN.jpg alt =标题，并列>

如图所示，应并列并列

这是我的代码：

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

The code is of course a sample code for my particular problem - later on it should just be a wrap panel (or any other control) with the items (which are custom controls) added programmatically (like "WrapPanel1.Children.Add(r);"). I hope the images are self-explanatory.

推荐答案

您正在寻找的称为级联布局。它具有非常流行的实现。在名为砌体的javascript中，它具有 WPF 对应物，称为 WPF-石工。检查前面的链接以获取详细信息和演示。

What you are looking for is called cascading layout.it has a very popular implementation in javascript called Masonry which has a WPF counterpart known as WPF-Masonry .check preceding links for detail and demo.

这篇关于如何垂直放置不同高度的WrapPanel项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！