Using the WrapPanel of the Silverlight Toolkit

The WrapPanel control doesn’t come standard in Visual Studio 2010, it has been removed and placed in the Silverlight Toolkit which can be downloaded from Codeplex

Making a Windows Explorer “like” interface using the WrapPanel in Silverlight 4

The WrapPanel is a very useful control that allows you to place multiple controls within it and have either a Horizontal or Vertical orientation.  I’m going to show how you can make cool interfaces such as the Windows Explorer window where controls have a horizontal orientation but when they run out of room they continue vertically.  The best way to describe this is show a real-world example.  The Windows Explorer window is a prime example of how a wrap-panel functions, as you narrow the window size the number of columns decrease, and number of rows increase.

Here is my Windows Explorer window with enough space for two columns

Silverlight WrapPanel

And with the window size narrowed enough to fit only one column

Silverlight WrapPanel

Making controls like this in Silverlight 4 (or any tool supporting XAML and WrapPanel) are really simple.

I’ve made each “drive” a separate StackPanel and each of the three StackPanel exist within a WrapPanel.

You’ll notice that I’ve hard coded attributes defining the length and color of the graphic bar that illustrates how much space has been used and amount remaining.  Normally you would set these values dynamically in code.  This example exists for the sole purpose of showing how to use the WrapPanel and high-level overview of  XAML.

Building a Windows Explorer Type Control – Step 1

To use the Silverlight Toolkit Wrap Panel you’ll need to add a reference to the Silverlight Tooklit assembly.  Add the reference by right clicking on the references section of your source code in the Silverlight Project and browse to the System.Windows.Control.Toolkit assembly.

Important: The toolkit is an Open Source add-on and does not ship with Visual Studio. If you don’t have it you’ll need to download and install the Silverlight 4 Toolkit – April 2010 release from CodePlex.  Hint:  Remember the location where you installed the Silverlight Toolkit so that you can add the reference to your projects (see illustration below).

Silverlight Add Toolkit Reference


Add the Silverlight Toolkit to your namespace declarations

Important: Add this to your XAML,  simply paste it along with the other namespace declarations at the top of your code.

xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"

If you paste the namespace exactly like above then you will use ‘toolkit:‘ as a prefix in XAML that references any Silverlight Toolkit specific code. (e.g.  <toolkit:WrapPanel Name=”SLWrapPanel”> ).     This prefix ties the XAML element to a particular namespace declaration and ultimately tells Silverlight where to find the definition for the WrapPanel.

 

Building a Windows Explorer Type Control – Step 2

The Hard Drive type control was built with several layered StackPanels that go inside the WrapPanel.  The inner-most StackPanel wraps one graphic bar, then another wraps that bar along with the text above and below the bar (e.g. hard drive name and space used/available), and third StackPanel wraps the graphic bar & texts along with the image of the hard-drive. There are three sets of these StackPanel groupings,  one for each hard drive.

The XAML is hard coded, but in real life the code would be generated dynamically.  The graphic bars would be set by making the colored section wider and the empty part narrower.

Take a look at the XAML, you may need to click it to view full size. Notice how each drive was constructed within the WrapPanel.

XAML, StackPanel and WrapPanel

XAML, StackPanel and WrapPanel

The Final Result of WrapPanel shown as Silverlight Page, utilizing the Silverlight Toolkit

The drives will flow left to right and top-down automatically by functionality of the WrapPanel.  I’ve adjusted the width to accommodate two columns.

Silverlight XAML WrapPanel

Silverlight XAML WrapPanel, StackPanel using Toolkit

 

The images used to construct the bars are 4 simple graphics that I made from a print screen of my Windows Explorer.   With these four graphics you can assemble any size graphic bar needed in blue or red.  For example, the first bar of my sample was made using four different graphics set to specific widths.

Hard Drive Creation Process using three nested StackPanels

WrapPanel Contruction using three nested StackPanels

WrapPanel Contruction using three nested StackPanels

 

Windows Explorer Images

Windows Explorer Images

 

I hope this example of using a WrapPanel and StackPanels in XAML while utilizing the Silverlight Toolkit has been useful to you.  The XAML would be quite similar in any programming language that uses XAML such as PowerBuilder or WPF.

 

Sincerely,

Rich (aka DisplacedGuy)

3 Responses

  1. Thanks for the nice comment on my blog. Much appreciated, hope to see you around more.
    Let me know the type content you would like to see more of.
    I tried sending this via email but the email address bounced.

Leave a Reply

Your email address will not be published. Required fields are marked *