Creating a Silverlight Custom Control

Introduction

This articles focuses on the process of creating a Custom Control in Silverlight 2. It describes the basics of what you need to build a styleable control with custom logic that can be used in Silverlight applications. The article shows a sample(part) of implementing a LinkLabel control that recognizes URIs in a given text and displays them as links instead of as plain text.

Overview

The control model in Silverlight 2 offers creating UserControls and Custom Controls. UserControls enable encapsulation of a specific logic. They are used in scenarios where you want to reuse XAML and/or logic in multiple places or build a sophisticated page with smaller chunks(the UserControls). However, in other scenarios you may need a custom logic to be built in the control and this control to allow designers customize easily its look. You need a way to modify the control visuals without having to modify the control logic. This is where the Custom Controls comes in handy. In Silverlight they derive from the Control class and specify a default style for the way they will look like.
To get started create a Silverlight Class Library project in Visual Studio. This will generate just a single .cs file. Lets take a sample implementation of a LinkLabel control.

 public class LinkLabel : Control

 {

 ...

 }

Ok, the first step is to define a default look for this control. A file called generic.xaml contains the UI of your custom controls. It should be placed in a "themes" directory inside your project. Add a new item of type XML File in your project in the "themes" directory and name it generic.xaml. By default when you add a new file the Build Action is set to Silverlight page. But the platform look for the generic.xaml as a Resource file. Therefore you need to change the default behavior:

1. Open the Properties window of the file.
2. Change the Build Action to Resource.
3. Clear the Custom Tool value.

In the generic.xaml add a ResourceDictionary element where you will put all the resources.

Creating Lookless Controls for WPF and Silverlight

This screencast is a continuation of a previous screencast entitled “Skins for WPF and Silverlight”. In this session we go beyond skinning built-in controls and learn what’s required to create our own skinnable (or ‘lookless’) controls.

This screencast assumes existing knowledge about styles and templates, so if you aren’t up to speed on those topics please consider watching the skinning screencast first.

The sample demonstrated in this screencast can be downloaded here.