Click here to Skip to main content
14,644,129 members
Articles » Web Development » Silverlight » Controls
Posted 7 Nov 2008


22 bookmarked

Silverlight: Create Custom Control like UserControl

Rate this:
2.89 (7 votes)
Please Sign up or sign in to vote.
2.89 (7 votes)
7 Nov 2008CPOL
This article explains how to create a developer friendly custom control in Silverlight 2.0


Silverlight 2.0 developer can add a control by: 

  1. copying control's XAML directly in application's XAML - this way the control is not reusable, developer must clone code to provide another control
  2. creating UserControl - but UserControl is a container, heavy control
  3. creating custom control - lightweight, more efficient for multiplying


The official Microsoft way for creating a custom control would be: create Silverlight Class Library, add generic.xaml to the project, create a class derived from Control, etc. A short tutorial can be found here.

Since all XAML is stored in generic.xaml, the file gets larger and modifying a large file is a problem. Imagine you have 10 controls and want to copy an animation from the first control to the last one. Scrolling and locating code can be time consuming.

What if the custom control would be created like UserControl - XAML file and code-behind. A developer could easily switch between those two parts. This article describes a technique to organize custom controls.

Step by Step

Create a new UserControl to get *.xaml and code-behind file (*.cs, *.vb).

Image 1

Select *.xaml and change Build Action to Resource.

Image 2

Open *.xaml file and replace UserControl tag with ResourceDictionary, remove also Width, Height and x:Class attributes.

Image 3

Open *.cs file. Replace UserControl with Control, remove InitializeComponent(); from constructor. Add Loaded event handler and call static method for loading style from XAML.

Image 4

A custom control is created but does not have any functionality. To make it useful, add Style, Storyboards, visual elements to the *.xaml and create overridden OnApplyTemplate() in *.cs. Articles on designing and programming custom controls can be found on The Code Project or on the internet.

Loader Class

Loader class for this sample contains the static LoadStyle(Control control) method. The method gets the control name from type, loads XAML from resources and applies style to the control.


public static void LoadStyle(Control control)
        int b;
        List<byte> bytes = new List<byte>();
        string name = control.GetType().Name;
        string assembly = "development";
        string directory = "Controls/";
        string path = string.Format(
            assembly, directory, name);

        //Read xaml as string
        StreamResourceInfo info = Application.GetResourceStream(
            new Uri(path, UriKind.Relative));
        while ((b = info.Stream.ReadByte()) >= 0)
        string xaml = Encoding.UTF8.GetString(
            bytes.ToArray(), 0, bytes.Count);

        //Create xaml object from string
        object obj = XamlReader.Load(xaml);
        if (obj != null && obj is ResourceDictionary)
            string key = name + "Style";
            control.Style = (Style)((ResourceDictionary)obj)[key];

Points of Interest 

In WPF, custom control styles can be linked in ResourceDictionary.MergedDictionaries. Silverlight does not (yet) have that feature.


  • 7th November, 2008: Initial post 


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
Slovenia Slovenia
WPF, Silverlight, ASP.NET

Comments and Discussions

GeneralMy vote of 1 Pin
Jitendra040511-Jun-09 0:49
MemberJitendra040511-Jun-09 0:49 
GeneralSuggestions Pin
Jerry Evans20-Nov-08 7:09
MemberJerry Evans20-Nov-08 7:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.