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.

Layout

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.

image

image

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

image

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:

image

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.

image

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.

image

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.

image

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

image

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.

image

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

image