VariableSizedWrapGrid and WrapGrid children size measuring

microsoft-metro, windows-8, windows-runtime

Solution

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>

Problem

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?

Original source