Silverlight 2 Controls, Data Binding, Templates and Styles

Silverlight 2 provides a subset of Windows Presentation Foundation Controls including a set of Layout controls such as Cancas, Stackimage Panel and Grid and visual controls such as Button, TextBox, Calendar, Checkbox, ListBox, RadioButton, DataGrid, Slider, and many more. In addition,  designers and developers can create custom User Controls.

Some Silverlight controls support Data binding that revered feature of all UI developers that allows them to take a list or array of objects and attach it to a UI control with relative ease. The UI control then takes care of raising events as the user interacts with that data. Data binding is typically associated with lists and grids.

In our sample application, the list of CDs and the grid of tracks are leveraging data binding, templates and styles. Let’s take a look at the details.


If we look at the XAML for our Page class, we will see that the outer most XAML tag is UserControl. This is the base class for defining a new control that encapsulates other controls and provides its own logic. Within the UserControl we define a Grid layout control. The Grid Layout control allows us to divide the real-estate of our application into rows and columns for the purposes of placing visuals into these sub-areas. You also note that this is where I specify the background as a Linear Gradient Brush, a background that transitions from one color to another in a particular direction, in this case from top to bottom.



The Grid Layout control enumerates its rows and columns starting with 0. Our sample application is divided into 2 rows, 2 columns as follows:


It is possible to nest Grids and other layout controls. For example, within Row 1, Column 1 of this Grid there is another Grid defined that is made up of 3 columns:


It is very easy to specify how a visual control is placed into a Grid. This XAML defines a ListBox control that is placed in the first column and that spans 2 rows.


Data Binding

What we also see in this code snippet is the ItemSource setting. The ItemSource is an IEnumerable collection. The syntax you see here, {Binding Mode=OneWay}, specifies that the data for the ListBox will be provided programmatically and will be read only. The other supported mode is TwoWay which allows the bound collection to be updated through the interactions with the control.

The code to attach the collection is found in our web service call back function. The collection is returned in the generated EventArgs object. In this case it is an Array of type CD. I keep a local copy and set it as the ItemSource of the ListBox.


Templates and Styles

Finally if we go back to the XAML, we will see how we layout the data within the ListBox. This is where Templates come in. The ItemTemplate of the ListBox defines how each item is displayed in the list. We can easily replace the default ItemTemplate with a DataTemplate and to create a custom layout. I am using nested StackPanels, an Image and 3 TextBlocks to achieve the result.


Note the use of Data Binding on each TextBlock specifying the property of the CD to bind to.


We also see the use of named Styles to provide common formatting for in this case TextBlocks. These reusable Styles are defined at Application Scope in the App.xaml file.


The result is a ListBox that uses the CD Image, Title, Artist and Release Date for each item in the collection.


Comments (5)
  1. Bob's Blog says:

    In order for your WCF Service to be invoked from Silverlight you need only change the default Web.Config

  2. Bob's Blog says:

    In order for your WCF Service to be invoked from Silverlight you need only change the default Web.Config

  3. Bob's Blog says:

    Abstract This series of articles takes a look at the current state of RIA development leveraging Silverlight

  4. Looking for a great, concise, just-get-to-the-point, intro to programming RIA’s using Silverlight 2.0?

  5. Shanmugam says:


    We create one silverlight 2 application.I need to bind the Check box in listbox dynamically.I tried, could bind the check box in staticwise. If anyone know the requirement please forward the suggestion with sample code.

    Advance thanks for your reply.



Comments are closed.

Skip to main content