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…’.

click on the Project tab and right click the References folder

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.

Click the Asset Library buttom in the toolbox

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

Click the Custom controls tab

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

Select DockPanel from the list

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

Select the DockPanel from the toolbox and plot its 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’.

By splitting your project plan into 4 areas and seperating them with clear mile stones we can minimize over servicing. Each mile stone is recognized by the client signing off the progress so far and acknowledging the progression into the next stage.

This progression means that returning to a previous stage can clearly be recognised as being out of scope and duely effect budget and dead line targets.

The first 2 stages are all about defining scope where the creative limits of the project are cooked and set. The second 2 stages are about delivering the project.

Discovery is about making sure the clients requirements are understood, costs are set out and the ground work is laid out for a solution to build on. Once Discovery is signed off Concept can be started with a clear direction.

Concept is about creating and locking down the design and functionality. Once Concept is signed off the project can be built knowing that every element has been thought through, designed and laid out in a ‘Func spec’ – a document listing every element and every posible function. At this point the project is completely scoped out.

Development can now proceed with a very clear path laid out to follow. Scope should not grow anymore unless it is treated as an additional request to the project. Once development is finished a test process is put in place to check quality and user experience. A refinement process is then carried out to tweak the experience based on the test feedback before getting client feedback and repeating. Once development is signed off the project is good to go live and requires to go through the Deployment process.

Deploy involves uploading the experience to a live secret location or on a secure live area. This allows a final test before letting the experience go live. At this point the project is complete, hopefully on time and within budget.

Finally, it is advised to set out dates to achive each mile stone. If a mile stone is hit too late it can be treated as an early warning that the project timeline is in danger of slipping. Either additional resource can be thrown in to get the project back on track, features can be taken out or the remaining mile stones and final goal post can be adjusted accordingly. At the very least it gives you a chance to manage client expectations early on in the projects life time.