Using WrapPanel in Silverlight 4

Problem: 

                Need to use the WrapPanel control in Silverlight 4.

Solution: 

             Like other layout control grid, stack panel or canvas etc are used to position control on specific order, in grid control you have to define the rows and columns and then set the row and column for the added control in the grid layout control, similarly you set the position of the control horizontal or vertical for the stack panel control and for the canvas you have to set the top and left position of the control which you add in the canvas, but what if you want control to arranged according to the size they are given mean if you have size of 800 by 600 layout control and you have say 100 by 100 control added and want the control o fill the 800 by 600 layout control( like stack panel if you set the orientation of the stack panel to horizontal then control are arranged horizontally and if you set the orientation to vertical then control are arranged in vertical direction but we want both if we have fix layout or resizable layout control). For this reason you can use the WrapPanel Control.
WrapPanel control will arranged child control first horizontally and if child controls are more than the width of the WrapPanel width then it will continue displaying control in new line and so on. You can see the arrangement of the control in WrapPanel in image 1. Here you can see that I have used the WrapPanel control to set the 2 column layout of child controls on left side of the user control and on right side I have used the image control to display the large image selected by user. I have also used the grid splitter control so that the size of the WrapPanel will be resized and you can see the arrangement of the control.

Image 1

The xaml code for the list box control is listed in list 1; here you can see that I have set the horizontal scrolling visibility of the list box control to disabled as I don’t want to have horizontal scrolling for my control only need vertical scrolling. Next in the list box xaml code you can see the I have define the Item template which include the image control to display image ( the width and height of the image control is set, I have set the width and height to 90 as I want to show thumbnail images) and the text block to display the image name.

List 1

Next is the xaml code for the item panel template of the list box control, here you can see that I have added the wrap panel instead of using the stack panel control or any other layout control, also I have added the FluidMoveBehaviour which is provided by the expression blend (one of the built in behavior provided by the expression blend). And set the properties of the behavior like AppliedTo to "Children" and EaseX and EaseY properties animations. I have added the behavior as when you resize the WrapPanel width using the grid splitter provider between the list box control and the full size image control then you can see the rearrangement of the child controls. 

Image 2

You can see the re-arrangement of the child control in Image 2. You can download the source code from here and experience the re-arrangement of child control within the WrapPanel control. 

All and any comments / bugs / suggestions are welcomed!