Controls in Silverlight.(Part1… Content Controls)

Silverlight provides  a standard set of controls to let you build your application user interface.

The standard controls include:

Built-in Controls in Silverlight

Additional controls are available at

Most of times we want to customize the appearance of a control . In this post we shall see how
to customize a Silverlight control and make your own custom control. Follow these simple steps to get started.

  • Determine whether your control is a ContentControl or ItemsControl by looking at the control base class.
  • ContentControl : It has two important properties Content and Template. The Content property specifies the unique content for each instance of the control. The Template property defines a common appearance to all the instances of the controls.
  • ItemsControl : This control is used to customize the appearance of the list controls where the content is more than one item.The Content and Template properties are extended to set the content and appearance of each item.

Case 1) Working with Content Controls

To create a simple content control,you have to set the Template property which defines the appearance .
To add the control’s content into the template ,you need another container called ContentPresenter.Else your content will not be visible in the template.

The code below creates two content controls , the first one is a simple content control,with no elements.
The second content control includes a textbox as it’s content.So the template defined now applies to textbox and you get a  customized textbox.


Here is the code.

<Grid x:Name=”LayoutRoot” Background=”White” Width=”400″ Height=”380″>
<!–Creating simple content control–>
<ContentControl Grid.Row=”0″ x:Name=”cstControl1″>
<Border BorderBrush=”Chocolate” BorderThickness=”30″
CornerRadius=”10″ >
<ContentPresenter Content=”Hello”/>

<!–Customizing the appearance of textbox–>
<ContentControl Grid.Row=”1″ x:Name=”cstTextControl1″ Width=”300″ Height=”100″>
<TextBox Text=”Custom TextBox” Foreground=”DarkMagenta” />
<Border BorderThickness=”20″ CornerRadius=”10″ >
<LinearGradientBrush >
<GradientStop Color=”BlueViolet” Offset=”0″></GradientStop>
<GradientStop Color=”BlanchedAlmond” Offset=”1″></GradientStop>