If you want to use the controls talked about in this article you will need to get the free Custom Control Toolkit from Codeplex. You can read how to do this and install them in my post here.

You can download the example files for this article here.

This week I want to show the benefits of using the Wrap Panel. The Wrap Panel is an extension of the Stack Panel, with the additional feature of wrapping content either vertically or horizontally. Just like the Stack Panel the content can be switched on and off while the control updates the positioning visually.

Orientation=“Horizontal”
Orientation=“Vertical”

However, when using the Expression Blend interface the option to switch between the two has been moved into the Common Properties area.

The only additional control that differs from the Stack Panel is also located within the Common Properties area. ‘ItemWidth‘ and ‘ItemHeight‘ are set by default to ‘Auto‘ but can be changed to set a maximum area for the items inside the Wrap Panel to adhere to.

If you want to use the controls talked about in this article you will need to get the free Custom Control Toolkit from Codeplex. You can read how to do this and install them in my post here.

You can download the example files for this article here.

The first Custom control I want to talk about is the Dock Panel. The Dock Panel in many ways works the same as a Stack panel. Items inside either control will naturally stack.

Their are 2 main differences between these two controls.

Difference 1: The Dock Panel lets the items inside it decide which way they stack as opposed to the Stack panel which can be set to stack either horizontally or vertically. The benefit of letting the items inside control how they stack is that they can each stack in different directions giving you more control.

Difference 2: The Dock Panel has an additional setting called ‘LastChildFill’. If this is set to ‘True’ then the last item in the stack will naturally stretch to fill the remainder of the Dock Panel’s size. See the example below how this feature looks compared to the Stack Panel;

If we collapse or turn off any of the items inside the Dock Panel you can see that the last item adjusts to fit the remaining space.

I have put together a quick example where this could be used. The example shows a chat window with tabbed areas for options and a list of private conversations. Clicking the tab will expand and collapse the area allowing more space for the conversation to be displayed. Notice the text in the conversation area filling up the extra space.

To get each item in the Dock Panel to stack in the direction we want we add the following XAML on each item. Controls:DockPanel.Dock=”right”. ‘Controls’ is the identifier for the reference we made when adding the Custom controls to our project in my previous post. The items can be docked to the following directions:

Top
Bottom
Left
Right

Remember that you can set items to different directions within the same Dock Panel.

If you want to expand the controls available to you inside Microsoft Expression Blend then a good start is downloading the latest Silverlight toolkit from Codeplex. At the moment the toolkit features the following Stable new controls;

• AutoCompleteBox
• DockPanel
• HeaderedContentControl
• HeaderedItemsControl
• Label
• NumericUpDown
• TreeView
• WrapPanel

I will post some examples and tricks using these controls over the next few weeks.

How to install the new controls

Once you have downloaded the toolkit, extract the files to your hard drive and launch Expression Blend.

Select the ‘Project’ tab and right click on the ‘References’ folder, select ‘Add Reference…’.

Use the file browser that appears to find the extracted files from the downloaded toolkit. Open the ‘Binaries’ folder and select the file ‘Microsoft.Windows.Controls.dll’. You can add all 4 files inside the ‘Binaries’ folder, but most of the Stable controls are inside the above file.

To be able to use the full functionality of the controls, we need to reference them in the XAML. Add the line xmlns:Controls=”clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls” in with the rest of the meta data at the top of the XAML.

Remember to add a reference for each of the items you added in the ‘Binaries’ folder. You will need a different identifier for each reference, I have used ‘Controls’ for the above one.

To use the new controls you need to click on the ‘Asset library’ button at the bottom of the main toolbox.

Now select the ‘Custom Controls’ tab inside the ‘Asset Library’.

Now you have access to the additional controls added. For example, select ‘DockPanel’.

The ‘DockPanel’ control now appears in the toolbox, simply select and draw it’s boundaries onto the design area.

You can only display one Custom Control in the toolbox at a time with the current version of Blend. To switch to a different Custom Control simply repeat the process through the ‘Asset Library’.