Set horizontally oriented WrapPanel children to have different height

Question

I have a WPF WrapPanel that is oriented horizontally. When I add add children like Grid controls, they all have the same height. How can I make different children to have different height? Is it possible to make it without using any third party software? I have tried to implement WPF Masonry, but it had a lot of errors and I gave up on that one.

For example, if my first Grid has 3 rows and the second one has 6 rows, the first one stretches to the height of the second Grid.

This is what I have right now:

And this is what I am trying to achieve:

EDIT:

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

My styles:

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

I don't fully understand what you are trying to do. Assuming the display is dynamic (hence not hard coding the values), could you use a custom valueconverter on the height? The you could set the min/max as ConverterParameters. — JsAndDotNet, Feb 23 '17 at 11:00

mm8 · Accepted Answer · 2017-02-23T11:42:46.657

1

How can I make different children to have different height?

What about setting the Height property of the Grid elements that you add to the WrapPanel to some different values?

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

Edit:

You probably also want to set the VerticalAlignment property of the Grid to Top in order for it to not stretch vertically:

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

edited Feb 23 '17 at 11:42

answered Feb 23 '17 at 11:09

mm8

163,881
10
57
88

Please see my edited post. I added some more details. – FireFalcon Feb 23 '17 at 11:13
"if my first Grid has 3 rows and the second one has 6 rows" is ununderstandable. Please post your XAML and relevant code snippets. – mm8 Feb 23 '17 at 11:16
Please check my XAML code. First `Grid` has 3 `RowDefitions` and the second has 5, for example. – FireFalcon Feb 23 '17 at 11:27
How is "grdRate" defined and why didn't you include it in your sample? Remove all resource references or include the resources in your sample markup. – mm8 Feb 23 '17 at 11:31
Added resources. Sorry, forgot about them. They were in a different file. – FireFalcon Feb 23 '17 at 11:35
Set the VerticalAlignment property of the Grid to Top or clarify your issue. I edited my answer. – mm8 Feb 23 '17 at 11:43
Dang it! I'm so mad that couldn't figure that out. So default behavior for VerticalAlignment is Stretch? – FireFalcon Feb 23 '17 at 11:48
Yes, the default value is Stretch. – mm8 Feb 23 '17 at 11:49
VerticalAlignment and HorizontalAlignment is always set to Stretch by Default. You can see it in PropertyGrid – Liero Feb 23 '17 at 11:50
Got it. I just started working with WPF a month ago. It's fun, but sometimes gives a lot of trouble because of a tiny small issue. – FireFalcon Feb 23 '17 at 11:52

Set horizontally oriented WrapPanel children to have different height

1 Answers1