VariableSizedWrapGrid and WrapGrid children size measuring - windows-8

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>

Answer 2

Its may be not the best way but this is how I have done this in my #MetroRSSReader app
<common:VariableGridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="225"
ItemHeight="{Binding ElementName=bounds, Path=Text}"
MaximumRowsOrColumns="5" Orientation="Vertical"
/>
</ItemsPanelTemplate>
</common:VariableGridView.ItemsPanel>
</common:VariableGridView>
Notice the ItemHeight value is bound to a TextBlock
<TextBlock x:Name="bounds" Grid.Row="1" Margin="316,8,0,33" Visibility="Collapsed"/>
Which is set in the LayoutAwarePage.cs
public string Fix_item_height_for_current_screen_resolution()
{
var screenheight = CoreWindow.GetForCurrentThread().Bounds.Height;
var itemHeight = screenheight < 1000 ? "100" : "140";
return itemHeight;
}
You can browse the full source code http://metrorssreader.codeplex.com/SourceControl/changeset/view/18233#265970

Answer 3

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

Answer 4

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)
_myList.LayoutUpdated += _myList_LayoutUpdated;
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):
var items = VisualTreeHelperExtensions.GetDescendantsOfType<TextBlock>(_myList);
if (items == null || items.Count() == 0)
return;
3) Get the max width of the items found:
double maxWidth = items.Max(i => i.ActualWidth) + 8;
4) Use VisualTreeHelperExtensions.GetDescendantsOfType() to find the main WrapGrid container for your ListView:
var wg = _categoryList.GetDescendantsOfType<WrapGrid>();
if (wg == null || wg.Count() != 1)
throw new InvalidOperationException("Couldn't find main ListView container");
5) Set the WrapGrid's ItemWidth to the maxWidth you calculated:
wg.First().ItemWidth = maxWidth;