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?
Managed to figure this one out today. You'll need to make use of VisualTreeHelperExtension.cs in the WinRT XAML Toolkit (http://winrtxamltoolkit.codeplex.com). For me I was trying to adjust a ListView that had a GridView as its ItemsPanelTemplate, the same concept should apply for you.
1) Attach to the LayoutUpdated event of your ListView (this is when you'll want to update the sizes)
2) Use VisualTreeHelperExtensions.GetDescendantsOfType() to find a common (and unique) element type in your item's data template (ex: a TextBlock that is dynamic in width):
3) Get the max width of the items found:
4) Use VisualTreeHelperExtensions.GetDescendantsOfType() to find the main WrapGrid container for your ListView:
5) Set the WrapGrid's ItemWidth to the maxWidth you calculated:
Its may be not the best way but this is how I have done this in my @MetroRSSReader app
Notice the ItemHeight value is bound to a TextBlock
Which is set in the LayoutAwarePage.cs
You can browse the full source code http://metrorssreader.codeplex.com/SourceControl/changeset/view/18233#265970
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:
To use a VariableSizeWrapGrid you should create your own GridView custom control and override
PrepareContainerForItemOverride
and set the elements RowSpan and ColumnSpan inside that method. That way each element will have its own height/width.Here is a nice tutorial/walk through by Jerry Nixon : http://dotnet.dzone.com/articles/windows-8-beauty-tip-using