February 5th, 2009

How to use the Dock Panel in the Silverlight ToolKit

All Silverlight Examples, Silverlight 2 tutorials, Silverlight Blend Tutorials, by Gavin Wignall.

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.

Back Top

Responses to “How to use the Dock Panel in the Silverlight ToolKit”

  1. thanks for your kindly information..

  2. thanks for dockpanel controls.

  3. When I try to compile I get an error that says “GetSilverlightItemsFromProperty could not be loaded from assembly Tasks.dll.” I’m using Silverlight 4. Is this example not compatible with Silverlight 4?

  1. No trackbacks yet.

Leave a Reply

Back Top