The Wrap Panel

The Silverlight Toolkit includes a wrap panel that allows you to add elements to it and will automatically wrap those elements either horizontally or vertically as required to fit them within the size of the panel. All you need to play with WrapPanel is a source of numerous controls – and the easiest way to do that is to generate them programmatically.

To do this, I’ll borrow the code I used to create words in this blog entry on obtaining a lot of words, and put it to use here.   To keep the example for this blog simple, I’ve stripped this down, and added all the words into the source code, eliminating the code surrounding acquiring the words themselves. 

The WrapPanel does not wrap words, however, it wraps controls.  Thus, we’ll use the words as source for the creation of TextBlock controls and it is the TextBlocks that we’ll wrap. But to show that we can also wrap other controls (and to take a quick tangent into the programmatic creation of the source property for images) we’ll add one image.

Here’s how we do it.

First, we’ll lay out our page in Blend.

You can see that we have two rows and two columns. The picture is cropped so it is a bit difficult to see the true proportions, but the top:bottom is approximately 2:7 and left:right is approximately 1:9. 

The Go button gets the words and puts them into the word display panel much as in the previous columns, and then it calls PopulateWrapPChildren, which is the method we’re interested in. Here’s the result:

Clicking the Veridical Radio Button causes the controls to be reorganized within the pattern to wrap vertically rather than horizontally

Implementation

We implement this by iterating through all the words in the collection and creating a new TextBlock for each, adding each newly created TextBlock to the WrapPanel. 

foreach ( string word in words )
{
  WrapP.Children.Add ( new TextBlock 
     { Text = word, Margin = new Thickness (3) } );

To make this just a tiny bit more interesting, I’ve added a counter, and when we’ve added the 10th TextBlock, I then add an Image control.  The image control needs its source set, which is trivial to do in Xaml but somewhat more complex in C#. I’ll set the source to a jpeg on the Silverlight site, which can be done in a single line of code (if you have C programmer roots),

WrapP.Children.Add( new Image() {  Source = new System.Windows.Media.Imaging.BitmapImage(
  new System.Uri("http://silverlight.net/Themes/silverlight/images/learn/tutorial-icons-controls.jpg")),  
  Stretch = System.Windows.Media.Stretch.None} );

but which is far easier to understand if implemented in three easy-to-debug statements, using interim variables,

System.Uri theUri = 
   new System.Uri( "http://silverlight.net/Themes/silverlight/images/learn/tutorial-icons-controls.jpg" );

System.Windows.Media.Imaging.BitmapImage bmi = 
  new System.Windows.Media.Imaging.BitmapImage( theUri );

WrapP.Children.Add( 
   new Image 
      { 
         Source = bmi, 
         Stretch = System.Windows.Media.Stretch.None 
      } );

Here is the source: WrapPanelDemo.zip

                                                              Next: Silverlight Toolkit WrapPanel