Data Binding Support Overview

Data binding allows you to establish a link between the UI and the underlying business logic and to keep them synchronized. It means that when a value is changed in the business layer, that change is automatically populated to the UI and vice versa. Of course, in order for this to work, you have to implement the proper notification or to use objects that have already implemented it.

Binding to RadListBox involves the following property:

• RadListBox.ItemsSource - gets or sets the data source (IEnumerable) used to generate the content of the RadListBox control. It can be bound to data from a variety of data sources in the form of common language runtime (CLR) objects.

Change Notification Support

To bind the RadListBox to a collection of business objects, you should use its ItemsSource property. If you want the changes to the collection to be automatically reflected to the RadListBoxItems, the collection should implement the INotifyCollectionChanged interface. There is a build-in collection in Silverlight, which implements the INotifyCollectionChanged interface and you could use it without making any effort - this is the generic ObservableCollection. However, to get a full benefit from the change notification support, your custom business objects should implement the INotifyPropertyChanged interface.

Consider using ObservableCollection or one of the other existing collection classes like List, Collection, instead of implementing your own collection. If the scenario requires a custom collection to be implemented, use the IList interface, which provides individual access by index to its items and the best performance.

Exmaple 1: Create an objects class

public class Country 
{ 
    public string Name { get; set; } 
    public string Capital { get; set; } 
} 

Exmaple 2: Create the ViewModel

public class MyViewModel : ViewModelBase 
{ 
    private ObservableCollection<Country> countries; 
    public ObservableCollection<Country> Countries 
    { 
        get 
        { 
            if (this.countries == null) 
            { 
                this.countries = new ObservableCollection<Country>(); 
                this.countries.Add(new Country() { Name = "Australia", Capital = "Canberra" }); 
                this.countries.Add(new Country() { Name = "Bulgaria", Capital = "Sofia" }); 
                this.countries.Add(new Country() { Name = "Canada", Capital = "Ottawa" }); 
                this.countries.Add(new Country() { Name = "Denmark", Capital = "Copenhagen" }); 
                this.countries.Add(new Country() { Name = "France", Capital = "Paris" }); 
                this.countries.Add(new Country() { Name = "Germany", Capital = "Berlin" }); 
                this.countries.Add(new Country() { Name = "India", Capital = "New Delhi" }); 
                this.countries.Add(new Country() { Name = "Italy", Capital = "Rome" }); 
                this.countries.Add(new Country() { Name = "Norway", Capital = "Oslo" }); 
                this.countries.Add(new Country() { Name = "Russia", Capital = "Moscow" }); 
                this.countries.Add(new Country() { Name = "Spain", Capital = "Madrid" }); 
                this.countries.Add(new Country() { Name = "United Kingdom", Capital = "London" }); 
                this.countries.Add(new Country() { Name = "United States", Capital = "Washington, D.C." }); 
            } 
            return countries; 
        } 
    } 
} 

Example 3: Create the RadListBox and set its ItemsSource

<Window.DataContext> 
    <local:MyViewModel/> 
</Window.DataContext> 
<Grid> 
    <telerik:RadListBox x:Name="listBox" 
                        Width="200" Height="100" 
                        ItemsSource="{Binding Countries}"/> 
</Grid> 

Data Templates

The ItemsSource property allows the RadListBox to be bound to any collection that implements the IEnumerable interface. For each item in the collection, a container of type RadListBoxItem is created. By using the ItemTemplate, ItemContainerStyle and TemplateSelectors you can control the appearance of the dynamically created items.

Example 4: Create DataTemplate and bind the Text property of the TextBlock to 'Name' to show the names of the countries or set it to 'Capital' to show their capitals

<Window.DataContext> 
    <local:MyViewModel/> 
</Window.DataContext> 
<Grid> 
    <Grid.Resources> 
        <DataTemplate x:Key="ListBoxCustomItemTemplate"> 
            <Grid> 
                <TextBlock Text="{Binding Name}"/> 
            </Grid> 
        </DataTemplate> 
    </Grid.Resources> 
    <telerik:RadListBox x:Name="listBox" 
                        Width="200" Height="100" 
                        ItemsSource="{Binding Countries}" 
                        ItemTemplate="{StaticResource ListBoxCustomItemTemplate}"/> 
</Grid> 

Besides the RadListBox's ItemTemplate property, you could use the DisplayMemberPath property for controlling the appearance of the created items.

Example 5: Set DisplayMemberPath to 'Name' to show the names of the countries or set it to 'Capital' to show their capitals

<Window.DataContext> 
    <local:MyViewModel/> 
</Window.DataContext> 
<Grid> 
    <telerik:RadListBox x:Name="listBox" 
                        Width="200" Height="100" 
                        ItemsSource="{Binding Countries}" 
                        DisplayMemberPath="Capital"/> 
</Grid> 

Figure 1: Result of Examples 4 and 5

If neither the DisplayMemberPath nor the ItemTemplate are set, the content of the item would be set to the value returned by the ToString() method of the business object.