How to create a Custom Control in Silverlight?

  Custom Control in Silverlight

  Custom Control Creation

 we will just create a default control without any additional customization.To do this, right click on your Silverlight project, from the context menu select "Add" and from the second level context menu click "New Item". This will open the "Add New Item" dialog box. select "Silverlight Templated Control"  from 'installed templates' and give you proper name to the control. Remember that, the "Silverlight Templated Control" is the template for Custom Silverlight control.

Click "Add" button to add the custom control into your project. Once the control creation is done, you will notice two things in the solution explorer. Expand the "Solution Explorer" and there you will find the following things:

1. A "Themes" folder containing a file called "Generic.xaml". This is the default resource file for all of your styles for your controls.
2. A "MyControl.cs" file, which is nothing but the class of your custom control. The class name is the control name.

Note that, if you create multiple controls the IDE will create multiple class files for you with the name of the control. But the resource file will be same. All styles and templates of your control will go into the same file.

Know about the Class Here we will discuss about the class of the Custom control. You will get detailed knowledge on the class in later part of the series. For now just know that, every control by default derives from base class called "Control". You may change the base class to other control depending upon your requirement.

Have a look into the basic code that has been generated for you by the IDE:

using System.Windows.Controls; 

namespace CustomControlDemo

{

    public class MyControl : Control

    {

        public MyControl()

        {

            this.DefaultStyleKey = typeof(MyControl);

        }

    }

}

You will see the above code in the constructor. It takes the control style from the resource file and set it as the default style of the control. More on the class, we will discuss later.

Basic to the Template

You will find the basic template of the custom control in the Generic.xaml file. Open the file and you will find the below style inside the ResourceDictionary:

<Style TargetType="local:MyControl">

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="local:MyControl">

                <Border Background="{TemplateBinding Background}"

                        BorderBrush="{TemplateBinding BorderBrush}"

                        BorderThickness="{TemplateBinding BorderThickness}">

                </Border>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

The first line describes the TargetType of the style. The second line declares the Template of the control. Third line sets the value of the template. The child of the value is your ControlTemplate. You can design your control template here.

One thing I want to tell you here is that, this is the default template of any control. You can add more style values before starting the template declaration. We will discuss this later.

Adding the Custom Control in Main Page

Let us add the custom control that we created to our main page. To do this, you need to add the XMLNS namespace in the XAML. In our case, it is the project name. Once you declare the namespace, you will be able to access the control easily.

<UserControl x:Class="CustomControlDemo.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:CustomControlDemo="clr-namespace:CustomControlDemo" mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">

        <CustomControlDemo:MyControl 

            Width="200"

            Height="200"

            Background="Yellow"

            BorderBrush="Red"

            BorderThickness="1"/>

    </Grid>

</UserControl>

The above code will explain you everything. There we added our custom control named "MyControl" with proper declaration of height and width. If you don't specify the height and width, it will take the whole screen of the application (only for our example).

If you run the application, you will not see anything rather than the blank screen. This is because the control has default transparent background. Hence, we added a background color, border brush and border thickness to the control in the above code.


Once you run the application now, you will see the above UI in your browser. The rectangle is the custom control that we created in this sample. If you modify the control template, it will change the UI here automatically.