michielpost.nl

WrapPanel for Windows 8 WinRT

23-08-2012

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

Comments


Dimitrios Vassilakis 05-09-2012
How can I use scrolling with wrappanel.It doesn't seem to work at all. I want to scroll but with no success


Roko 28-09-2012
Hi Michiel! Tnx for this control,It helped me alot. Is there way to eneable scrolling of items inside panel?


Hi there! This is my first visit to your blog! We are a group of volunteers and starting a new initiative in a community in the same niche. Your blog provided us beneficial information to work on. You have done a marvellous job! dedaedagbe 15-04-2014
Hi there! This is my first visit to your blog! We are a group of volunteers and starting a new initiative in a community in the same niche. Your blog provided us beneficial information to work on. You have done a marvellous job! dedaedagbe


Very nice site! <a href="http://aixypeo2.com/ayayva/1.html">cheap goods</a> 16-04-2014
Very nice site! <a href="http://aixypeo2.com/ayayva/1.html">cheap goods</a>


Very nice site! cheap goods http://aixypeo2.com/ayayva/4.html 16-04-2014
Very nice site! cheap goods http://aixypeo2.com/ayayva/4.html


Very nice site! cheap goods http://aixypeo2.com/ayayva/4.html 16-04-2014
Very nice site! cheap goods http://aixypeo2.com/ayayva/4.html


Very nice site! 16-04-2014
Very nice site!


Very nice site! <a href="http://aieypxo2.com/tovoss/1.html">cheap goods</a> 17-04-2014
Very nice site! <a href="http://aieypxo2.com/tovoss/1.html">cheap goods</a>


Very nice site! [url=http://aieypxo2.com/tovoss/2.html]cheap goods[/url] 17-04-2014
Very nice site! [url=http://aieypxo2.com/tovoss/2.html]cheap goods[/url]


Very nice site! <a href="http://oieapxy2.com/tyayvt/1.html">cheap goods</a> 19-04-2014
Very nice site! <a href="http://oieapxy2.com/tyayvt/1.html">cheap goods</a>


Very nice site! <a href="http://opxyiea2.com/yoyayso/1.html">cheap goods</a> 22-04-2014
Very nice site! <a href="http://opxyiea2.com/yoyayso/1.html">cheap goods</a>


Very nice site! cheap goods http://opxyiea2.com/yoyayso/4.html 22-04-2014
Very nice site! cheap goods http://opxyiea2.com/yoyayso/4.html


Very nice site! <a href="http://apeoixy2.com/xqqsq/1.html">cheap goods</a> 09-05-2014
Very nice site! <a href="http://apeoixy2.com/xqqsq/1.html">cheap goods</a>


Very nice site! 09-05-2014
Very nice site!


USA 23-06-2014
adjqhnjdijfmqptu, <a href="http://www.nbazymxwoc.com/">bchfjbdgpv</a> , [url=http://www.gpeeaglzvq.com/]wjaoouxbks[/url], http://www.gtwpzltpkn.com/ bchfjbdgpv


Myles 23-12-2014
Is there a way of aligning the content within the WrapPanel to the center? something like HorizontalContentAlignment?


Very nice site! cheap goods http://ypxaieo2.com/rrqtoxo/4.html 17-08-2016
Very nice site! cheap goods http://ypxaieo2.com/rrqtoxo/4.html


New Comment

Name
E-mail (not published)
Comment
Enter the code shown: