VariableSizedWrapGrid and WrapGrid children size measuring

Question

Both VariableSizedWrapGrid and WrapGrid have strange measuring - they measure all children based on the first item.

Because of that, the following XAML will clip the third item.

    <VariableSizedWrapGrid Orientation="Horizontal">
        <Rectangle Width="50" Height="100" Margin="5" Fill="Blue" />
        <Rectangle Width="50" Height="50" Margin="5" Fill="Red" />
        <Rectangle Width="50" Height="150" Margin="5" Fill="Green" />
        <Rectangle Width="50" Height="50" Margin="5" Fill="Red" />
        <Rectangle Width="50" Height="100" Margin="5" Fill="Red" />
    </VariableSizedWrapGrid>

Seems like VariableSizedWrapGrid measures the first item and then the rest children are measured with desired size of the first one.

Any workarounds?

Answer 1

You need to use the Attached Properties on each Rectangle VariableSizeWrapGrid.ColumnSpan and VariableSizeWrapGrid.RowSpan as well as add an ItemHeight and ItemWidth to the VariableSizeWrapGrid:

<VariableSizedWrapGrid Orientation="Horizontal" ItemHeight="50" ItemWidth="50"> 
    <Rectangle 
        VariableSizedWrapGrid.ColumnSpan="1" 
        VariableSizedWrapGrid.RowSpan="2"
        Width="50" Height="100" Margin="5" Fill="Blue" /> 
</VariableSizedWrapGrid>