WrapPanel for Windows 8 WinRT
This is the first in a series of blog post about the Q42.WinRT open source toolkit for Windows 8.
Out of the box, there's no WrapPanel available for WinRT. There's the VariableSizedWrapGrid, which you can use. But it doesn't work well with items that have different sized. Each item in the grid gets sizes based on the dimensions of the first item.
You can see this behaviour in action here:
http://social.msdn.microsoft.com/Forums/en-IE/winappswithcsharp/thread/569e048a-9f5e-4fb3-870a-380de5906e80
Searching for a good WrapPanel, I found one for Silverlight 2. Silverlight 2 did not have a native WrapPanel, so an open source WrapPanel was created by "Ineir":
http://www.codeproject.com/Articles/24141/WrapPanel-for-Silverlight-2-0
This piece of codes also works great with WinRT. I ported it and included it in the Q42.WinRT toolkit.
You can use it like this:
First add this to the top of your page:
xmlns:q42controls="using:Q42.WinRT.Controls"
Then use the WrapPanel:
<q42controls:WrapPanel Orientation="Horizontal" Width="400" >
<Border Height="20" Width="40" Margin="5" Background="BlueViolet" />
<Border Height="50" Width="160" Margin="5" Background="CornflowerBlue" />
<Border Height="40" Width="60" Margin="5" Background="DarkKhaki" />
<Border Height="60" Width="90" Margin="5" Background="DarkSlateBlue" />
<Border Height="90" Width="90" Margin="5" Background="GreenYellow" />
<Border Height="70" Width="120" Margin="5" Background="Thistle" />
</q42controls:WrapPanel>
Download the sample app for the Q42.WinRT toolkit to see the WrapPanel in action:
http://github.com/Q42/Q42.WinRT