Over the past year Corey was a lead developer on the NBCOlympics.com Silverlight 2 video player, he is currently finishing up a book with PeachPit Press - Microsoft Expression Blend a Visual Quickstart Guide (ISBN 0-321-41223-0), and he maintains a Silverlight blog “Silverlight made Simple”. Other Silverilght project he has worked on are HSN.tv with Silverlight 1.0 and the Blockbuster Stream application using Silverlight 2. Corey is a DZone MVB and is not an employee of DZone and has posted 14 posts at DZone. You can read more from them at their website. View Full User Profile

Overview of Databinding in Silverlight

10.09.2008
| 6561 views |
  • submit to reddit

The goal the below code is to bind data using XAML.  So, for the example I used MLB Pitching stats for 2008, created a Pitcher object, then a PitcherCollection object, and finally used XAML to define an instance of the PitcherCollection.  The result is the Page.xaml.cs does not have any code in it, but a list box is fully bound to a data source.

1. The data source.  This is a sample of the XML used.

<Pitchers>
<Pitcher>
<Name>Johan Santana</Name>
<Wins>16</Wins>
<ERA>2.53</ERA>
</Pitcher>

<Pitcher>
<Name>Cliff Lee</Name>
<Wins>22</Wins>
<ERA>2.54</ERA>
</Pitcher>
</Pitchers>

2. Next create two classes; the Pitcher and PitcherCollection.  Pitcher uses the interface INotifyPropertyChangedObservableCollection<Pitcher> and PitcherCollection inherit.

using System.ComponentModel;

namespace DataBindingExample.Data
{
public class Pitcher : INotifyPropertyChanged
{
#region INotifyPropertyChanged Members

public event PropertyChangedEventHandler PropertyChanged;

#endregion

private void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}

public string Name
{
get { return name; }

set {

name = value;
OnPropertyChanged("name");
}
}

private string name;

public double ERA
{
get { return era; }

set {
era = value;

OnPropertyChanged("era");
}
}

private double era;

public int Strikeouts
{
get { return srikeouts; }

set {
srikeouts = value;
OnPropertyChanged("srikeouts");
}
}

private int srikeouts;

public int Wins
{
get { return wins; }

set {
wins = value;

OnPropertyChanged("wins");
}
}

private int wins;
}
}
using System.Collections.ObjectModel;
using System.Xml.Linq;
using System.Linq;
using System.Collections.Generic;

namespace DataBindingExample.Data
{
public class PitchersCollection : ObservableCollection<Pitcher>
{
public PitchersCollection()
{
Load();
}

public void Load()
{
XDocument doc = XDocument.Load(@"Data/Pitchers.xml");

var q = from p in doc.Descendants("Pitcher")

select new Pitcher
{
Name = (string)p.Element("Name"),

ERA = (double)p.Element("ERA"),

Wins = (int)p.Element("Wins"),

Strikeouts = 5
};

if (q != null)
{
// Add items to this collection
foreach (var item in q)
{
this.Add(item);
}
}
}
}
}

3. Add the data source to the UserControl.Resources section of your XAML and add a ListBox control refrencing the object.

<UserControl x:Class="DataBindingExample.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:data="clr-namespace:DataBindingExample.Data" Width="400" Height="300">
<UserControl.Resources>

<data:PitchersCollection x:Key="PitchersCollection" />

</UserControl.Resources>

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

<!--<ListBox ItemsSource="{Binding Source={StaticResource PitchersCollection}, Mode=OneWay}" DisplayMemberPath="Name">-->

<ListBox ItemsSource="{Binding Source={StaticResource PitchersCollection}, Mode=OneWay}">

<ListBox.ItemTemplate>

<DataTemplate>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="150" />

<ColumnDefinition Width="*" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<TextBlock Text="{Binding Path=Name, Mode=OneWay}" Grid.Column="0" />

<TextBlock Text="{Binding Path=Wins, Mode=OneWay}" Grid.Column="1" Margin="0,0,20,0" />

<TextBlock Text="{Binding Path=ERA, Mode=OneWay}" Grid.Column="2" />

</Grid>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

</UserControl>

The resulting application:

Resources:

Scott Guthrie’s Silverlight 2 introduction blog post.  Used this for the ListBox - http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-5-using-the-listbox-and-databinding-to-display-list-data.aspx

LINQ to Objects - http://www.hookedonlinq.com/LINQtoObjects5MinuteOverview.ashx

References
Published at DZone with permission of Corey Schuman, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)