Adding a Custom Silverlight Control

Silverlight has a ton of controls that we can use in our Silverlight apps. Most of the times, this collection of controls is sufficient, but every once in a while, we need to create a custom control. Adding a new custom control for Silverlight is fairly straightforward, and in this blog post I am going to take a look at the steps involved in adding a new control to our Visual Studio project.

(Note: My aim is to show the steps for adding a new control, so I will not go into the specifics of the control itself)

I am going to start by creating a new project (type: Silverlight Application) in Visual Studio. Let’s call it Widget. To add a new Custom control, right click on the project in Solution Explorer, and go to Add->New Item, as shown in the figure below:

We get to a selection dialog which lists the various items that can be added. Let’s select “Silverlight User Control”, and change the name of the XAML file to WidgetControl.xaml

For this example, my new control is a pretty basic control as it simply contains a TextBox. Open the WidgetControl.xaml file, and add the TextBox element. Once done, the WidgetControl.xaml.cs file looks like:

<UserControl x:Class="Widget.WidgetControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <TextBox x:Name="txtBox" Text="Widget Box"></TextBox>
    </Grid>
</UserControl>

We can add new properties to our WidgetControl, and to illustrate this let’s add a new property called InternalText that is used to manipulate the text for the txtBox. Right click on the WidgetControl.xaml.cs file, and click on “View class Designer”.

When the class designer opens up right click on the WidgetControl class, click Add->Property.

Add the new String property called InternalText. Once the property has been added, the WidgetControl.xaml.cs file will be updated automatically to include the new property. The file looks as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Widget
{
    public partial class WidgetControl : UserControl
    {
        public WidgetControl()
        {
            InitializeComponent();
        }

        public String InternalText
        {
            get
            {
                throw new System.NotImplementedException();
            }
            set
            {
            }
        }
    }
}

Since our new property simply wraps around the Text property of the TextBox, so let’s go ahead and implement our InternalText property:

        public String InternalText
        {
            get
            {
                return txtBox.Text;
            }
            set
            {
                txtBox.Text = value;
            }
        }

Using a Custom Control:

Once we’ve created a custom control, using it is pretty straightforward. All we need is to declare our xml namespace, and start using the control. Continuing my example, I’ve added my custom WidgetControl to MainPage.xaml file. The code to make this happen is on lines 6 & 11 below:

<UserControl x:Class="Widget.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:wts="clr-namespace:Widget"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <wts:WidgetControl x:Name="widgetCtrl" InternalText="Let's Text"/>
    </Grid>
</UserControl>