将水平方向的 WrapPanel children 设置为不同的高度

Question

我有一个水平方向的 WPF WrapPanel。当我添加 add children like Grid 控件时，它们都具有相同的高度。如何使不同的 children 具有不同的高度？是否可以在不使用任何第三方软件的情况下制作它？我曾尝试实现 WPF Masonry，但它有很多错误，我放弃了那个。

例如，如果我的第一个 Grid 有 3 行，第二个有 6 行，则第一个延伸到第二个 Grid 的高度。

这是我现在拥有的：

这就是我想要实现的目标：

编辑：

我的XAML:

<WrapPanel Background="White" Height="200">
    <Grid Style="{StaticResource grdRate}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Border Grid.Row="0" Grid.Column="0" Style="{StaticResource brdRate}">
            <Label Content="Content" Style="{StaticResource lblRateBold}"></Label>
        </Border>
        <Border Grid.Row="0" Grid.Column="1" Style="{StaticResource brdRate}">
            <Label Content="1" Style="{StaticResource lblRateBold}"></Label>
        </Border>
        <Border Grid.Row="0" Grid.Column="2" Style="{StaticResource brdRate}">
            <Label Content="Content" Style="{StaticResource lblRateBold}"></Label>
        </Border>
        <Border Grid.Row="0" Grid.Column="3" Style="{StaticResource brdRate}">
            <Label Content="1" Style="{StaticResource lblRateBold}"></Label>
        </Border>

        <Border Grid.Row="1" Grid.Column="0" Style="{StaticResource brdRate}">
            <Label Content="123" Style="{StaticResource lblRateBold}"></Label>
        </Border>
        <Border Grid.Row="1" Grid.Column="1" Style="{StaticResource brdRate}">
            <Label Content="123" Style="{StaticResource lblRateBold}"></Label>
        </Border>
        <Border Grid.Row="1" Grid.Column="2" Style="{StaticResource brdRate}">
            <Label Content="123" Style="{StaticResource lblRateBold}"></Label>
        </Border>
        <Border Grid.Row="1" Grid.Column="3" Style="{StaticResource brdRate}">
            <Label Content="123" Style="{StaticResource lblRateBold}"></Label>
        </Border>
    </Grid>

    <Grid Style="{StaticResource grdRate}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Border Grid.Row="0" Grid.Column="0" Style="{StaticResource brdRate}">
            <Label Content="name" Style="{StaticResource lblRateBold}"></Label>
        </Border>
        <Border Grid.Row="0" Grid.Column="1" Style="{StaticResource brdRate}">
            <Label Content="Details" Style="{StaticResource lblRateBold}"></Label>
        </Border>
        <Border Grid.Row="0" Grid.Column="2" Style="{StaticResource brdRate}">
            <Label Content="name" Style="{StaticResource lblRateBold}"></Label>
        </Border>

        <Border Grid.Row="1" Grid.Column="0" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
        <Border Grid.Row="1" Grid.Column="1" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
        <Border Grid.Row="1" Grid.Column="2" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>

        <Border Grid.Row="2" Grid.Column="0" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
        <Border Grid.Row="2" Grid.Column="1" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
        <Border Grid.Row="2" Grid.Column="2" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>

        <Border Grid.Row="3" Grid.Column="0" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
        <Border Grid.Row="3" Grid.Column="1" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
        <Border Grid.Row="3" Grid.Column="2" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>

        <Border Grid.Row="4" Grid.Column="0" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
        <Border Grid.Row="4" Grid.Column="1" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
        <Border Grid.Row="4" Grid.Column="2" Style="{StaticResource brdRate}">
            <Label Content="ASDF" Style="{StaticResource lblRate}"></Label>
        </Border>
    </Grid>
</WrapPanel>

我的风格：

<Style TargetType="Border" x:Key="brdRate">
    <Setter Property="BorderBrush" Value="White"></Setter>
    <Setter Property="BorderThickness" Value="0.5"></Setter>
</Style>

<Style TargetType="Label" x:Key="lblRateBold">
    <Setter Property="FontSize" Value="14"></Setter>
    <Setter Property="FontWeight" Value="Bold"></Setter>
    <Setter Property="HorizontalAlignment" Value="Center"></Setter>
</Style>

<Style TargetType="Label" x:Key="lblRate">
    <Setter Property="FontSize" Value="14"></Setter>
    <Setter Property="HorizontalAlignment" Value="Center"></Setter>
    <Setter Property="Cursor" Value="Hand"></Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#40FF00"></Setter>
        </Trigger>
    </Style.Triggers>
</Style>

<Style TargetType="Grid" x:Key="grdRate">
    <Setter Property="Background" Value="#BDBDBD"></Setter>
    <Setter Property="Margin" Value="5"></Setter>
</Style>

Answer 1

How can I make different children to have different height?

如何将添加到 WrapPanel 的 Grid 元素的 Height 属性设置为一些不同的值？

<WrapPanel x:Name="wp">
    <Grid Background="Silver" Height="300" Width="50" />
    <Grid Background="Silver" Height="20"  Width="50" />
    <Grid Background="Silver" Height="150"  Width="50" />
</WrapPanel>

Grid grid = new Grid() { Background = Brushes.Silver, Width = 50, Height = 100 };
wp.Children.Add(grid);

编辑：

您可能还想将 Grid 的 VerticalAlignment 属性设置为 Top 以使其不垂直拉伸：

<Grid Style="{StaticResource grdRate}" VerticalAlignment="Top">
...

将水平方向的 WrapPanel children 设置为不同的高度

Set horizontally oriented WrapPanel children to have different height

c#

wpf

wrappanel