How to Use Custom User Controls in Silverlight

March 2008 - Important Note

This tutorial is no longer valid. It was written for Microsoft Silverlight 1.1 Alpha Refresh, which no longer exists - it has been replaced by Silverlight 2. We have left the page up for historical purposes (and because there are incoming links). Once again, the information below is invalid and in some cases misleading for Silverlight 2.

Since Microsoft hasn't released an official library of controls for Silverlight, making and using your own is very important. This tutorial is going to show you how to import and add a custom control to your Silverlight application.

The code and examples in this post have been written using Silverlight 1.1 Alpha. This tutorial won't cover how to make user controls - just how to use them. Just like a classic cooking show, I've prepared a user control earlier that we'll be using. I've created a replica of the default Windows XP WPF button. The DLL that holds this control can be downloaded here (Edit: download obsoleted And removed) - feel free to use the button for whatever you want.

Below is an example application built using the custom button control.

Edit: Example Obsoleted And Removed

Let's start by adding the button using nothing but XAML. The first thing we need to do is get the namespace into the XAML code.

This is the code from a default Silverlight application. I've added the following attribute to the canvas, which will let us reference the DLL containing our user controls.

What you put after "xmlns", in this case "controls", is what you will use to reference the namespace. This can be anything you want (as long as it doesn't already exist). The only control in that assembly is a Button, so let's put one of those on our canvas.

Here's what the above code will give you.

Edit: Example Obsoleted And Removed

There might be some build warnings associated with your new control, but don't worry about it - it will still work. I don't think Microsoft has worked all the kinks out yet.

I don't particularly like how Silverlight removed the standard click event and replaced it with the mouse up and down events. That being said, I implemented a custom click event for my button. Events are wired up to custom controls exactly like they are for anything else in Silverlight.

Of course now you'll need a function named "button_Clicked" in your code behind. That takes care how to add the button using XAML, let's see how to add it using code. The first thing you need to do is add a reference to the DLL. You add it just like you would any other DLL.

The code is very straight forward, so I'm just going to paste all of it here.

First I create an instance of the Button control. I then set the Text property, which controls what text is displayed on the button. Next I attach a method to the Click event. Lastly, I simply add the button to the Children collection. That's all that's required for adding the button using C# code.

That about does it for using custom user controls in Silverlight. Again, you can download the DLL containing the button control here (Edit: download obsoleted and removed). Look for a tutorial on actually creating custom controls in the future.