Click here to Skip to main content
Click here to Skip to main content

Silverlight: Create Custom Control like UserControl

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

Introduction

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

Background

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

Select *.xaml and change Build Action to Resource.

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

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

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.

Code

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

        //Read xaml as string
        StreamResourceInfo info = Application.GetResourceStream(
            new Uri(path, UriKind.Relative));
        while ((b = info.Stream.ReadByte()) >= 0)
        {
            bytes.Add((byte)b);
        }
        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];
        }
    }
    catch
    {
    }
} 

Points of Interest 

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

History

  • 7th November, 2008: Initial post 

License

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

Share

About the Author

papnkukn
Software Developer
Slovenia Slovenia
WPF, Silverlight, ASP.NET

Comments and Discussions

 
GeneralMy vote of 1 PinmemberJitendra040511-Jun-09 1:49 
GeneralSuggestions PinmemberJerry Evans20-Nov-08 8:09 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150129.1 | Last Updated 7 Nov 2008
Article Copyright 2008 by papnkukn
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid