February 3rd, 2009

Custom Controls – Installing the Silverlight toolkit

Silverlight 2 tutorials, Silverlight Blend Tutorials, Silverlight News, by Gavin Wignall.

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

Back Top

Responses to “Custom Controls – Installing the Silverlight toolkit”

  1. am trying to get the tree view selected item to work
    any ideas or examples?

    Frank Patton at October 9, 2009 3:10 pm
  1. No trackbacks yet.

Leave a Reply

Back Top